How the /clone-website Command Works in the AI Website Cloner Template

The /clone-website command executes a deterministic six-phase pipeline that extracts live website assets, computes exact CSS values via getComputedStyle(), and dispatches parallel builder agents to generate a pixel-perfect Next.js replica.

The /clone-website command is the core automation engine in the JCodesMore/ai-website-cloner-template repository. When an AI coding agent invokes the command, it triggers a sophisticated reverse-engineering workflow defined in .github/skills/clone-website/SKILL.md. This process leverages browser automation to capture visual and interactive details, then utilizes parallel Git worktrees to build production-ready components without breaking the main branch.

The Six-Phase Execution Pipeline

The skill orchestrates a deterministic workflow that transforms a target URL into a fully scaffolded Next.js application. Each phase is strictly sequential and validated by build checks.

Phase 1: Pre-flight Validation

Before any extraction begins, the agent validates the runtime environment. It confirms that a browser automation tool—such as Chrome MCP or Playwright MCP—is available and responsive. The command parses the URLs supplied after /clone-website, verifies network reachability, and ensures the existing Next.js scaffold builds successfully with npm run build. It then creates the output directory structure, including docs/research/ and docs/design-references/.

Phase 2: Reconnaissance and Asset Discovery

The agent performs a comprehensive crawl of the target site. It captures full-page screenshots at desktop (1440 px) and mobile (390 px) viewports. Using browser automation, it extracts global design tokens—including fonts, color palettes, and favicons—and writes them to src/app/layout.tsx and src/app/globals.css.

An interaction sweep records every behavior triggered by scroll, click, hover, and responsive breakpoints, documenting these findings in docs/research/BEHAVIORS.md. The agent concurrently maps the page topology, noting section order, sticky overlays, and component dependencies.

Phase 3: Foundation Build

With reconnaissance data collected, the pipeline updates the project's foundational files. It generates TypeScript interfaces for observed content structures and extracts inline SVGs into src/components/icons.tsx as React components. The skill auto-generates scripts/download-assets.mjs, a Node.js script that downloads every image and video asset to the public/ directory. The agent executes this script, then verifies a clean build before proceeding to component generation.

Phase 4: Component Specification and Dispatch

This phase operates on a spec-first architecture. For each section or sub-component identified in the topology:

1. Extraction: A browser-MCP script extracts computed CSS, multi-state styles (hover, active, focus), real text content, and associated assets using getComputedStyle().
2. Specification: The agent writes an exhaustive markdown file to docs/research/components/<Component>.spec.md containing screenshot references, DOM hierarchy, exact CSS values, interaction models, responsive breakpoints, and asset lists.
3. Parallel Build: The command dispatches a dedicated builder agent within its own Git worktree. This agent receives the spec inline, builds the component under src/components/, and validates it with npx tsc --noEmit.
4. Merge: Upon successful compilation, the worktree merges back into the main branch, and npm run build runs to ensure integration integrity.

This parallelization allows multiple sections to be built simultaneously while keeping the main branch always buildable.

Phase 5: Page Assembly

After all components are generated and merged, the agent edits src/app/page.tsx to import and arrange sections according to the documented topology. It wires global behaviors such as scroll-snap, Lenis smooth scrolling, and IntersectionObserver-based animations, ensuring the interactive fidelity matches the original site.

Phase 6: Visual QA Diff

The final phase executes side-by-side visual diffs comparing the live target site against the generated clone at both desktop and mobile breakpoints. Discrepancies trigger automatic revisions by revisiting the component spec files and adjusting the generated code until pixel parity is achieved.

Key Source Files and Architecture

The /clone-website command relies on specific files to maintain its deterministic workflow:

• .github/skills/clone-website/SKILL.md: Defines the complete orchestration logic, pre-flight checks, and detailed phase instructions for the AI agent.
• src/app/layout.tsx: Receives injected global fonts and metadata (favicons, OG images) extracted during reconnaissance.
• src/app/globals.css: Stores generated CSS design tokens, including color variables, spacing scales, and global animation keyframes.
• docs/research/components/: Directory containing exhaustive markdown specification files used by builder agents to construct individual sections.
• scripts/download-assets.mjs: Auto-generated Node.js script executed at runtime to fetch external images and videos into the public/ folder.

Under the Hood: Extraction Scripts

The command generates specialized scripts to handle asset procurement and data extraction.

Invoking the Command

Execute the skill from any terminal where the AI agent is active:

/clone-website https://example.com

Asset Download Script

The skill generates scripts/download-assets.mjs to handle bulk media downloads:

// scripts/download-assets.mjs – auto-generated by the skill
import fs from "node:fs";
import path from "node:path";
import https from "node:https";

const assets = JSON.parse(process.argv[2]); // JSON from the extraction script
for (const img of assets.images) {
  const url = new URL(img.src);
  const out = path.resolve("public/images", path.basename(url.pathname));
  https.get(url, res => {
    const file = fs.createWriteStream(out);
    res.pipe(file);
  });
}

Component Specification Template

Each builder agent receives a structured specification file:

# HeroSection Specification

## Overview

- **Target file:** src/components/HeroSection.tsx
- **Screenshot:** docs/design-references/hero-section-desktop.png
- **Interaction model:** scroll-driven

Summary

• The /clone-website command follows a six-phase pipeline from pre-flight validation to visual QA diffing.
• Browser automation extracts exact CSS values and interaction states, storing them in docs/research/BEHAVIORS.md and component specs.
• Parallel Git worktrees allow multiple builder agents to generate components simultaneously without destabilizing the main branch.
• Spec-first architecture ensures deterministic, auditable component generation based on getComputedStyle() data.
• Assets are automatically downloaded to public/ via generated Node.js scripts, while global tokens populate src/app/globals.css and src/app/layout.tsx.

Frequently Asked Questions

What browser automation tools does the /clone-website command require?

The command requires either Chrome MCP or Playwright MCP to be available in the environment. During the pre-flight phase, it validates the presence of these tools before attempting to extract screenshots or compute CSS values from the target website.

How does the command ensure pixel-perfect CSS accuracy?

The pipeline uses getComputedStyle() to capture the exact computed CSS values from the live DOM, including multi-state styles for hover, focus, and active states. These values are documented in component specification files and used by builder agents to replicate styling with precision.

Why does the pipeline use Git worktrees for component generation?

Parallel Git worktrees isolate each builder agent's work, allowing multiple components to be developed simultaneously without causing merge conflicts or build failures on the main branch. Each worktree runs npx tsc --noEmit to validate type safety before merging back into the main branch.

Where are the extracted design tokens and assets stored?

Global design tokens are stored in src/app/globals.css for styling variables and src/app/layout.tsx for fonts and metadata. Images and videos are downloaded to the public/ directory via the auto-generated scripts/download-assets.mjs script, while component specifications reside in docs/research/components/.

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