AI Website Cloner Template：用一条命令让编码代理重建 Next.js 站点
AI 网站克隆模板可指导编码代理将参考站点重新创建为结构化 Next.js 项目。
秒懂
- 它是什么？
- 这个模板把网站克隆变成一套多阶段流水线，交给编码代理执行。它适合迁移自有站点或恢复丢失源码，但对代理能力和目标站点复杂度有明确要求。
- 适合谁用？
- 适合拥有 WordPress、Webflow 或 Squarespace 站点并想迁移到 Next.js 的开发者，也适合源码丢失但线上版本仍在的情况。不适合对像素级还原要求极高、目标站点包含大量动态内容或复杂交互的团队，因为视觉 diff 与规格文件无法覆盖所有运行时行为。
- 能商用吗？
- 可以。MIT 是宽松许可证：你可以使用、修改并销售基于它的软件，只需保留版权和许可证声明。
- 还在维护吗？
- 在维护。仓库最近一次提交在 32 天前。
- 用什么语言写的？
- 主要是 TypeScript（依据 GitHub 的语言统计）。
以上回答依据项目的 GitHub 数据（最近同步于 2026年9月15日）和我们的分析，不构成法律意见。
开源项目深度解析
模板解决的是代理乱写代码的问题
让编码代理直接根据一个 URL 去重建网站，结果通常不可控。代理可能忽略原始设计细节，也可能把组件结构写得五花八门。这个模板用一套预先定义的技能文件来约束代理行为，把克隆过程拆成五个阶段：侦察、基础搭建、组件规格、并行构建、组装与 QA。它不是一个运行时工具，而是一个项目脚手架，里面包含 AGENTS.md 指令和 /clone-website 技能定义。目标用户是那些拥有自有站点、想迁移到现代 Next.js 技术栈的开发者，以及丢失了源码但线上版本还活着的人。它不解决抓取或反爬问题，那部分依赖代理自身的浏览器能力和网络环境。
五阶段流水线：从截图到视觉 diff
流程从侦察阶段开始，代理会抓取截图、提取设计 token，并扫描滚动、点击、悬停和响应式行为。接着是基础搭建，更新字体、颜色、全局样式，并下载所有静态资源。第三阶段最关键，代理把每个组件的精确计算样式值、交互模型、多状态内容和断点写入 docs/research/components/ 下的规格文件。这些规格不是泛泛描述，而是 getComputedStyle() 返回的具体数值。第四阶段用 git worktree 并行启动多个构建代理，每个代理负责一个区块或组件，并收到完整的规格内联传递。最后合并 worktree，组装页面，并与原始站点做视觉 diff。这个机制的核心在于把模糊的「克隆网站」指令，变成可验证的规格驱动开发流程。
上手步骤：四条命令加一个斜杠命令
README 明确要求不要直接克隆模板仓库，而是用 GitHub 的 Use this template 按钮创建自己的仓库。之后在本地克隆新仓库，运行 npm install，再启动代理客户端。推荐 Claude Code，命令是 claude --chrome，这暗示代理会启动带 Chrome 的浏览器环境用于侦察。然后在代理对话中执行 /clone-website <target-url1> [<target-url2> ...]，支持同时传入多个 URL。如果你的客户端不支持斜杠技能，可以用自然语言说「Clone <target-url> using the clone-website workflow」。项目要求 Node.js 24 以上，技术栈是 Next.js 16、React 19、TypeScript strict、shadcn/ui 和 Tailwind CSS v4。整体起步成本很低，但代理客户端的技能激活机制必须兼容。
多 URL 与跨平台支持：v0.4.0 带来的变化
最近的 v0.4.0 版本标题是 「Expanded Agent Support & Reliable Multi-Page Cloning」，说明多页面克隆是这个版本的重点。v0.3.0 引入了多 URL 克隆和 CI 质量门禁，v0.3.1 修复了 Windows 下 CRLF 行尾导致代理规则同步失败的问题。这些版本记录显示项目在持续处理代理兼容性的细节。支持的代理列表很长，从 Claude Code、Codex CLI、Gemini CLI 到 Cursor、Windsurf、Cline、Roo Code 都有。但 README 特别标注 Claude Code 加 Opus 5 效果最好，这暗示不同代理对技能文件的理解程度有差异。如果你用的不是推荐组合，可能需要额外调试 AGENTS.md 的指令解析。
git worktree 并行构建：机制与代价
第四阶段使用 git worktree 来并行构建，每个 builder 代理在独立的 worktree 中工作，避免文件冲突。这个设计很聪明，它让多个代理可以同时写代码，最后再合并。但并行也带来协调成本。规格文件必须足够精确，否则每个代理产出的组件风格会不一致。README 说每个 builder 收到完整的组件规格内联传递，包括精确的计算样式值和交互模型。这意味着规格文件的质量直接决定最终结果。如果侦察阶段漏掉了某个交互状态，后续构建就会缺失那个状态。并行构建适合区块独立的页面，比如营销首页，但如果目标站点有大量跨区块共享的状态逻辑，合并时可能出现难以预料的冲突。
视觉 diff 的局限：它不能验证所有东西
最后阶段的视觉 diff 是验证手段，但它只能比较渲染结果。动态内容、登录后的状态、动画时序、第三方脚本注入的元素，这些都无法通过静态 diff 完全覆盖。模板的定位是「重建一个干净 Next.js 应用」，这意味着它更倾向于静态或服务端渲染的站点。如果你的目标网站依赖大量客户端 JavaScript 来呈现内容，代理在侦察阶段可能看到的是空壳或加载中的状态。README 的使用场景包括平台迁移和丢失源码恢复，这些都是相对静态的内容型站点。对于单页应用或需要后端 API 配合的站点，这个模板可能不是合适的工具，它没有说明如何处理 API 层或数据库。
许可证与维护成本：MIT 下的模板更新
项目采用 MIT 许可证，这意味着你可以自由使用、修改和分发，包括商用。但要注意，模板本身是持续演进的，v0.4.0 在 2026 年 8 月发布，距离 v0.3.1 有四个多月。如果你用模板创建了自己的仓库，后续模板的更新不会自动同步到你的项目，你需要手动合并上游变更。这既是优点也是负担，优点是你的网站代码不会因为模板更新而被破坏，缺点是你无法直接获得新的代理兼容性修复。README 明确要求不要对模板仓库开 PR 提交你生成的网站，这进一步说明它定位为起点而非持续依赖。维护成本主要在于，当你的代理客户端升级后，可能需要回来检查 AGENTS.md 和技能文件是否仍然兼容。
替代方案：自己写提示词 vs 用这个模板
不使用这个模板的替代做法是，直接给代理一个 URL 和一段自定义提示词，让它自由发挥。区别在于这个模板把隐性知识显性化了，它把侦察、规格、并行构建这些步骤固化成文件，代理只需按流程执行。而自由提示词依赖代理当时的判断，结果不稳定。另一个替代是使用专门的网站抓取工具配合静态站点生成器，比如用 wget 镜像站点再手工转换，但那会保留原始 HTML 结构，无法得到干净的 Next.js 组件。这个模板的目标是生成可维护的 React 组件树，而不是 HTML 快照。所以选择的关键在于，你是否需要组件级别的重构能力，以及你是否愿意信任代理的规格提取质量。
编辑结论
适合拥有 WordPress、Webflow 或 Squarespace 站点并想迁移到 Next.js 的开发者，也适合源码丢失但线上版本仍在的情况。不适合对像素级还原要求极高、目标站点包含大量动态内容或复杂交互的团队，因为视觉 diff 与规格文件无法覆盖所有运行时行为。采用前先确认你的代理客户端能识别 /clone-website 技能，并核对 AGENTS.md 中的指令是否与你的环境匹配。在开始克隆前，用非生产站点做一次完整试运行，观察规格文件是否准确反映了计算样式和响应式断点。这个模板的价值在于把代理的随机性约束成结构化流程，但它不会替你判断目标站点的可克隆性，这个判断必须由你完成。
社区笔记