GitHub Trending上有个仓库飙到 28.7k Star，叫ai-website-cloner-template。描述短得不像话：一个命令，AI Agent自动把任意网站逆向工程成干净的Next.js代码。

我当时心想，又来了，又是那种截图转 HTML 的粗糙玩意儿吧。但还是手痒，clone 下来跑了一遍。

结果被打脸了。

左边是原站，右边是克隆版，我把两张图并排放在两个显示器上，来回拖拽了快十分钟，愣是没找出几处能叫“明显差别”的地方。不是那种“看起来有点像”的程度，是真正拆成了 React 组件、Tailwind 样式、TypeScript 接口，连 hover 态和过渡动效都给你扒下来了。

这事确实有点离谱。

到底是个什么东西

ai-website-cloner-template本质上是个模板工程，作者把脚手架全搭好了，你不需要从零配环境。核心逻辑嘛，就是让 AI Agent 自动完成网站的逆向工程：截图分析、提取设计 token、生成组件规格、并行编码，最后再来一轮视觉 QA。

复刻一个网站，一条命令就够了：

/clone-website <目标网址>

听起来简单，但背后的活儿其实挺糙猛的。

五阶段流水线，不玩黑箱

把克隆过程拆成了五个阶段，每个阶段输入输出都摆在那儿，不是那种“AI 魔法一下搞定”的玄学。

一、侦察阶段：

Agent 打开浏览器，滚动、点击、悬停、切分辨率看响应式。设计 token、颜色、字体、间距、动效，全部扒干净。这里用了 Chrome MCP 集成，Agent 直接操作浏览器拿到计算后的真实样式，不是靠猜的，这点我很在意，因为很多工具靠截图硬猜颜色，出来的结果惨不忍睹。

二、打地基：

字体该换的换，颜色变量写进 Tailwind 主题，所有图片视频素材下载到 public 目录。这一步没什么好说的，但做不好后面全白搭。

三、写规格书：

这个挺有意思。Agent 给每个区块写详细规格，放在 docs/research/components/ 下面。getComputedStyle() 的精确值、交互模型、多状态内容、响应式断点、素材路径，全写进去。每个 builder 拿到文档再开工，照着做就行，不用瞎猜。我翻了几个规格文档，确实细得有点过分。

四、并行建造：

多个 builder 在各自 git worktree 里同时干活，一个负责 Hero，一个负责 Features，一个负责 Pricing。作者特别强调，必须在独立 worktree 分支工作，最后 orchestrator 统一合并。我觉得这个设计很现实，多个 Agent 同时改一个文件，分分钟打起来，跟人类团队写代码一个德性。

五、组装与视觉QA：

组件拼回 page.tsx 后，Agent 拿原站和克隆版并排对比。1440px 桌面端和 390px 移动端各测一遍。发现差异就回查规格文档，规格错了重提取，规格对了修组件，全部通过才算完。这轮 QA 我观察了一下，确实不是走过场。

我拿Codex跑了一遍，过程比想象中顺

我用的是Codex桌面版，整个过程不需要手动clone仓库，不需要npm install，一句话让Codex把Skill装好就行了。

第一步：装Skill

打开 Codex，直接丢仓库地址：

把这个开源的Skill装好 我要用：JCodesMore/ai-website-cloner-template

Codex 自己处理，1 分 51 秒装完。Skill 装到了 ~/.codex/skills/clone-website，SKILL.md 也验过了，skill 名称是 clone-website。下一轮直接发 URL 就能用，不用折腾。

第二步：丢URL开干

装好之后，我发了一个目标网站：

用 clone-website 克隆 im.qq.com/index/#/

Codex 自动执行五阶段流水线，终端里进度输出很清楚——Reconnaissance、Foundation、Component Specs、Parallel Build、Visual Diff。每一步都有日志，不是那种“正在思考…”的模糊状态。

第三步：侦察阶段，我盯着看了会儿

Agent 自动打开浏览器，开始截图、滚动页面、提取设计 token。全程我没动手，它自己把颜色、字体、间距、动效全扒了。Chrome MCP 集成确实管用，拿到的都是计算后的真实样式，不是靠视觉模型猜的。

第四步：生成的规格书长什么样

克隆完成后，docs/research/components/ 目录下生成了每个区块的规格文档。我打开看了一眼，确实写得细——精确的 getComputedStyle() 值、交互模型、多状态内容、响应式断点、素材路径，全有。每个 builder 拿到这份文档再开工，不需要瞎猜。这点我觉得是项目最扎实的地方，不是靠大模型硬记，是靠工具把数据先捞出来。

第五步：本地预览，对比效果

跑npm run dev启动，localhost:3000打开。我把原站和克隆版并排放在两个窗口，桌面端1440px和移动端 390px各测了一轮。说99%一致可能有点夸张，但95%以上是有的，剩下的确实就是微调。

第六步：代码结构，确实能直接上手

克隆出来的代码不是一坨垃圾，是结构清晰的 Next.js 项目。src/components/ 下面按区块拆分，ui/ 里是 shadcn/ui 组件，icons.tsx 是提取的 SVG，public/images/ 和 public/videos/ 是下载的素材。拿到手就能二次开发，不用重新整理。

怎么快速上手

环境要求就两条：Node.js 24+，以及一个能用的 AI 编码代理。我用 Codex 走的，其他 Agent 打开 AGENTS.md 看对应指令也行。

步骤其实就几步：

1. 在 Codex 里一句话安装 Skill：把这个开源的Skill装好 我要用：JCodesMore/ai-website-cloner-template
2. 直接发目标 URL：用 clone-website 克隆 https://example.com
3. 等 Codex 跑完五阶段流水线，时间取决于网站复杂度，我那个跑了几十分钟吧
4. 启动本地预览：npm run dev
5. 按需微调——这一步还是得自己来

常用命令顺手列一下：

npm run dev      # 启动开发服务器
npm run build    # 生产构建
npm run lint     # ESLint 检查
npm run typecheck # TypeScript 检查
npm run check    # 一键跑 lint + typecheck + build

v0.3.0 加了 GitHub Actions 的 CI 质量门禁，每次 push 和 PR 自动跑检查。本地先用 npm run check 自查，避免推到远程才发现问题，这个对团队协作挺实用。

说几句实在话

这项目让我觉得，AI Agent 在工程化上确实不是玩具了。不是“帮我写个按钮”那种级别，而是把复杂流程拆解成可复用、可编排、可验证的流水线。worktree 隔离避免冲突，规格文档消除猜测，视觉 QA 保证交付质量，每一步都踩在工程化的痛点上，不是花架子。

但话说回来，它也有明显的边界。克隆出来的是像素级复刻，不是理解后的重构。原站有烂代码结构，克隆版也会原样继承。它解决的是“从无到有”，不解决“从坏到好”。拿到代码后，你还是得自己 review、优化、按业务改造，这点我觉得没法偷懒。

另外，我有点好奇它对复杂交互（比如登录态、动态加载内容）的处理能力，这次克隆的站点偏静态展示，如果是重度 SPA 应用，效果可能就要打个问号了。这个项目或许还做不到完美，但方向是对的。

即便如此，复刻一个网站从几天甚至几周压缩到几十分钟，这个压缩比太夸张了。平台迁移、代码找回、竞品学习，这几个场景的价值是实实在在的。GitHub 上 28.7k Star，我觉得不是刷出来的，值得放进工具箱里。

GitHub地址:

https://github.com/JCodesMore/ai-website-cloner-template