🟡 Intermediate🤖 AI Web Cloning Tool💸 Free (needs Claude Code)⭐ 2 GitHub Stars
What is AI Website Cloner Template?
AI Website Cloner Template is a free, open-source project that uses Claude Code (Anthropic’s AI coding tool) to automatically copy any website and rebuild it as a working replica. You give it a URL, type one command, and it does the rest — taking screenshots, pulling out fonts, colours, and images, then rebuilding every section of the site as clean, modern code. The result is a fully functional Next.js web app that looks identical to the original. Think of it as having a developer sit down and reverse-engineer any website for you, automatically.
Who is it for?
- Developers who want to quickly clone a website design as a starting point
- Freelancers building client sites inspired by existing designs
- Designers who want a working code version of a site they admire
- Students learning web development by studying real-world sites
- Entrepreneurs who want to rebuild their own site in a modern tech stack
- Anyone experimenting with Claude Code’s agentic coding capabilities
What makes it special?
- One command does everything — type
/clone-website <url>and the AI handles the rest - Multi-agent parallel build — Claude sends out multiple AI “worker agents” to build different sections at the same time, speeding up the process
- Pixel-perfect accuracy — it reads exact CSS values, fonts, colours, spacing, and interaction states (hover, click, scroll)
- Downloads all assets automatically — images, videos, favicons, and icons are pulled and saved locally
- Modern tech stack out of the box — outputs Next.js, React, TypeScript, Tailwind CSS — production-ready code
- Configurable fidelity — choose pixel-perfect, high-fidelity, or structural-only cloning depending on your needs
- Visual QA included — automatically compares screenshots of the clone against the original to check accuracy
Requirements before you start
- Node.js version 20 or newer — download free from nodejs.org
- Claude Code — Anthropic’s AI coding tool, installed via the terminal (free to install, usage billed per token)
- Chrome MCP enabled inside Claude Code — this lets Claude control a Chrome browser to inspect target websites
- A terminal / command prompt — you will type a few commands, but nothing complicated
- Git — used to download the template (free, from git-scm.com)
- Basic comfort running commands in a terminal — this is labelled Intermediate because of that requirement
Step-by-step installation
Step 1 — Install Node.js (if you haven’t already)
Go to nodejs.org and download the LTS version (version 20 or higher). Install it like any normal program. To check it installed correctly, open your terminal and type:
node –version
You should see a number like v20.x.x or higher. If you do, you’re good to go.
Step 2 — Install Claude Code
Claude Code is Anthropic’s AI coding tool that powers this whole project. Install it globally with:
npm install -g @anthropic-ai/claude-code
Once installed, run claude in your terminal and follow the login steps to connect your Anthropic account.
Step 3 — Enable Chrome MCP in Claude Code
Chrome MCP lets Claude Code open and inspect websites in a real browser. Inside Claude Code, run this command to add it:
claude mcp add @modelcontextprotocol/server-puppeteer
This gives Claude a “headless Chrome” browser it can use to screenshot and analyse any website automatically.
Step 4 — Get the template
Go to the GitHub page and click Use this template → Create a new repository to get your own copy. Or clone it directly with:
git clone https://github.com/JCodesMore/ai-website-cloner-template.git
cd ai-website-cloner-template
Step 5 — Install project dependencies
Inside the project folder, run:
npm install
Step 6 — Configure your target in TARGET.md
Open the file called TARGET.md in any text editor (Notepad, VS Code, etc.) and fill in:
URL: https://example.com # The site you want to clone
Pages: / /about /pricing # Which pages to replicate
Fidelity: pixel-perfect # pixel-perfect / high-fidelity / structural
Scope: full page # What to include
Save the file when done. This is your instruction sheet for the AI.
Step 7 — Run the clone command in Claude Code
Open Claude Code in your project folder by running:
claude
Then type the clone command followed by the URL you want to clone:
/clone-website https://example.com
Claude will now go through the full pipeline — inspecting the site, downloading assets, writing component specs, and building the clone. This can take several minutes depending on the size of the site.
Step 8 — Preview your clone in the browser
Once Claude Code finishes building, start the local preview server:
npm run dev
Open your browser and go to http://localhost:3000 to see your cloned website running locally. From here you can customise it, change content, or deploy it.
Common errors and fixes
| Error / Problem | What it means | Fix |
|---|---|---|
claude: command not found | Claude Code didn’t install correctly or isn’t in your PATH | Re-run npm install -g @anthropic-ai/claude-code and restart your terminal |
| Chrome MCP not working / site won’t load | The browser plugin isn’t set up or Chrome isn’t found | Re-run the MCP add command and make sure Google Chrome is installed on your system |
npm install fails with errors | Your Node.js version is too old | Upgrade to Node.js 20+ from nodejs.org, then retry |
| Clone looks nothing like the original | Fidelity was set too low, or the site uses a lot of JavaScript | Set Fidelity to pixel-perfect in TARGET.md and re-run |
| Images are missing or broken | Asset downloads failed or images are protected by the source site | Check the public/images/ folder; manually download missing assets and replace the broken paths |
| API rate limit / credits error from Anthropic | You’ve run out of Claude API usage credits | Top up your Anthropic API balance at console.anthropic.com and retry |
npm run dev shows a blank page | The build may have failed partway through | Run npm run build first — it will show any code errors that need fixing |
Free vs Paid comparison
| Feature | AI Website Cloner (Free Template) | Paid Website Cloning Services |
|---|---|---|
| Template cost | Free (MIT licence) | $10–$100+ per clone |
| AI usage cost | Pay-per-use Anthropic API tokens | Included in subscription |
| Output code quality | Production-ready Next.js + TypeScript | Varies, often messy HTML |
| Pixel-perfect accuracy | ✅ Yes (configurable) | Varies |
| Full code ownership | ✅ Yes — it’s your repo | Sometimes locked to their platform |
| Visual QA / diff check | ✅ Built in | Rarely included |
| Open source / customisable | ✅ Fully open source | Closed / proprietary |
| Setup required | Some terminal setup needed | Usually no setup |
Alternatives to AI Website Cloner Template
1. bolt.new
A browser-based AI app builder from StackBlitz. You can paste a URL or describe a site and it generates a working web app. No terminal required — great for beginners who want a no-setup AI builder. bolt.new
2. v0.dev by Vercel
Vercel’s AI UI generator that turns screenshots or descriptions into Next.js + Tailwind components. Excellent for recreating specific UI sections rather than full sites. Free tier available. v0.dev
3. screenshot-to-code
An open-source tool that converts screenshots directly into HTML/CSS/React/Tailwind code using AI vision models. Simpler and more beginner-friendly than the full cloner template. github.com/abi/screenshot-to-code
Want more AI tools and guides like this?
Browse our full collection of AI cheat sheets, setup guides, and digital resources at the Global AI Force shop.Visit globalaiforce.com/shop →
Follow us for daily AI tool discoveries: instagram.com/globalaiforce