Understanding the Five-Phase Pipeline of the AI Website Cloner Template

The AI website cloner template executes a fully automated five-phase pipeline that inspects, extracts, specifies, builds, and verifies any public website into a production-ready Next.js codebase.

The JCodesMore/ai-website-cloner-template repository implements a sophisticated orchestration system for reverse-engineering web interfaces. According to the pipeline description in README.md (lines 88‑95), the /clone-website skill triggers a structured workflow that transforms visual designs into clean React components while maintaining pixel-perfect fidelity.

Phase 1: Reconnaissance

The pipeline begins with Reconnaissance, a comprehensive inspection phase that captures the target website's visual and interactive properties. This phase performs automated screenshot capture, extracts design tokens (fonts, colors, spacing), and conducts an interaction sweep including scroll behaviors, click handlers, hover states, and responsive breakpoints.

Key outputs include screenshot assets, a raw CSS token list, and an interaction map. These artifacts provide the foundational data that subsequent phases refine into executable code. The reconnaissance methodology is documented in docs/research/INSPECTION_GUIDE.md, which guides AI agents on proper token extraction techniques.

Phase 2: Foundation

The Foundation phase establishes the project's global infrastructure by updating src/app/globals.css with extracted design tokens and downloading all referenced assets. This stage adds fonts, color palettes, and global style definitions while populating the public/ directory with images, videos, and icons scraped from the target site.

By configuring the scaffolding before component generation begins, this phase ensures that builder agents have access to the correct base assets and design variables. The updated globals.css file serves as the single source of truth for the visual theme that all components will reference.

Phase 3: Component Specs

During the Component Specs phase, the system generates detailed specification files for each UI element in docs/research/components/. These specifications capture exact computed CSS values through getComputedStyle() calls, document component states and behaviors, and map content requirements to specific asset paths.

The output consists of human-readable Markdown and JSON files that function as architectural blueprints. Each spec includes:

• Exact HTML tag semantics
• Computed style values (e.g., background-color: #ffffff, height: 64px)
• State definitions (default, hover, active)
• Asset dependencies
• Responsive breakpoint behaviors

Phase 4: Parallel Build

The Parallel Build phase leverages git worktrees to enable concurrent component construction. The system launches separate builder agents for each component or section, with each agent operating in an isolated worktree to prevent merge conflicts. Builders read the specification files from Phase 3 and generate React components with Tailwind CSS classes.

This parallelism significantly accelerates the reconstruction process while maintaining code isolation. As implemented in scripts/sync-skills.mjs, builder agents consume the JSON specifications and output individual component files to src/components/. Each worktree maintains its own commit history, facilitating clean integration during the assembly phase.

Phase 5: Assembly & QA

The final Assembly & QA phase merges the parallel worktrees, wires up Next.js page routes, and validates the output against the original screenshots. This stage performs visual diff comparisons between the generated pages and the reconnaissance screenshots captured in Phase 1.

If the visual diff detects mismatches, the system triggers automated fixes or flags components for manual review. The phase produces a fully assembled src/app/ directory structure and a QA report containing visual diff images, ensuring the final clone faithfully reproduces the target site's appearance and behavior.

Running the Pipeline

To initiate the five-phase pipeline, invoke the /clone-website skill defined in .github/skills/clone-website/SKILL.md:

# Start your AI coding agent (Claude Code is recommended)

claude --chrome

# Invoke the skill with the target URL

/clone-website https://example.com

The skill automatically orchestrates all five phases, producing auditable artifacts at each stage.

Component Specification Format

After Phase 3 completes, the docs/research/components/ directory contains detailed specifications like this HeaderNav example:

# Component: HeaderNav

- **HTML tag**: `<nav>`
- **Computed styles**  
  - background‑color: #ffffff (rgb(255,255,255))  
  - height: 64px  
  - padding: 0 24px
- **States**  
  - default: logo left, links centered, CTA right  
  - hover‑link: color #0066ff, underline none
- **Assets**  
  - logo: /public/images/logo.svg  
  - icons: /public/images/icons/*.svg
- **Responsive breakpoints**  
  - ≤ 768 px: collapses to hamburger menu

Builder agents consume these specifications to generate code. The following snippet from scripts/sync-skills.mjs demonstrates how the pipeline processes these files:

import { readFileSync } from 'fs';
const spec = JSON.parse(readFileSync('docs/research/components/HeaderNav.json'));
generateComponent(spec);   // creates src/components/HeaderNav.tsx with Tailwind classes

Summary

• The Reconnaissance phase extracts visual tokens and interaction maps through automated screenshot and CSS analysis.
• The Foundation phase configures global styles in src/app/globals.css and downloads assets to public/.
• The Component Specs phase generates detailed blueprints in docs/research/components/ with exact computed styles.
• The Parallel Build phase uses git worktrees to generate React components concurrently while maintaining isolation.
• The Assembly & QA phase merges worktrees, creates routes, and runs visual diff validation against original screenshots.

Frequently Asked Questions

How does the AI website cloner template handle responsive design?

The reconnaissance phase captures responsive breakpoints during the interaction sweep, documenting breakpoint behaviors in the component specifications. Builder agents then generate Tailwind CSS classes that implement these responsive rules, ensuring the cloned site maintains the original's mobile, tablet, and desktop layouts.

What triggers the transition between pipeline phases?

The /clone-website skill orchestrates automatic handoffs between phases, with each stage producing auditable artifacts that serve as inputs for the next. Phase 1 outputs feed into Phase 2's foundation updates, Phase 2's assets enable Phase 3's specifications, Phase 3's specs drive Phase 4's parallel builds, and Phase 4's worktrees merge during Phase 5's assembly.

Can the pipeline handle websites with complex JavaScript interactions?

Yes. The reconnaissance phase performs interaction sweeps that capture scroll behaviors, click handlers, and hover states. The component specifications document these behaviors explicitly, allowing builder agents to implement equivalent React state management and event handlers during the parallel build phase.

Where are the component specifications stored during the pipeline execution?

The system writes component specifications to docs/research/components/ during Phase 3, storing both human-readable Markdown files and machine-readable JSON files. These specifications remain available as documentation after the clone completes, providing a permanent record of the design decisions extracted from the target website.

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