AI Website Cloner Template

1. Project Overview

ai-website-cloner-template is an open-source GitHub template that lets an AI coding agent recreate any existing website as a clean, modern Next.js application from nothing more than a target URL — solving the problem of rebuilding a site's UI without manually reverse-engineering its markup, styles, and assets by hand.

2. Background & Positioning

The project was created to turn "clone this website" from a multi-day manual reverse-engineering task into a guided, largely automated AI workflow. Instead of a developer hand-copying HTML/CSS, hunting down fonts and icons, and eyeballing pixel differences, the template packages a repeatable five-phase pipeline — reconnaissance, foundation, component specification, parallel build, and QA — that an AI agent executes step by step, producing a structured, typed Next.js codebase rather than a one-off scraped snapshot.

Compared with generic web-scraping or "download this page" tools, this project doesn't just capture static HTML — it drives an AI agent through design-token extraction (fonts, colors, breakpoints), asset downloading (images, videos, SVG icons), and component-level rebuilding in TypeScript with shadcn/ui and Tailwind CSS, then validates the result with a visual diff against the original site. It is also agent-agnostic, with first-class support for Claude Code and configuration for a dozen other AI coding agents, rather than being tied to a single vendor's tool.

3. Feature Categories

🔍 Reconnaissance Tooling — 3 core capabilities: full-page screenshot capture, design-token extraction, and interaction/state mapping. Purpose: builds an accurate picture of the source site before any code is written.
🏗️ Foundation Setup — covers font and color configuration, global Tailwind/Next.js setup, and bulk asset downloads (images, videos, SVGs). Purpose: establishes the base project scaffold that later components build on.
🧩 Component Specification — generates per-component documentation with computed CSS values, responsive states, and interaction behavior. Purpose: gives the build phase an unambiguous, machine-readable spec to implement against.
⚙️ Parallel Construction — distributes component builds across isolated git worktrees so multiple pieces of the UI can be implemented concurrently. Purpose: speeds up the rebuild of large, multi-component sites.
✅ Assembly & QA — integrates the built components and runs visual diff comparisons against the original site. Purpose: catches layout, spacing, and styling regressions before the clone is considered done.

4. Key Highlights

AI-agent-driven pipeline — a structured, five-phase process (recon → foundation → spec → build → QA) replaces ad-hoc manual cloning with a repeatable workflow.
Multi-agent compatibility — works with Claude Code (recommended, paired with Opus-class models), Codex CLI, Cursor, Windsurf, Gemini CLI, GitHub Copilot, Cline, Roo Code, Continue, Amazon Q, Augment Code, Kiro, and OpenCode.
Modern, typed output — produces a Next.js 16 + React 19 + TypeScript (strict mode) codebase, not raw scraped HTML.
Design-system fidelity — extracts real design tokens (fonts, colors, breakpoints) into Tailwind CSS v4 with oklch color values, and builds UI on shadcn/ui + Radix primitives.
Automated asset handling — downloads images and videos and extracts SVG icons automatically, backed by Lucide React for any missing default icons.
Visual diff validation — the QA phase compares the finished clone against the original site to verify accuracy rather than relying on eyeballing.

5. Use Cases by Role

General developers — quickly stand up a modern, maintainable Next.js version of an existing site design instead of building a layout from scratch.
Project managers / technical leads — evaluate migrating a legacy site to a current tech stack (Next.js, TypeScript, Tailwind) with a faster, structured proof-of-concept path.
Students / self-learners — study how production websites implement specific layouts, animations, and responsive behavior by having the agent deconstruct them into inspectable components.

(Not directly applicable to DevOps/SRE, security engineering, or data/research science workflows, so these are omitted.)

6. Getting Started

Find what you need — read the README and the docs generated under docs/research/ after running the recon phase to understand the extraction output and component specs.

Install / integrate

# 1. Click "Use this template" on GitHub to create your own repo, then:
git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
cd YOUR-REPO
npm install

# 2. Launch an AI coding agent (Claude Code shown, --chrome enables browser access)
claude --chrome

# 3. Run the cloning skill inside the agent session
/clone-website <target-url>

# Everyday scripts
npm run dev     # start the dev server
npm run build   # production build
npm run check   # lint, type-check, and build combined

Contribute — fork the repository, make changes on a feature branch, and open a pull request against JCodesMore/ai-website-cloner-template following the project's MIT-licensed, open-contribution model.

7. Project Structure

src/
  app/              # Next.js routes
  components/       # React/TypeScript UI components
  hooks/, types/, utils/
public/
  images/, videos/  # downloaded site assets
  seo/              # SEO-related assets
docs/
  research/         # reconnaissance output & component specs
.cline/ .kiro/ .roo/ # platform-specific AI agent configuration

Key items: docs/research/ holds the artifacts produced by the reconnaissance and spec phases (screenshots, design tokens, component specs) that later phases consume; the platform-specific dot-directories (.cline/, .kiro/, .roo/, etc.) let the same template be driven by different AI coding agents without changing the core project.

8. Related Ecosystem

Upstream dependencies: Next.js 16, React 19, TypeScript, Tailwind CSS v4, shadcn/ui, Radix UI primitives, Lucide React icons, Node.js 24+.
AI coding agents it integrates with: Claude Code, Codex CLI, Cursor, Windsurf, Gemini CLI, GitHub Copilot, Cline, Roo Code, Continue, Amazon Q, Augment Code, Kiro, OpenCode.
Complementary use: pairs naturally with standard Next.js deployment platforms (e.g., Vercel) once a clone is complete.

9. License

MIT License.

✅ Free to use, copy, modify, merge, publish, and distribute the code, including for commercial projects.
✅ Use the template to migrate your own legacy site or to learn how a site is built.
❌ Do not use the tool for deceptive purposes, impersonation, or any activity that breaks the law — the project's guidelines explicitly prohibit this.
ℹ️ MIT provides the software "as is," without warranty; retain the original license and copyright notice in redistributed copies.

10. FAQ

Q: Do I need a paid AI coding agent subscription to use this?
A: You need access to a supported AI coding agent (Claude Code is recommended, paired with an Opus-class model); most other supported agents like Cursor or Gemini CLI work too, each under their own pricing.

Q: What if I just want a static copy, not a full Next.js rebuild?
A: This template is specifically designed to output a structured Next.js/TypeScript codebase, not a static HTML snapshot — if you only need raw HTML, a simpler scraping tool may fit better.

Q: Is cloning any website with this tool legal?
A: You are responsible for the legality of what you clone; the project explicitly prohibits deceptive or impersonation use, so stick to sites you own, have permission for, or are using for personal learning.

Q: Which directory should I check to see what the AI agent extracted?
A: Look under docs/research/ after the reconnaissance phase — it contains the design tokens, screenshots, and component specifications the later build phases use.

Q: Can I use an agent other than Claude Code?
A: Yes — the template ships configuration for over a dozen agents (Codex CLI, Cursor, Windsurf, Gemini CLI, GitHub Copilot, and more), though Claude Code with an Opus-class model is the recommended combination.

11. Quick Links

Repository: https://github.com/JCodesMore/ai-website-cloner-template
License: MIT (see repository LICENSE file)
Contributing: open a pull request against the repository's default branch
Community/Discussions: use the repository's GitHub Issues/Discussions tab

12. Summary

ai-website-cloner-template turns website cloning into a structured, AI-agent-driven pipeline that outputs a modern, typed Next.js codebase rather than a scraped HTML dump. It's most valuable for developers and teams migrating a legacy site to a current stack, recovering the source of a deployed site, or studying how a production layout is built — anyone who wants a faithful, maintainable rebuild without manually reverse-engineering every component.