ai-website-cloner-template
OtherJCodesMore/ai-website-cloner-template
AI-powered template to clone any website into a Next.js codebase.
Overview
A reusable template for reverse-engineering websites into modern Next.js codebases using AI coding agents. Point it at a URL, run /clone-website, and the agent inspects the site, extracts design tokens, and builds components in parallel.
README Preview
# AI Website Cloner Template\n\n \n\nA reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. \n\n**Recommended: [Claude Code](https://docs.anthropic.com/en/docs/claude-code) with Opus 4.7 for best results** — but works with a variety of AI coding agents.\n\nPoint it at a URL, run `/clone-website`, and your AI agent will inspect the site, extract design tokens and assets, write component specs, and dispatch parallel builders to reconstruct every section.\n\n## Demo\n\n[](https://youtu.be/O669pVZ_qr0)\n\n> Click the image above to watch the full demo on YouTube.\n\n## Quick Start\n\n> **Important:** Start by making your own copy with GitHub's **Use this template** button. Do not clone this template repository directly for your website project, and do not open pull requests here with your generated website.\n\n1. **Create your own repository from this template**\n\n On the GitHub page for this project, click **Use this template**, then click **Create a new repository**.\n\n Give your new repository a name, choose whether it should be public or private, then click **Create repository**. If GitHub shows an **Include all branches** option, you can leave it off.\n\n This gives you your own separate project to work in, so your website changes stay in your account instead of coming back to the main template.\n\n2. **Open your new repository on your computer**\n\n After GitHub creates your copy, open that new repository. Click **Code** and open or clone your new repository with your preferred coding tool.\n\n If you use the terminal, the command will look like this:\n\n ```bash\n git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git\n cd YOUR-NEW-REPOSITORY\n ```\n\n3. **Install dependencies**\n ```bash\n npm install\n ```\n4. **Start your AI agent** — Claude Code recommended:\n ```bash\n claude --chrome\n ```\n5. **Run the skill**:\n ```\n /clone-website [ ...]\n
FAQ (4)
TroubleshootingHow do I fix the critical unauthenticated RCE vulnerability from Next.js 16.3.0 reported by npm audit?
Upgrade Next.js to patched version 16.3.5 or later. Versions 16.0.0–16.3.2 are affected by GHSA-p293-qw3h-jr36 and GHSA-2xp9-vwfh-vxw4. Update both packages and refresh the lockfile:
npm install next@^16.3.5 eslint-config-next@^16.3.5
npm audit fixIf you prefer exact pins, set them in package.json:
"next": "16.3.5",
"eslint-config-next": "16.3.5"Then run:
rm -rf node_modules package-lock.json
npm install
npm audit
npm run checknpm audit should report 0 vulnerabilities. Avoid relying only on npm audit fix --force, because npm may install a version outside the pinned dependency range; explicitly bumping next and eslint-config-next is the targeted fix.
TroubleshootingWhy does /clone-website remove previously cloned pages, and how can I prevent pages from being overwritten?
This happens because later /clone-website runs reset or collide with pages and output files from earlier runs. The fix is in the PR fix: preserve pages across clone runs: update to a release containing it, then rerun the clones. The update preserves existing cloned and user-authored pages, uses collision-resistant routes, and isolates research, screenshot, component, asset, and downloader outputs per target. It also handles same-path query state, Next.js reserved route syntax, and multiple origins. As a temporary workaround on older versions, clone all targets in one invocation instead of running separate commands: /clone-website https://example.com/page-a https://example.com/page-b https://example.com/page-c, or back up generated pages before each additional clone run.
TroubleshootingHow do I fix sync-skills.mjs not generating Cline, Roo Code, or Aider clone-website skill files?
This is a generator/README mismatch in ai-website-cloner-template v0.3.1 (commit 4cd764f): scripts/sync-skills.mjs defines only 9 targets, so Cline, Roo Code, and Aider files are not generated.
Upgrade to a release or commit containing the PR fix: complete Cline and Roo skill support, then regenerate the skills:
git pull
node scripts/sync-skills.mjs
find . -name 'clone-website*' -not -path './node_modules/*'The fix adds a native Cline workspace skill, a standards-compliant Roo Code skill, and a Roo Code /clone-website slash-command bridge. It also updates the English, Simplified Chinese, and Japanese READMEs.
Aider is not generated by this fix because it was removed from the fully supported platform list. Use Cline, Roo Code, or another listed supported agent until separate Aider support is implemented.
ConfigurationHow do I use Playwright MCP with the clone-website skill instead of the default browser MCP?
No separate backend or .env configuration is required. The clone-website skill's browser-automation pre-flight already supports Playwright MCP (@playwright/mcp), alongside Chrome MCP, Browserbase MCP, and Puppeteer MCP. Configure Playwright MCP in your MCP client, then tell your coding agent to use Playwright for the browser-automation step. The same website extraction and cloning workflow will run through Playwright instead of the default browser MCP.