AI Website Cloner Template
Clone any website into a modern Next.js codebase with one command using AI coding agents.
- Source repo
- JCodesMore/ai-website-cloner-template
- Stars
- ★ 37k
- Last updated
- 14d ago
- License
- MIT
- Primary language
- TypeScript
- FA score
- 37/100 · Major gaps
At a glance
- How it runs
- Works with
- Platform-specificClaude Code
- Cost
- Free software; you pay for model usage
- Setup effort
- Medium · a few setup steps
- You'll need
- Typical use
- Developers who own a WordPress/Webflow/Squarespace site and want to migrate it to a modern Next.js codebase.
- Not a fit if
- Users wanting to copy someone else's site design; impersonation and infringement are explicitly prohibited
- Teams unwilling to manually check target sites' terms of service and copyright risk
- Source review
- 37/100 · Major gaps 8 safety controls not found
What does this agent do, and when should you use it?
AI Website Cloner Template is a reusable boilerplate for reverse-engineering any website into a clean, modern Next.js codebase with AI coding agents. It recommends Claude Code with Opus 5 for best results but supports a variety of other agents. The template includes a multi-phase pipeline: reconnaissance captures screenshots and design tokens; foundation updates fonts, colors, and downloads assets; component specs write detailed CSS value specs; parallel build dispatches builder agents in git worktrees; and assembly & QA merges worktrees and runs visual diff against the original. It uses Next.js 16, shadcn/ui, Tailwind CSS v4, React 19, and TypeScript strict. The project includes an AGENTS.md single source of truth and a /clone-website skill with sync scripts for cross-platform support. It is intended for platform migration, recovering lost source code, or learning, while explicitly prohibiting phishing or impersonation.
The repository offers a template. After using it, users create their own copy, install dependencies (npm install), run claude --chrome, and execute the /clone-website <target-url> skill. The skill runs a multi-phase pipeline: reconnaissance performs screenshots, design token extraction, and interaction sweeps (scroll, click, hover, responsive); foundation updates fonts, colors, globals, and downloads all assets; component specifications write exact getComputedStyle() values, interaction models, multi-state content, responsive breakpoints, and asset paths into docs/research/components/; parallel build dispatches builder agents in git worktrees, one per section; assembly & QA merges worktrees, wires the page, and runs visual diff against the original. The template includes AGENTS.md as the single source of truth, and scripts (scripts/sync-agent-rules.sh and scripts/sync-skills.mjs) regenerate platform-specific agent instructions and skills.
- Developers who own a WordPress/Webflow/Squarespace site and want to migrate it to a modern Next.js codebase.
- Teams whose source code is lost or a developer left, and need to recover the live site in a modern format.
- Frontend developers who want to learn how production sites achieve specific layouts, animations, and responsive behavior by working with real code.
- Developers seeking to rapidly build a website prototype by cloning an existing design as a starting point.
How do you install or deploy this agent?
- On the GitHub page, click 'Use this template' to create your own repository copy (do not clone this template repo directly). 2. Open or clone your new repository locally and navigate into it. 3. Run
npm installto install dependencies. 4. Ensure you have Node.js 24+ and a compatible AI coding agent (Claude Code recommended).
How do you use this agent?
- Run
claude --chromein the project directory to start Claude Code. 2. Execute the skill:/clone-website <target-url1> [<target-url2> ...]. 3. Wait for the pipeline to complete: reconnaissance, foundation, component specs, parallel build, assembly & QA. 4. Optionally customize the generated code.
If using a different agent (e.g., Codex CLI, OpenCode, GitHub Copilot, Cursor, Windsurf, etc.), open AGENTS.md for project instructions – most agents pick it up automatically.
What are this agent's strengths and limitations?
- Provides a complete end-to-end automated pipeline: from screenshots and design token extraction to parallel builds and visual diff QA.
- Broad support: explicitly lists 13 AI coding agents, covering major tools.
- Built on a modern tech stack (Next.js 16, React 19, TypeScript strict, shadcn/ui, Tailwind v4) producing ready-to-use code.
- Recommends Claude Code with Opus 5; other agents may have inferior results or experiences, creating provider lock-in.
- Requires Node.js 24+ environment; older versions won't work.
- Legal and compliance risks are high; users must manually verify target websites' terms of service and avoid infringement.
How does this agent compare with similar options?
The template explicitly compares multiple AI coding agents (Claude Code, Codex CLI, OpenCode, GitHub Copilot, Cursor, Windsurf, Gemini CLI, Cline, Roo Code, Continue, Amazon Q, Augment Code, Aider) and generates platform-specific skill files for them via sync scripts. Users can choose based on their agent.
Key facts side by side with the most closely related agents.
| Agent | Source review | Form / cost | Stars | Updated | Language | Full support on |
|---|---|---|---|---|---|---|
| AI Website Cloner Template This agent | 37 · Major gaps | Agent plugin / skillFree + model costs | ★ 37k | 14d ago | TypeScript | Claude Code |
| Agent UI - Chat Interface for AI Agents | 40 · Major gaps | Web appFree + model costs | ★ 1.9k | 5mo ago | TypeScript | — |
| Claude Reviews Claude Code | 46 · Major gaps | Web appFree | ★ 1.6k | 6mo ago | — | — |
| Open Generative UI | 44 · Major gaps | CLIFree + model costs | ★ 3.5k | 5d ago | TypeScript | Claude API |
How does FollowAgents rate this agent?
Why each dimension lost points
Evidence shows the repository contains no permission declarations, user confirmation flows, data flow descriptions, or sensitive data handling policies. Dependency security lacks audit or lock information. External effects (e.g., network requests, file writes) are not explicitly stated. Rollback mechanisms are not mentioned. Source attribution is only via author field and README claims, but not verified. Therefore all trust criteria score 0.
Self-consistency: README, package.json, and CI workflow are largely consistent in tech stack and commands, but no tests or runtime verification are provided, so score 2. Dependency availability: dependency list exists, but no lock file or integrity checks, score 1. Failure messages: no error handling or user prompts provided, score 0.
Audience and scenarios: README clearly lists use cases and non-intended uses, score 2. Capability boundaries: clearly states not for phishing or infringement, score 2. Trigger precision: provides clear commands and parameters, score 2. Environment fit: lists multiple supported platforms and Node version requirements, score 2.
Information architecture: project structure is clear, score 2. Install notes: detailed installation steps provided, score 2. Naming stability: version number exists but no changelog, score 1. Examples and FAQ: demo video and examples provided, but no FAQ, score 2. Known limitations: clearly lists non-intended uses, score 2. License: MIT license complete, score 3. Versioning and changelog: version number exists but no changelog, score 1. Maintenance responsibility: author info exists but not verified, score 1.
Output usability: generated codebase structure is clear, score 2. Marginal value: provides automated cloning functionality, but actual effectiveness not verified, score 2. Cost-benefit: requires Node 24 and AI agent, cost is high, but no performance data, score 1.
Claim traceability: README claims lack specific evidence, score 1. Cross-source corroboration: relies on single source, score 1. Fact-inference separation: does not clearly distinguish facts and inferences, score 1.
- Not found in source: least-privilege scopingGrant only what the task needs: a dedicated account or read-only token, scoped to specific directories and repos.
- Not found in source: confirmation before actingTurn on (or add) a confirmation step before it acts, and try it in a sandbox or test environment before real data.
- Not found in source: data-flow disclosureWatch which external services it contacts (proxy or firewall logs) and keep sensitive data out until you know where it goes.
- Not found in source: sensitive-data handlingUse dedicated, low-privilege, revocable API keys — never production credentials — and keep secrets out of logs.
- Not found in source: dependency securityPin versions and run a dependency audit (npm audit, pip-audit) before installing; prefer running it in a container.
- Not found in source: disclosed external effectsEstablish which external systems it writes to, sends to or changes, and verify with test accounts or repos before production.
- Not found in source: rollback or recovery pathBack up first, or work on a git branch or snapshot, so its changes can be undone.
- Not found in source: verifiable attributionInstall from the official repo or registry and check the publisher and URL to avoid look-alike packages.
- The repository provides no security audit or least-privilege measures; assess risks before use.
- Dependencies are not locked, posing supply chain risks; consider using lock files.
- No rollback mechanism is provided; cloning operations may be irreversible.
- No tests or verification are provided; actual effectiveness is unverified.
Recent releases
Latest entries from the project's GitHub Releases. Notes are quoted from upstream as written, not rewritten or tested by FollowAgents.
-
v0.6.1 v0.6.1 - Rule-based fidelity guidance
Release notes excerpt
Sharper cloning guidance that catches more fidelity drift with fewer, more general directives. - Treat each observation as a sample of a rule: read declared values and vary viewport width (including wider than the design), height, input, and state. - Use the files the source actually loads, and build shared components and page-wide behavior, such as smooth scrolling, from every observed state. - Compare beyond the design width and judge scroll and pointer behavior with real input. Full changelog: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.6.0...v0.6.1View on GitHub ↗ -
v0.6.0 v0.6.0 - Improved cloning workflow
Release notes excerpt
A simpler shared workflow for recreating websites, with improved guidance for responsive layouts, asset extraction, and interactive or animated pages. - Streamlined cloning instructions with focused inspection and motion references. - Updated project documentation and Claude command guidance to match the shared skill. Full changelog: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.5.1...v0.6.0View on GitHub ↗ -
v0.5.1 v0.5.1 - Security Patch & Opus 5.5
Release notes excerpt
Security Patch & Opus 5.5 This release updates Next.js to 16.3.5 to fix known vulnerabilities. The README now recommends Claude Code with Opus 5.5. Update if you started from an earlier version of the template. Highlights - Patched dependencies: Next.js and eslint-config-next are pinned exactly to 16.3.5, and vulnerable transitive dependencies are refreshed. npm audit reports 0 known vulnerabilities. - Opus 5.5 recommendation: the README now recommends Claude Code with Opus 5.5. - Current Star History: the README chart now runs through September 2026. …View on GitHub ↗
FAQ
Are there legal risks in cloning websites?
Is Claude Code mandatory?
How do I start if I don't use Claude Code?
AGENTS.md; most agents will pick it up automatically. You can also run the sync scripts to generate skill files for your agent.