How to Clone Any Website with AI Coding Agents — The AI Website Cloner Template Explained

If you've ever looked at a beautifully designed website and wished you could have that same quality of design in your own project — but in a modern, maintainable codebase — you're not alone. Platform migrations from WordPress, Webflow, or Squarespace to Next.js are among the most common tasks developers face in 2026.

Enter the AI Website Cloner Template: a GitHub project that exploded to 22,000+ stars by solving exactly this problem. It uses AI coding agents to inspect any live website, extract its design tokens and assets, write detailed component specifications, and then dispatch parallel builder agents to reconstruct every section as clean, typed React code.

In this guide, we'll break down exactly how it works, what makes it different from traditional scraping tools, and how you can use it for legitimate projects like platform migrations, recovering lost source code, or studying production-grade web design patterns.

What Is the AI Website Cloner Template?

The AI Website Cloner Template is a reusable project scaffold that turns AI coding agents into full-stack website reconstruction tools. Unlike simple HTML scrapers that copy raw markup, this template orchestrates a sophisticated multi-phase pipeline:

1. Reconnaissance — The agent takes screenshots, extracts design tokens (colors, fonts, spacing), and maps interactive behaviors like scroll effects, hover states, and responsive breakpoints.
2. Foundation — It updates fonts, color variables, global styles, and downloads all images, videos, and SVG icons.
3. Component Specs — The agent writes detailed specification files with exact getComputedStyle() values, interaction models, multi-state content, and responsive breakpoints.
4. Parallel Build — Multiple builder agents work simultaneously in Git worktrees, one per section or component.
5. Assembly & QA — Worktrees are merged, the page is wired together, and a visual diff is run against the original.

The result? A production-ready Next.js 16 project with App Router, React 19, TypeScript strict mode, shadcn/ui components, and Tailwind CSS v4 — not a messy copy of someone else's HTML.

How It Works: The Technical Architecture

The template's power comes from treating website cloning as a structured engineering pipeline rather than a simple copy operation. Let's look at each phase in detail.

Phase 1: Reconnaissance with Browser Automation

When you run /clone-website https://example.com, the AI agent opens the target URL in a headless browser (typically Chrome via Claude Code's --chrome flag) and performs a systematic sweep:

// Conceptual flow of the reconnaissance phase
const target = "https://example.com";

// 1. Screenshot every viewport (desktop, tablet, mobile)
await screenshot(target, { viewports: [1440, 1024, 768, 375] });

// 2. Extract design tokens via computed styles
const tokens = await page.evaluate(() => {
  const styles = getComputedStyle(document.body);
  return {
    fontFamily: styles.fontFamily,
    primaryColor: styles.color,
    backgroundColor: styles.backgroundColor,
    // ... full token extraction
  };
});

// 3. Map interactive elements and their states
const interactions = await page.evaluate(() => {
  const buttons = document.querySelectorAll('button, a, [role="button"]');
  return Array.from(buttons).map(el => ({
    selector: el.className,
    hoverState: getComputedStyle(el, ':hover'),
    // ...
  }));
});

This isn't just screen scraping — the agent is building a complete design system specification from the live site.

Phase 2: Component Specification Generation

Based on the reconnaissance data, the agent writes structured specification files in docs/research/components/. Each spec includes:

• Exact computed CSS values (no guessing)
• Multi-state definitions (default, hover, active, disabled)
• Responsive behavior at each breakpoint
• Content structure and typography hierarchy
• Asset references (images, icons, videos)

Here's what a typical component spec looks like:

# HeroSection Component

## Layout
- Full viewport height: 100vh
- Max content width: 1280px, centered
- Padding: 80px horizontal, 120px vertical

## Typography
- H1: "Space Grotesk", 4.5rem, weight 700, letter-spacing -0.03em
- Subtitle: "Inter", 1.25rem, weight 400, color var(--text-secondary)

## Colors
- Background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%)
- Primary text: #ffffff
- Accent: #6366f1

## Responsive Breakpoints
- Desktop (>1024px): Two-column layout
- Tablet (768-1024px): Single column, reduced padding
- Mobile (<768px): Stacked, H1 at 2.5rem

## Assets
- Background image: /public/images/hero-bg.jpg (2560x1440)
- Logo SVG: /public/images/logo.svg

Phase 3: Parallel Build with Git Worktrees

This is where the template truly shines. Instead of building components sequentially, it dispatches multiple AI builder agents — each in its own Git worktree — to work on different sections simultaneously:

# Each builder agent gets its own worktree
git worktree add ../hero-section -b feature/hero-section
git worktree add ../navbar -b feature/navbar
git worktree add ../footer -b feature/footer

# Each agent receives the full component spec inline
# No guessing — exact values, states, and behaviors
claude --prompt "Build the HeroSection component per docs/research/components/hero-section.md"
claude --prompt "Build the Navbar component per docs/research/components/navbar.md"
claude --prompt "Build the Footer component per docs/research/components/footer.md"

After all builders finish, the worktrees are merged back into the main branch, the page is assembled, and a visual diff tool compares the output against the original screenshots.

