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

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, 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".

// 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.

# <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 – Contains the concrete implementation of the /clone-website skill, including Phase 3 steps and the spec template structure.
• 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 – Serves as the single source of truth defining how agents interpret skills and where spec files are located.
• 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}