项目简介
一个可复用的模板，利用 AI 编码代理将任意网站逆向工程为现代 Next.js 代码库。指定 URL 后运行 /clone-website 命令，代理会检查网站、提取设计令牌并并行构建组件。
README 预览
# 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
常见问题 (4)
故障排除如何修复 npm audit 报告的 Next.js 16.3.0 中严重的未经身份验证的 RCE 漏洞？
将 Next.js 升级到已修复的版本 16.3.5 或更高版本。16.0.0–16.3.2 版本受 GHSA-p293-qw3h-jr36 和 GHSA-2xp9-vwfh-vxw4 的影响。请同时更新这两个包并刷新锁定文件：
npm install next@^16.3.5 eslint-config-next@^16.3.5
npm audit fix如果你希望固定精确版本，请在 package.json 中设置：
"next": "16.3.5",
"eslint-config-next": "16.3.5"然后运行：
rm -rf node_modules package-lock.json
npm install
npm audit
npm run checknpm audit 应报告 0 个漏洞。不要仅依赖 npm audit fix --force，因为 npm 可能会安装超出固定依赖范围的版本；显式升级 next 和 eslint-config-next 才是针对性的修复方式。
故障排除为什么 /clone-website 会删除之前克隆的页面，以及如何防止页面被覆盖？
这是因为后续运行的 /clone-website 会重置之前运行生成的页面和输出文件，或与它们发生冲突。修复方案包含在 PR fix: preserve pages across clone runs 中：更新到包含该修复的版本，然后重新运行克隆。此次更新会保留现有的已克隆页面和用户自行编写的页面，使用防冲突的路由，并按目标隔离 research、screenshot、component、asset 和 downloader 的输出。它还能处理同一路径下的查询状态、Next.js 的保留路由语法以及多个来源（origin）。对于旧版本，临时解决方法是：在一次调用中克隆所有目标，而不是分别运行多条命令，例如 /clone-website https://example.com/page-a https://example.com/page-b https://example.com/page-c；或者在每次额外运行克隆之前备份生成的页面。
故障排除如何修复 sync-skills.mjs 未生成 Cline、Roo Code 或 Aider 的 clone-website 技能文件的问题？
这是 ai-website-cloner-template v0.3.1(commit 4cd764f)中的一个生成器/README 不匹配问题:scripts/sync-skills.mjs 仅定义了 9 个目标,因此不会生成 Cline、Roo Code 和 Aider 文件。
请升级到包含 PR fix: complete Cline and Roo skill support 的发布版本或提交,然后重新生成技能:
git pull
node scripts/sync-skills.mjs
find . -name 'clone-website*' -not -path './node_modules/*'该修复添加了一个原生 Cline 工作区技能、一个符合标准的 Roo Code 技能,以及一个 Roo Code /clone-website 斜杠命令桥接。同时还更新了英文、简体中文和日文 README。
此修复不会生成 Aider,因为它已从完全支持的平台列表中移除。在单独的 Aider 支持实现之前,请使用 Cline、Roo Code 或其他已列出的受支持代理。
配置如何使用 Playwright MCP 搭配 clone-website 技能，而不是默认的 browser MCP？
无需单独的后端或 .env 配置。clone-website 技能的浏览器自动化预检流程已支持 Playwright MCP（@playwright/mcp），同时还支持 Chrome MCP、Browserbase MCP 和 Puppeteer MCP。在你的 MCP 客户端中配置 Playwright MCP，然后告诉你的编码代理在浏览器自动化步骤中使用 Playwright。相同的网站提取与克隆工作流将通过 Playwright 而非默认的浏览器 MCP 运行。