ai-website-cloner-template

Orchestrates a four-phase pipeline (Reconnaissance → Foundation → Extract-Spec-Dispatch → Assembly) using a Foreman agent model that coordinates specialized sub-agents via Claude Code's MCP integration. Each phase bridges natural language (live URL) to code entity space by decomposing the cloning task into parallel, non-conflicting Git worktree operations. The system uses getComputedStyle() extraction and DOM introspection during reconnaissance to capture exact visual and structural fidelity before code generation begins.

Phase 1 of the cloning pipeline uses Chrome MCP to programmatically inspect a live website, capturing getComputedStyle() values for all DOM elements, taking screenshots for visual reference, and extracting the complete DOM tree structure. This reconnaissance data is serialized into research artifacts (JSON inspection guides) that feed downstream agents with exact color values (converted to OKLCH), typography metrics, spacing patterns, and component boundaries. The system prioritizes real content extraction (actual text, images, SVGs) over placeholder generation.

Analyzes the component dependency graph extracted during reconnaissance to identify circular dependencies, import order constraints, and safe parallelization boundaries. The system builds a directed acyclic graph (DAG) of component relationships and uses topological sorting to determine which components can be generated in parallel without deadlocks. This analysis feeds the Extract-Spec-Dispatch phase, allowing the Foreman agent to distribute work across sub-agents safely. If circular dependencies are detected, the system flags them for manual resolution or suggests refactoring strategies.

Provides a structured workflow for transitioning cloned sites from emulation (1:1 visual replica) to production (customized, maintainable codebase). The system supports post-emulation modifications via TARGET.md configuration, allowing users to override component behavior, styling, and content without touching generated code. Customization rules are applied during the Assembly phase, enabling non-technical users to adapt cloned sites for their specific use cases. The workflow includes documentation of customization decisions, version control of configuration changes, and rollback capabilities.

Phase 2 constructs the Next.js 16 + Tailwind CSS v4 + shadcn/ui foundation by downloading all discovered assets (images, fonts, SVGs) from the target site, generating a Tailwind configuration file with extracted design tokens (OKLCH colors, spacing scale, typography), and scaffolding the component directory structure. This phase runs before component code generation to ensure all styling primitives and assets are available for downstream agents. Uses Tailwind v4's native OKLCH support to preserve exact color fidelity without manual conversion.

Phase 3 decomposes the cloned website into logical component sections and spawns parallel Claude Code sub-agents, each operating on an isolated Git worktree to build different sections simultaneously without merge conflicts. Each sub-agent receives a specification (DOM structure, styling, content) and generates TypeScript React components with shadcn/ui primitives. The Foreman agent coordinates task distribution, monitors progress, and aggregates results. This architecture enables linear scaling of component generation time relative to agent availability rather than sequential DOM traversal.

Phase 4 merges all parallel worktree branches into the main codebase, validates component imports and type safety, runs the Next.js build pipeline, and performs visual QA by comparing rendered output against original site screenshots. The system uses TypeScript strict mode to catch integration errors early, generates a comparison report (visual diff, component coverage metrics), and flags components requiring manual refinement. This phase ensures the cloned site is production-ready and pixel-accurate before handoff.

A reusable skill library (.claude/skills/) that provides Claude Code agents with pre-built functions for browser automation (Chrome MCP), file system operations (reading/writing components, assets), and Git operations (worktree creation, branch management). Skills are invoked via Claude Code's function-calling interface and abstract away low-level implementation details, allowing agents to focus on high-level cloning logic. Each skill is documented with input/output schemas and error handling patterns, enabling reliable multi-agent coordination.

A YAML/Markdown configuration file (TARGET.md) that allows users to specify cloning scope, customization rules, and post-emulation modifications without touching agent code. The configuration defines which sections of the target site to clone, which components to skip or customize, and which design tokens to override. Agents parse TARGET.md during the Extract-Spec-Dispatch phase and apply customization rules during component generation. This enables non-technical users to customize cloning behavior and allows teams to version control cloning specifications alongside code.

Generates a production-ready Next.js 16 application with TypeScript strict mode, Tailwind CSS v4 (using native OKLCH color support), and shadcn/ui accessible component primitives. The scaffold includes a pre-configured build pipeline, ESLint/Prettier formatting, and a component directory structure (src/components/ui/ for primitives, src/components/ for cloned components). All generated components use Tailwind utility classes for styling (no CSS modules) and import shadcn/ui primitives for common UI patterns (buttons, cards, modals). This ensures consistency and maintainability across cloned components.

Extracts design tokens (colors, typography, spacing) from computed styles during reconnaissance and converts RGB/Hex colors to OKLCH color space for high-fidelity reproduction. OKLCH is a perceptually uniform color space that preserves color accuracy better than sRGB when scaling or adjusting brightness. The system generates a Tailwind CSS v4 configuration file with OKLCH color values, enabling pixel-perfect color matching in the cloned site. Typography tokens (font families, sizes, weights, line heights) are extracted as CSS custom properties and integrated into the Tailwind config.

Discovers all external assets (images, fonts, SVGs) referenced in the target website during reconnaissance, downloads them to a local public/ directory, and generates an asset manifest (JSON) mapping original URLs to local paths. The system deduplicates assets by URL hash, validates file integrity, and organizes assets by type (images/, fonts/, svgs/). Downloaded assets are then referenced in generated components via relative paths, ensuring the cloned site is self-contained and does not depend on external CDNs. Supports common image formats (PNG, JPEG, WebP, SVG) and font formats (WOFF2, TTF, OTF).