Jonathon's AI Wiki

AI Website Cloner Template (/clone-website)

3 min read

Source: Jcodesmore Ai Website Cloner Template 2026 04 27

ai-website-cloner-template (JCodesMore, github.com/JCodesMore/ai-website-cloner-template) is a Next.js 16 + React 19 + TypeScript + shadcn/ui + Tailwind CSS v4 template that ships with a /clone-website skill for Claude Code (and 11+ other AI coding agents). Point it at any URL, run the slash command, and the agent reverse-engineers the site into a clean, modern codebase: it inspects the live site, extracts design tokens and assets, writes component specifications, then reconstructs every section in parallel via git worktrees. MIT, 12.9k GitHub stars, 1.9k forks.

Key Takeaways

  • Multi-phase pipeline. Reconnaissance → foundation setup → component spec generation → parallel building → QA. The recon phase scrapes computed CSS values and interaction models, not just HTML.
  • Parallel builder agents via git worktrees. Each section gets reconstructed in its own worktree so multiple agents can build in parallel without colliding. This is the same isolation pattern Superpowers / Subagents / /batch use across the wider Claude Code ecosystem.
  • Design token extraction. Pulls oklch tokens, computed values, and interaction states (hover, focus, active) so the rebuilt site feels like the original rather than a static screenshot.
  • Asset downloading. Images, videos, favicons all pulled local — no broken hotlinks in the clone.
  • Agent-agnostic skill. The .claude/skills/clone-website/ skill definition is the canonical entry point, but the template lists support for Claude Code, Cursor, Windsurf, GitHub Copilot, Cline, and 6 more — same pipeline shape, different runtime.
  • Modern stack baked in. Next.js 16 App Router, React 19, TypeScript strict mode, shadcn/ui (Radix primitives + Tailwind v4), Lucide icons. Topics tagged claude-code, claude, ai-agents, reverse-engineering, web-scraping.
  • Companion to design skills, not a replacement. The cloner produces a faithful starting point; downstream design polish still belongs to skills like Frontend Design and the Claude Design product.

Implementation

Tool/Service: ai-website-cloner-template (JCodesMore, MIT)

Setup:

git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install
claude --chrome
/clone-website <target-url>

The claude --chrome invocation matters — the recon phase needs Claude in Chrome to inspect computed styles and interaction states. Headless / no-browser modes will give degraded fidelity.

Cost: Free template (MIT). Costs are: Claude Code usage during the run (multi-agent worktree builds burn tokens), plus any third-party services if your target site requires authenticated scraping.

Integration notes:

  • The skill is also a template — meaning the repo doubles as a starter project. Forks become production projects.
  • Tailwind v4 with oklch tokens is intentional; if your design system is HSL, expect a token-conversion step before adopting cloned components elsewhere.
  • Treat the cloner output as a starting point, not a final product. Use DESIGN.md / aesthetic family prompts / Claude Design polish on top.

Try It

  • Clone a competitor’s landing page into a local Next.js project, then iterate on the design rather than starting from scratch — useful for redesign workflows where preserving structure matters.
  • Use it as a teaching artifact: run /clone-website against a site with strong design DNA (Linear, Stripe, Vercel) and inspect the extracted design tokens to learn how the original was constructed.
  • Pair with VoltAgent’s awesome-design-md: the cloner extracts tokens from a site; awesome-design-md provides DESIGN.md specs to generate one. Same problem viewed from both ends.

Graph View

Backlinks