有个朋友跟我说过一件事他维护一个跑了5年的 Webflow 老站公司要迁到 Next.js。Webflow 导出的代码是一团乱麻完全没法复用。请外包对方报价8万说要重做——也就是对着你的网站重新画一遍。后来他找到了这个工具两小时生成了基础版本人工对着校正了一天完成了。这个工具叫ai-website-cloner-template作者 JCodesMore3月13日发布。发布3天破6000 Star6周破13000 Star截至2026年6月已接近2万 Star、2900 Fork。核心就一句话给它一个网址它调用 AI coding agent自动把目标网站还原成一套干净的 Next.js 16 代码库。等等先别急着说这不就是爬虫。它和普通爬虫差远了听我说原理。它到底怎么工作的整条流水线从一条命令开始/clone-website https://example.com背后是五个阶段。 第一阶段侦察AI agent 打开目标网站像真实用户一样操作全页截图多个分辨率、滚动、点击、悬停同时提取设计 Token——颜色、字体、间距、圆角、阴影。关键点它拿的不是 HTML 源码而是浏览器真实渲染后的视觉结果。这个区别很重要你懂的源码里的样式和页面实际显示之间往往差着十层继承关系。 第二阶段打地基设计信息到手后先建基础设施全局 CSS 变量字体、颜色、间距写入 Tailwind v4 的 oklch 色彩 Token图片、视频、字体等所有资源全部下载到本地。 第三阶段写组件规范这步是整个工具最不寻常的地方。它不直接开始写代码——而是先给每个区块Header、Hero、Feature 区、Footer 等生成一份组件规范文件存在docs/research/components/里。规范里有精确的getComputedStyle()数值不是差不多8px圆角是浏览器实际算出来的值button.primary: background: oklch(0.55 0.22 255) border-radius: 8px padding: 12px 24px font-size: 14px / font-weight: 600 hover: background oklch(0.48 0.22 255)每个状态、每个交互、每个断点全都记录在案。下一步的 builder agent 直接照这份规范写不靠猜。⚡ 第四阶段并行构建这才是真正的工程亮点。它不按顺序一个一个写组件而是同时派出多个 builder agent每个 agent 在独立的 git worktree 里负责一个区块。Header 一个、Hero 一个、Footer 一个……像施工工地的并行施工多条线同时开工最后汇总。速度比串行快不少质量也稳——每个 agent 只专注一个区块上下文干净。✅ 第五阶段组装与质检所有 worktree 合并回来系统做一次视觉 diff对比克隆结果和原站截图找出偏差自动修正。五步上手前提是装了 Claude Code第一步去 GitHub 项目页点 Use this template创建你自己的仓库副本。别直接 clone 原仓库——你的代码不应该推回模板去。第二步clone 到本地gitclonehttps://github.com/你的用户名/你的仓库名.gitcd你的仓库名第三步安装依赖npm install第四步启动 Claude Code必须带--chrome参数claude --chrome--chrome是关键——它让 Claude Code 获得操控浏览器的能力Chrome MCP。没有这个第一阶段的侦察跑不起来。第五步开始克隆/clone-website https://目标网站.com整个过程根据网站复杂程度大约10到30分钟。你可以去泡杯咖啡。三个真实能用的场景场景一平台迁移WordPress、Webflow、Squarespace 老站迁到 Next.js 现代架构。工具跑完之后你拿到的是一套可以继续开发的代码基础而不是一堆截图。比从零重建快多了。场景二源码找回这个场景比你想象的常见。网站还在跑但仓库没了——前任开发者离职带走了、服务器跑路了、备份早就失效了技术栈又老到没人接手。以前这种情况基本只能花钱重做。现在至少有个 AI 生成的视觉起点省掉大量重复劳动。场景三学习逆向看到某个网站的动画、布局或响应式处理得很好想搞清楚它怎么实现的。工具跑完之后生成的组件规范和代码就是一份可读的拆解报告比对着 DevTools 手动扒准多了。支持哪些 AI 编程工具首推 Claude CodeOpus 4.7但不是唯一选项。项目目前支持13款主流 AI 编程工具工具状态Claude Code推荐Opus 4.7GitHub Copilot支持Cursor支持Windsurf支持Gemini CLI支持Codex CLI支持Cline / Roo Code / Continue / Aider...均支持它用一个AGENTS.md作为唯一真实来源sync-agent-rules.sh脚本自动把这份指令转成各平台格式。工程上相当整洁——不同平台不需要维护多份重复文档。几句实话适合用的地方平台迁移、源码恢复、学习研究——省掉大量重复性的视觉还原工作是合理的效率工具。不适合用的地方项目 README 写得很直白钓鱼网站、品牌冒充、侵权——禁止。对方网站的 Logo、品牌素材和原创文字有版权生成出来的代码只是视觉参考不代表你可以直接拿去发布当自己的作品。用之前也要看目标网站的服务条款明确禁止爬取的别动。质量边界第三方实测显示复杂动画和超大页面5万 DOM 节点、3000 CSS 规则的还原质量会打折扣。日常迁移够用高保真复现复杂企业应用还需要人工校正。速度和精度之间这个工具选了速度。总结开发者社区里涨势最猛的工具要么踩中了真实痛点要么展示了新的工程可能性。这个项目两样都沾——平台迁移的痛是真实存在的而并行 agent 视觉规范驱动的架构也是 AI coding agent 多智能体协同的一个有参考价值的工程模式。两万 Star 不是凑巧。GitHubhttps://github.com/JCodesMore/ai-website-cloner-template你用过类似的迁移工具吗或者有没有网站源码找不到的踩坑经历评论区聊聊。我是顾北关注我获取更多好玩有趣的开源仓库谢谢你阅读我的文章~我们下期再见PS本文部分内容由AI辅助创作