AI Website Cloner: Reverse-Engineer Sites with Claude Code
JCodesMore's ai-website-cloner-template turns any URL into a Next.js 16 codebase via /clone-website — design tokens, parallel git worktrees, visual QA. Setup, legality, Cursor support, and when motion-heavy sites fail.
JCodesMore's ai-website-cloner-template has 21.4k stars and 3.1k forks — one of the fastest-growing agent-skill templates on GitHub. The pitch is simple: point at a URL, run /clone-website, get a Next.js 16 codebase back.
People do not land on that README wondering what Next.js is. They ask:
Do I fork the repo or use the template button?
Is this legal?
Does it work in Cursor, or only Claude Code?
How is this different from Claude Design / vibe coding?
Why did my clone fail on an animation-heavy site?
This post answers those.
TL;DR
Question
Answer
What is it?
GitHub template → agent skill rebuilds a URL as Next.js 16 + shadcn + Tailwind v4
Do not clone this template repository directly for your website project, and do not open pull requests here with your generated website.
Why:/clone-website writes components, assets, and research specs into your project tree. That belongs in your repo — not as a PR to the upstream template.
Steps:
On GitHub → Use this template → Create a new repository
Clone your copy: git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
Node 24+ is enforced via .nvmrc — older Node versions are unsupported.
Does it work with Cursor (not just Claude Code)?
Yes. The template is a multi-platform agent harness:
Agent
Status
Claude Code
Recommended — needs browser (claude --chrome)
Cursor
Supported — reads .cursor/ + AGENTS.md
Copilot, Windsurf, Codex, Gemini CLI
Supported
Cline, Roo Code, Continue, Amazon Q, Augment, Aider
Supported
Source of truth:
What
File
Regenerate with
Project rules
AGENTS.md
bash scripts/sync-agent-rules.sh
/clone-website skill
.claude/skills/clone-website/SKILL.md
node scripts/sync-skills.mjs
Open PR #57 adds CI to verify generated platform files stay in sync — a sign the maintainer expects drift if you edit copies manually.
For Cursor users: treat this like any agent skill repo — open your template copy, ensure the skill is discoverable, run /clone-website from the agent command palette.
Is cloning websites legal?
The repo's Not Intended For list is worth quoting in full because it is the answer most searchers need:
Phishing or impersonation — prohibited
Passing off someone's design as your own — logos, brand assets, copy belong to owners
Violating terms of service — many sites ban scraping/reproduction; check first
Legitimate use cases from the README:
Use case
When it fits
Platform migration
You own a WordPress/Webflow site and want Next.js source
Lost source code
Site is live; repo is gone or stack is legacy
Learning
Deconstruct how production sites handle layout and responsive behavior
Not legal advice. MIT license on the tool does not grant rights to third-party trademarks, fonts, or copyrighted imagery embedded in a clone. Replace brand assets before shipping.
How is this different from Claude Design or vibe coding?
If you already have a production URL and need maintainable React source, the cloner template is the fit.
vs one-click SaaS cloners: Those often dump HTML/CSS blobs. This template produces componentized Next.js with TypeScript, shadcn primitives, and agent-readable spec files you can iterate on.
Takeaway: Browser backend is still evolving. Simple marketing pages clone more reliably than GSAP-heavy or WebGL experiences. Plan manual polish for motion.
PR backlog:12 open PRs including dependency bumps (#48 Next.js 16.2.7), devcontainer (#54), and CONTRIBUTING/SECURITY docs.
How much does it cost?
The template is free (MIT). Runtime cost is your AI agent subscription:
README recommends Claude Code with Opus 4.7 — Anthropic Max/Pro tier for long /clone-website runs
Parallel worktrees mean multiple agent turns — token spend scales with page complexity and section count
No paid API inside the template itself beyond what your agent provider charges
Rough expectation: a single landing page is a moderate agent session; a multi-section marketing site is a long-horizon job comparable to other multi-agent coding workflows.
When should you use it?
Good fits:
Rebuilding your WordPress/Webflow site on Next.js
Recovering source when the agency left and took the repo
Learning production patterns by reading generated components + specs
Starting a redesign from an approved reference (with rights cleared)
Poor fits:
Cloning competitors for launch-day impersonation
Sites behind auth paywalls without manual setup
Animation-first experiences (see #39)
Expecting 100% pixel parity on first run without human QA
After /clone-website: what should you review first?
The skill finishes with a visual diff against the original, but you still own the ship decision. Walk this checklist before deploying:
1. Component specs in docs/research/components/
These files are the contract between recon and build. Spot-check that computed spacing, font sizes, and breakpoint behavior match what you see in the browser. If a hero section spec says padding-top: 96px and the live clone shows 64px, fix the component — do not re-run the whole pipeline.
2. Asset paths under public/
Downloaded images land in public/images/, videos in public/videos/, favicons and OG assets in public/seo/. Broken paths are the most common post-clone bug when the target site used CDN URLs or lazy-loaded media. Run npm run dev and grep the console for 404s.
3. Typography and fonts
Foundation phase updates globals and font imports. Verify @font-face or next/font choices against the source site — especially if the original used a commercial font you do not license. Swap to a legal alternative in src/app/layout.tsx before production.
4. Interactive states
Recon captures hover, focus, and mobile nav behavior in the spec. Tab through forms and menus manually. Issue #39 shows motion-heavy sites break; even on static pages, dropdowns and accordions sometimes need a human pass.
5. npm run check
Lint, TypeScript, and production build must pass before you treat the clone as shippable. The template enforces strict TypeScript — generated components occasionally need type narrowing after merge.
6. Brand and copy
Replace logos, trademarked names, and lorem you do not own. The clone is a technical reconstruction, not a license to republish someone else's brand.
For migrations you own, the fastest path is often: run /clone-website, review specs, then prompt the agent to "replace all copy with our new product messaging while keeping layout tokens from docs/research." That uses the measured layout without copying competitor text.
If you use Cursor instead of Claude Code, open your template copy, confirm .cursor/ rules load, and invoke the same /clone-website skill from the command palette. The sync scripts keep Cursor, Copilot, and Windsurf configs aligned with .claude/skills/clone-website/SKILL.md — edit the source skill once, run node scripts/sync-skills.mjs, and every platform gets the update.
Quick command reference
bash
# After creating YOUR repo from template
npm install
npm run dev # local preview
npm run check # lint + typecheck + build# Claude Code (recommended)
claude --chrome
# then in agent:
/clone-website https://yoursite.com
# Docker
docker compose up dev --build # dev on port 3001
Where this fits the agentic frontend stack
The website cloner sits between design systems for agents and full-stack vibe coding:
Agent skills — /clone-website is a packaged skill synced to 12+ platforms
DESIGN.md — forward design; cloner is reverse design from live DOM
Star counts, issue numbers, and release tags reflect the repository as of June 27, 2026. Browser backends and motion-site handling are actively changing — check open PRs before betting production migrations on a single run.
