# How Component Specs Are Generated for AI Agents in the AI Website Cloner Template

> Discover how component specs are generated for AI agents in the AI Website Cloner Template. Learn about the automated extraction process capturing CSS, interactions, assets, and responsive behavior.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: internals
- Published: 2026-07-04

---

**Component Specs are generated through a seven-step automated extraction process that captures computed CSS, interaction states, assets, and responsive behavior, then outputs a structured markdown file to `docs/research/components/` for builder agents to consume.**

The JCodesMore/ai-website-cloner-template repository implements a deterministic pipeline that converts live websites into React components. During **Phase 3 – Component Specification & Dispatch**, the system automatically produces detailed specification documents that serve as the single source of truth for AI builder agents. These specifications eliminate ambiguity by capturing exact computed styles, interaction states, and asset references directly from the target website.

## The Phase 3 Pipeline: From Extraction to Dispatch

The `/clone-website` skill orchestrates a repeatable, auditable workflow that transforms visual UI sections into machine-readable specifications. According to the skill definition in [`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md), the process follows seven distinct phases:

1. **Section‑by‑section extraction** – The skill scrolls the target page, isolates each distinct visual section, and executes a JavaScript extraction script to capture the DOM hierarchy.
2. **Full computed CSS capture** – The system calls `getComputedStyle()` for every element inside the selector, retaining only values that differ from defaults to ensure pixel‑perfect accuracy.
3. **State & behavior discovery** – The extractor records default, hover, active, scroll‑triggered, and other interaction states, including exact triggers (e.g., scroll‑position 50 px) and transition details.
4. **Content & asset collection** – All text nodes, `alt` attributes, ARIA labels, and URLs for images, videos, background‑images, and inline SVGs are preserved.
5. **Responsive snapshots** – Screenshots and CSS snapshots are captured at three reference viewports: desktop 1440 px, tablet 768 px, and mobile 390 px.
6. **Spec file generation** – A markdown file is written to `docs/research/components/<ComponentName>.spec.md` using a built‑in template.
7. **Dispatch** – The spec content is passed inline to a builder agent, which creates the React component at `src/components/<ComponentName>.tsx`.

## Technical Implementation: The Browser Extraction Script

The extraction logic relies on a JavaScript function executed via browser MCP (Model Context Protocol). This script traverses the DOM tree to a depth of four levels, capturing only meaningful style values while filtering out defaults like `"none"` or `"auto"`.

```javascript
// Replace SELECTOR with the component’s CSS selector
(function(selector) {
  const el = document.querySelector(selector);
  if (!el) return JSON.stringify({ error: 'Element not found' });

  const props = [
    'fontSize','fontWeight','fontFamily','lineHeight','letterSpacing','color',
    'backgroundColor','padding','margin','width','height','borderRadius',
    'boxShadow','opacity','transform','transition','zIndex'
  ];

  const extract = e => {
    const cs = getComputedStyle(e);
    const styles = {};
    props.forEach(p => { const v = cs[p]; if (v && v !== 'none' && v !== 'auto') styles[p] = v; });
    return styles;
  };

  const walk = (node, depth) => {
    if (depth > 4) return null;
    const children = [...node.children];
    return {
      tag: node.tagName.toLowerCase(),
      classes: node.className,
      text: node.childNodes.length===1 && node.childNodes[0].nodeType===3 ?
            node.textContent.trim().slice(0,200) : null,
      styles: extract(node),
      children: children.map(c => walk(c, depth+1)).filter(Boolean)
    };
  };
  return JSON.stringify(walk(el,0),null,2);
})('SELECTOR');

```

This script ensures that **AI agents** receive exact computed values rather than inherited or cascaded stylesheet rules, preventing layout discrepancies during the rebuild phase.

## The Component Spec File Structure

Once extraction is complete, the system generates a markdown specification following a strict template defined in the cloning skill. This template standardizes how information is presented to builder agents.

```markdown

# <ComponentName> Specification

## Overview

- **Target file:** `src/components/<ComponentName>.tsx`
- **Screenshot:** `docs/design-references/<screenshot>.png`
- **Interaction model:** <static | click‑driven | scroll‑driven | time‑driven>

## DOM Structure

<Describe the element hierarchy – what contains what>

## Computed Styles (exact values from getComputedStyle)

### Container

- display: …
- padding: …
- maxWidth: …
- … (all relevant properties)

### <Child element 1>

- fontSize: …
- color: …
- …

### <Child element N>

- …

## States & Behaviors

### <Behavior name, e.g., “Scroll‑triggered floating mode”>

- **Trigger:** <exact mechanism – scroll 50 px, IntersectionObserver …>
- **State A (before):** …
- **State B (after):** …
- **Transition:** transition: all 0.3s ease
- **Implementation approach:** <CSS transition + scroll listener …>

### Hover states

- **<Element>:** <property>: <before> → <after>, transition: <value>

## Per‑State Content (if applicable)

### State: "Featured"

- Title: "…"
- Cards: [{ title, description, image, link }, …]

## Assets

- Background image: `public/images/<file>.webp`
- Icons used: `<ArrowIcon>, <SearchIcon>` from `icons.tsx`

## Text Content (verbatim)

<All textual copy from the live site>

## Responsive Behavior

- **Desktop (1440 px):** …
- **Tablet (768 px):** …
- **Mobile (390 px):** …
- **Breakpoint:** layout switches at ~<N> px

```

## Key Configuration and Reference Files

The repository contains several critical files that govern how **Component Specs** are generated and interpreted:

- **[`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md)** – Contains the concrete implementation of the `/clone-website` skill, including Phase 3 steps and the spec template structure.
- **[`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md)** – Provides the checklist that drives what information must be captured for each component, including state definitions and breakpoint requirements.
- **[`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md)** – Serves as the single source of truth defining how agents interpret skills and where spec files are located.
- **[`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md)** – Outlines the high‑level cloning pipeline and the role of component specifications in the overall workflow.

## Summary

- **Component Specs** are generated during Phase 3 of the `/clone-website` skill execution.
- The extraction process uses `getComputedStyle()` to capture exact CSS values, filtered to remove browser defaults.
- Specifications include DOM structure, interaction states, asset references, and responsive behavior across three breakpoints.
- Output files are written to `docs/research/components/<ComponentName>.spec.md` and dispatched directly to builder agents.
- The pipeline ensures **AI agents** receive complete, reproducible blueprints before building React components in `src/components/`.

## Frequently Asked Questions

### What information is included in a Component Spec file?

A Component Spec file contains the target file path, computed CSS values for all elements, interaction states with exact triggers and transitions, asset locations (images, icons, videos), verbatim text content, and responsive behavior specifications for desktop, tablet, and mobile viewports.

### How does the extraction script ensure CSS accuracy?

The script calls `getComputedStyle()` on every element within the component selector and filters out default values like `"none"` or `"auto"`. This approach captures the final computed values after all stylesheets, inline styles, and browser defaults have been applied, ensuring pixel‑perfect reproduction.

### Where are Component Spec files stored?

Generated spec files are written to `docs/research/components/<ComponentName>.spec.md` within the repository. This location is standardized across the workflow so that builder agents can consistently locate and read the specifications before generating code in `src/components/<ComponentName>.tsx`.

### How do builder agents use Component Spec files?

Builder agents receive the spec content inline during the dispatch phase. They parse the markdown structure to extract computed styles, implement the documented state transitions, import referenced assets, and generate the corresponding React component code, ensuring the output matches the original website's appearance and behavior.