AI Website Cloner Template

This template turns AI coding agents into website reverse-engineering tools. Point it at a URL, run a single command, and the agent inspects the live site, extracts design tokens and assets, writes component specs, and rebuilds the page as a Next.js app. It's built for developers who need to recreate a site's front end without starting from a blank editor, and who already work inside an AI coding agent like Claude Code, Cursor, or Codex CLI.

Under the hood it's a pre-wired Next.js 16 project (App Router, React 19, TypeScript strict) with shadcn/ui and Tailwind CSS v4 already configured, plus a /clone-website skill that drives a multi-phase pipeline: reconnaissance, foundation setup, component spec writing, parallel builds via git worktrees, and a final visual-diff QA pass.

Key features

• One-command cloning: run /clone-website <url> inside your AI agent and it handles inspection, extraction, and rebuilding end to end.
• Multi-agent support: works with Claude Code (recommended, with Opus), Codex CLI, Cursor, Windsurf, GitHub Copilot, Gemini CLI, Cline, Roo Code, Continue, Amazon Q, Augment Code, and Aider.
• Exact style extraction: pulls real getComputedStyle() values, colors, fonts, and spacing instead of guessing from screenshots.
• Parallel component builds: dispatches separate builder agents per section using git worktrees, then merges and assembles the final page.
• Visual diff QA: compares the rebuilt site against the original after assembly to catch mismatches.
• Modern stack out of the box: Next.js 16, React 19, TypeScript, shadcn/ui, Tailwind CSS v4 with oklch tokens, and Lucide icons (auto-replaced by extracted SVGs).
• Single source of truth for agent instructions: AGENTS.md drives per-platform config files (CLAUDE.md, GEMINI.md, etc.) via a sync script.

Ideal use cases

• Platform migration: you own a site built on WordPress, Webflow, or Squarespace and want it rebuilt as a maintainable Next.js codebase.
• Recovering lost source code: the site is live but the original repo, developer, or stack is gone, and you need working code back.
• Learning by deconstruction: studying how a real production site implements specific layouts, animations, or responsive behavior by working with generated code.
• Not a fit for cloning sites you don't own or have rights to reproduce, for impersonation or phishing, or for reproducing brand assets, logos, or copyrighted copy as your own. Some sites' terms of service explicitly forbid scraping or reproduction, check before running it against a target.

Installation

1. Click Use this template on the GitHub repo page and create your own repository (don't clone the template directly or open PRs against it with generated sites).
2. Clone your new repository:

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

3. Install dependencies:

npm install

4. Start your AI agent (Claude Code recommended):

claude --chrome

5. Run the skill with one or more target URLs:

/clone-website <target-url1> [<target-url2> ...]

6. Customize the output afterward as needed.

Prerequisites: Node.js 24+ and one of the supported AI coding agents. If you're using an agent other than Claude Code, open AGENTS.md for project instructions, most agents pick it up automatically.

Useful commands once the project is set up:

npm run dev        # Start dev server
npm run build      # Production build
npm run lint        # ESLint check
npm run typecheck   # TypeScript check
npm run check       # lint + typecheck + build

Docker is also supported:

docker compose up app --build   # build and run the app
docker compose up dev --build   # dev mode on port 3001