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 |
| One command? | /clone-website https://example.com (multiple URLs supported) |
| Best agent? | Claude Code + claude --chrome (README recommends Opus 4.7) |
| Also works in | Cursor, Copilot, Windsurf, Codex, Gemini CLI, 8+ others |
| Prerequisites | Node.js 24+, npm install, AI agent with browser access |
| License | MIT — template and output structure; not a license to steal brands |
| Legal uses | Sites you own, lost repos, learning — not phishing or ToS violations |
| Known gap | Heavy motion/animation sites can fail (#39) |
| Latest release | v0.3.1 (Mar 30, 2026) — 5 tagged releases total |
Repo: github.com/JCodesMore/ai-website-cloner-template
Do I clone the repo or use "Use this template"?
Use the template button. The README is explicit:
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 npm install- Start agent (Claude Code):
claude --chrome - Run:
/clone-website https://target-site.com
Optional second URL for multi-page clones:
/clone-website https://example.com https://example.com/pricing
What actually happens when you run /clone-website?
The skill is a five-phase pipeline, not a wget mirror:
Reconnaissance → Foundation → Component Specs → Parallel Build → Assembly & QA
| Phase | Agent does |
|---|---|
| Reconnaissance | Screenshots, design tokens, scroll/click/hover/responsive sweep |
| Foundation | Fonts, colors, globals, asset downloads to public/ |
| Component specs | docs/research/components/ — exact getComputedStyle() values, states, breakpoints |
| Parallel build | Git worktrees — one builder agent per section/component |
| Assembly & QA | Merge worktrees, wire page, visual diff vs original |
Each builder gets the full spec inline — computed CSS, interaction models, asset paths. The design is measured, not guessed.
Output layout:
src/app/ # Next.js routes
src/components/ # Rebuilt sections + shadcn/ui
public/images/ # Downloaded assets
docs/research/ # Extraction + specs
docs/design-references/ # Screenshots
This is closer to loop engineering with parallel subagents than a single-shot "rewrite this HTML" prompt.
What stack do you get?
| Layer | Choice |
|---|---|
| Framework | Next.js 16 — App Router, React 19, TypeScript strict |
| UI | shadcn/ui — Radix + Tailwind |
| Styling | Tailwind CSS v4 — oklch design tokens |
| Icons | Lucide default → extracted SVGs during clone |
| Dev checks | npm run check = lint + typecheck + build |
| Docker | docker compose up app --build optional |
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?
| AI Website Cloner | Claude Design / vibe coding | |
|---|---|---|
| Input | Live URL | Prompt, wireframe, brand brief |
| Output | Measured rebuild of existing UI | New UI from intent |
| Specs | getComputedStyle(), downloaded assets | DESIGN.md tokens, design rationale |
| QA | Visual diff vs original | Human design review |
| Best for | Migration, repo recovery, pixel-faithful reference | Greenfield products, branded new sites |
If you are designing from scratch, building with Claude or a DESIGN.md registry is the better path.
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.
What breaks? (GitHub issues people hit)
| Issue | Report |
|---|---|
| #39 | Sites with too much motion/animation — pipeline "completely fails" |
| #56 | Open PR: graceful degradation for motion-heavy sites |
| #22 | claude --chrome skill failed to load after npm audit fix |
| #18 | Feature request: Playwright MCP as browser backend |
| #60 | Docs PR for Playwright MCP alternative to default browser MCP |
| #25 | Migration toward agent-browser CLI |
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-websiteruns - 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
# 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-websiteis a packaged skill synced to 12+ platforms - DESIGN.md — forward design; cloner is reverse design from live DOM
- Claude Code commands — slash commands as orchestration entry points
- OpenMontage — same "agent reads skill + runs pipeline" pattern, different domain (video vs frontend)
Both trending repos show the same 2026 pattern: don't build a SaaS orchestrator — ship a repo your agent already knows how to run.
Related reading
- Build full-stack websites with Claude
- DESIGN.md templates for AI agents
- Top DESIGN.md registries
- Claude Design overview
- What are agent skills?
- Loop engineering with Claude Code
Official: AI Website Cloner Template · CHANGELOG · AGENTS.md
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.