Clone Any Website with One URL: AI Website Cloner Template for Claude Code

Reverse-engineering a production website by hand often takes days of inspecting DOM structures, extracting design tokens, downloading assets, and reconstructing responsive component trees. An open-source project named ai-website-cloner-template has emerged to automate this entire workflow, enabling AI coding agents to rebuild target web applications into clean Next.js codebases directly from a single URL.

Image source: JCodesMore / @xiao92666

Published by developer JCodesMore, the repository combines Claude Code with the Chrome Model Context Protocol (MCP) to inspect live pages in an automated browser session, extract exact computed styles, write structured component specifications, and dispatch parallel builder sub-agents inside isolated Git worktrees. Rather than producing approximate visual mocks, it generates clean, production-ready Next.js code backed by an automated visual diff verification pass.

Chrome MCP and the 5-Phase Reverse-Engineering Pipeline

The core mechanism of ai-website-cloner-template replaces single-prompt approximations with a structured, multi-phase agent pipeline that separates inspection and specification from actual code synthesis.

When invoked with a target URL, the agent executes five consecutive phases:

1. Reconnaissance: Claude Code uses Chrome MCP to attach to an active browser session and inspect the live website. It captures full-page and viewport-specific screenshots, records multi-state interactions (scroll, hover, click, responsive layouts), and extracts DOM trees alongside design tokens.
2. Foundation: The agent extracts typography, color palettes, spacing variables, and global CSS or Tailwind configurations, embedding them into a baseline Next.js template while downloading images, favicons, and static assets locally.
3. Component Specs: For every section and UI element, the agent writes formal engineering specifications into docs/research/components/, recording exact getComputedStyle() metrics, responsive breakpoints, state machines, and copy.
4. Parallel Build: Utilizing git worktree, the system spins up isolated working trees for each component and dispatches parallel builder agents to code sections simultaneously without merge conflicts.
5. Assembly & QA: The individual worktree branches are merged into the main development branch, connected to application routes, and audited using visual diffing against original browser captures to ensure pixel fidelity.

This architecture prevents the hallucination and context-window degradation that commonly occur when an LLM attempts to generate an entire multi-section web application within a single monolithic prompt.

Getting Started and Scope Control via TARGET.md

The template repository is configured not to be cloned directly for single-site builds, but to be instantiated through GitHub's native template workflow to keep cloned sites isolated in user accounts.

The verified setup sequence consists of the following steps:

1. Create Repository from Template: Navigate to the JCodesMore/ai-website-cloner-template repository on GitHub, click Use this template, select Create a new repository, and initialize the project in your personal account.
2. Clone Local Copy: Clone your newly created repository to your local development machine:

   git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
   cd YOUR-NEW-REPOSITORY
   

3. Launch Claude Code with Chrome MCP: Start the agent CLI with browser control flags enabled:

   claude --chrome
   

4. Trigger Cloning Skill: Run the slash command with your destination URL:

   /clone-website <target-url>
   

For advanced use cases, users can optionally modify TARGET.md at the project root before triggering the build. The file allows defining specific target sub-routes, selecting the fidelity target (pixel-perfect, high fidelity, or structural), declaring explicit exclusion zones (such as third-party authentication frames or complex dynamic widgets), and outlining custom post-clone adaptations.

Client Support, Ecosystem Integration, and Practical Limitations

While ai-website-cloner-template is optimized for Claude Code (with Opus 5 recommended in the upstream repository, and Opus 4.6 cited in distribution forks), the system is compatible with other frontier coding assistants such as Codex, Cursor, and Gemini.

Key operational characteristics and limitations include:

• Single Source of Truth for Rules: Project rules and instructions are anchored in AGENTS.md and can be synced across different agent tooling formats using bash scripts/sync-agent-rules.sh.
• Runtime Prerequisites: Because the pipeline relies on live browser inspection to calculate computed styles and interaction states, local environments require an operational Chrome browser and active Chrome MCP permissions.
• Client-Side Scope: The template reverses visible frontend structures, responsive styles, and public assets into Next.js components. It cannot extract proprietary server-side logic, private databases, or authenticated user sessions.
• Social Metric Caveat: Social media posts referencing "GitHub 2.8W+ Star" figures reflect viral promotional copy rather than metrics validated on the repository itself; developers should evaluate the codebase based on its architecture rather than external claims.

Sources

• ai-website-cloner-template GitHub Repository
• @xiao92666 Announcement Post on X