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

> Discover the five-phase pipeline of the AI website cloner. Learn how this template inspects, extracts, specifies, builds, and verifies websites for production-ready Next.js code.

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

---

**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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) ([lines 88‑95](https://github.com/JCodesMore/ai-website-cloner-template/blob/master/README.md#L88)), 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md):

```bash

# 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:

```markdown

# 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:

```javascript
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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.