Supported AI Coding Agents

While Claude Code with Opus 4.7 is the recommended agent, the template supports a wide range of AI coding platforms:

• Claude Code — Recommended, best results with Opus 4.7
• GitHub Copilot — Full support
• Cursor — Full support
• Windsurf — Full support
• Codex CLI — OpenAI's coding agent
• Gemini CLI — Google's coding agent
• Cline and Roo Code — VS Code extensions
• Amazon Q Developer — AWS's coding assistant
• Aider — Open-source terminal-based agent

The template uses two source-of-truth files (AGENTS.md for project instructions and SKILL.md for the clone skill) that are automatically synced to platform-specific formats. This means most agents pick up the instructions without any manual configuration.

Real-World Example: Migrating a WordPress Site to Next.js

Let's walk through a practical scenario. You own a marketing website built on WordPress with a custom theme. It's slow, hard to maintain, and your WordPress developer left the company. You have the live site but the source code repository is lost.

Step 1: Set up the template

# Create your own repo from the template on GitHub
git clone https://github.com/YOUR-USERNAME/my-site-clone.git
cd my-site-clone
npm install

Step 2: Start your AI agent and clone the website

# Start Claude Code with browser access
claude --chrome

# Inside Claude Code, run the clone skill
/clone-website https://your-wordpress-site.com

Step 3: Watch the magic happen

The agent will:

• Take screenshots of every page at multiple viewports
• Extract your WordPress theme's colors, fonts, and spacing as design tokens
• Download all images, videos, and custom icons
• Write component specs for the header, hero section, features grid, testimonials, pricing table, and footer
• Build each component in parallel as React components with TypeScript and Tailwind CSS
• Assemble everything into a working Next.js application

Step 4: Verify and customize

npm run dev
# Open http://localhost:3000 to see your cloned site
# Modify components, add new features, connect to your CMS

In about 15-30 minutes, you've gone from a legacy WordPress site to a modern, type-safe Next.js codebase that you fully own and can extend.

Key Benefits

• Speed — What used to take weeks of manual design-to-code work happens in under an hour
• Accuracy — Uses exact computed CSS values instead of visual approximation, achieving pixel-perfect results
• Modern stack — Output is always Next.js 16, React 19, TypeScript, and Tailwind CSS v4 — no legacy code
• Parallel execution — Multiple AI agents build different sections simultaneously via Git worktrees
• Platform agnostic — Works with Claude Code, Copilot, Cursor, Windsurf, and 10+ other AI coding agents
• Open source — MIT licensed, free to use and modify
• Quality assurance — Built-in visual diff compares the cloned output against the original
• Design token extraction — Produces a proper design system, not just copied styles

Important Ethical and Legal Considerations

The AI Website Cloner Template is a powerful tool, and with that power comes responsibility. The project's maintainers are explicit about what constitutes acceptable use:

✅ Legitimate uses:

• Migrating a website you own from one platform to another
• Recovering source code for a site you own when the repo is lost
• Studying production websites to learn design and engineering patterns
• Creating reference implementations for educational purposes

❌ Prohibited uses:

• Phishing or creating deceptive copies of other people's sites
• Passing off someone else's design, branding, or content as your own
• Violating a website's terms of service that prohibit scraping
• Impersonating brands or businesses you don't own

Always check a site's robots.txt, terms of service, and copyright notices before cloning. When in doubt, only clone websites you own or have explicit permission to work with.

Frequently Asked Questions

Is the AI Website Cloner Template free to use?

Yes, the template is completely free and open source under the MIT license. However, you'll need access to an AI coding agent (like Claude Code, which requires an Anthropic API subscription) to actually run the cloning process.

Which AI coding agent gives the best results?

Claude Code with Opus 4.7 is the recommended agent and produces the best results according to the project maintainers. However, GitHub Copilot, Cursor, and Windsurf are also fully supported and produce excellent results.

Can I clone any website with this tool?

Technically, the tool can analyze any publicly accessible website. However, you should only clone websites you own, have permission to clone, or are studying for educational purposes. Always respect copyright, terms of service, and robots.txt directives.

How long does the cloning process take?

For a typical marketing website with 5-10 pages, the full cloning process takes between 15-45 minutes depending on site complexity and the speed of your AI coding agent. Simple landing pages can be cloned in under 10 minutes.

Does the cloned site look exactly like the original?

The tool aims for pixel-perfect accuracy using computed CSS values and visual diffing. Most cloned sites achieve 95%+ visual similarity. Minor differences may occur with complex animations, custom WebGL effects, or heavily JavaScript-dependent layouts.

Can I use the cloned code commercially?

If you're cloning a website you own (for a platform migration), yes. If you're cloning someone else's website, the code output is yours but the original design, content, and branding belong to their owners. Don't use cloned designs commercially without permission.

What tech stack does the output use?

The cloned output uses Next.js 16 (App Router), React 19, TypeScript in strict mode, shadcn/ui component library (built on Radix primitives), Tailwind CSS v4 with oklch color tokens, and Lucide React for icons (replaced by extracted SVGs during cloning).