Clone Any Website With One Command Using Claude Code

What this does

You give it a URL. Claude Code opens the site in Chrome, screenshots every section, extracts the fonts, colors, spacing, and assets, writes component specs for each piece, then dispatches parallel agents to rebuild the whole thing as a Next.js app. The agents work in isolated git worktrees so they don't step on each other, and everything merges automatically at the end.

The result is a pixel-perfect (or close to it) clone of the original site, running locally on your machine, ready to customize or deploy.

What you need

• Node.js 20+ — check with node -v
• Claude Code — the CLI tool, not Claude Desktop. You need a Pro or Max subscription.
• Chrome — Claude Code uses the Chrome MCP to inspect the target site
• Git — the parallel agents use git worktrees to work simultaneously

Setup (2 minutes)

1. Clone the template

git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone

2. Install dependencies

npm install

That's it. The template comes preconfigured with Next.js 16, Tailwind CSS v4, shadcn/ui, and all the skill files Claude Code needs.

Run it

Start Claude Code with Chrome

claude --chrome

The --chrome flag gives Claude access to a real browser. It uses this to take screenshots, read computed CSS values, and download assets from the target site.

Run the clone command

/clone-website https://example.com

Replace https://example.com with whatever site you want to clone. Claude will take it from here. The whole process usually takes 10-30 minutes depending on how complex the site is.

Preview the result

npm run dev

Open http://localhost:3000 in your browser. You should see a rebuilt version of the target site.

How it works under the hood

The skill runs a 5-phase pipeline:

1. Reconnaissance — Claude opens the target site in Chrome, takes screenshots at multiple viewport sizes, extracts design tokens (fonts, colors, spacing), and maps out every interactive element (scroll triggers, hover states, click actions).
2. Foundation — Updates the project's global styles with the extracted fonts and colors. Downloads all images, videos, favicons, and OG images into the public/ directory.
3. Component specs — For each section of the page, Claude writes a detailed spec file in docs/research/components/. These specs include exact computed CSS values from getComputedStyle(), not approximations. Every state, breakpoint, and content variant is documented.
4. Parallel build — Claude dispatches builder agents, each in its own git worktree. One agent builds the hero section, another builds the footer, another handles the nav — all at the same time. Each agent gets the full component spec inline so there's no ambiguity about what to build.
5. Assembly & QA — Worktrees merge back into the main branch. Claude wires up the page, runs a visual diff against the original screenshots, and fixes any discrepancies.

Tips and gotchas

• Simpler sites clone better. A marketing landing page with a hero, features section, and footer will come out nearly perfect. A web app with complex state management and auth flows won't. Stick to static or mostly-static pages.
• Login walls block the crawler. If the site requires authentication, Claude can't get past the login screen. You'd need to manually log in first and point Claude at the authenticated page.
• Custom fonts need manual hosting. Claude extracts font names and downloads what it can, but some fonts are served from protected CDNs. If fonts look wrong, check public/ for missing font files and add them manually.
• It's a starting point, not a finished product. The clone gives you a working codebase that matches the target's visual design. You'll still want to replace placeholder content, swap out images, and customize for your actual use case.
• Check the docs/research/ folder. Even if you don't use the clone as-is, the extracted specs are useful. You get exact color values, font stacks, spacing systems, and interaction patterns documented in a format you can reference for your own build.