大家好，我是何三，独立开发者
最近 GitHub 上有个项目直接炸了——8.9k Star，1.2k Fork，发布不到一周。
项目名：ai-website-cloner-template，一句话概括：给 AI Agent 一个 URL，它帮你把整个网站逆向工程成 Next.js 代码。
不是那种粗糙的"右键保存网页"，是真正提取设计令牌、下载资源、拆分组件、逐区块重建的像素级克隆。而且它不是一个封闭工具，是一个模板 + Skill，配合你已有的 AI 编程 Agent 来用。
今天拆开看看它到底怎么做到的，值不值得你上手。
先说槽点
每次看到这种"一条命令搞定一切"的项目，第一反应都是：吹的吧？
开发者社区最近一年被各种"AI神器"教育了不少——号称能生成完整 App 的工具，打开一看全是半成品；号称像素级还原的，实际效果跟原站差了十万八千里。Hacker News 上甚至有人发帖吐槽："自己的网站被 AI 克隆工具抄了，对方只改了几个字。"
这种争议确实存在。所以这个项目一出来，我的态度是：先看原理，再下判断。
它到底是个什么东西
ai-website-cloner-template 是一个 GitHub 模板仓库。你 Clone 下来，装好依赖，启动你的 AI Agent（推荐 Claude Code），然后执行：
/clone-website https://target-site.com
AI Agent 就会自动完成一系列操作：打开目标网站、截图、提取设计令牌、下载图片资源、分析页面结构、为每个区块写组件规格文件、然后派发多个 Builder Agent 在 Git worktree 里并行构建，最后合并、组装页面、做视觉对比 QA。
整个流程全自动，你要做的就是等。
五阶段流水线，核心亮点
这项目最让我佩服的不是"能克隆网站"，而是它的流程设计。写代码不难，难的是把一个复杂任务拆解成可靠的、可审计的、可并行的流水线。
第一阶段：侦察
别急着写代码。先让 Agent 像个侦探一样把目标网站摸透。
具体来说：
- 全页面截图（桌面端 1440px + 移动端 390px）
- 提取设计令牌：字体族、字重、颜色变量、间距、阴影……全部从
getComputedStyle()拿真实值，不猜 - 交互扫描：滚动触发什么动画？点击 Tab 切换了什么内容？Hover 状态怎么变的？响应式断点在哪？全部记录下来
这一步产出的不是代码，是一堆规格文件。这些文件后续会作为 Builder Agent 的输入。
第二阶段：基建
全局字体、颜色变量、Tailwind 配置、TypeScript 类型定义、全局资源下载——这些是地基，必须先搞定。Agent 自己来做这步，不外包。
第三阶段：组件规格
这是整个项目最"变态"的地方。
每个页面区块都有一份独立的规格文件（.spec.md），包含：
- 精确的 CSS 计算值（不是"大约 16px"，是从浏览器拿到什么就是什么）
- 所有交互状态（默认态、Hover 态、Scroll 触发态、Tab 切换态）
- 真实的文字内容和资源路径
- 响应式行为（桌面、平板、手机各怎么布局）
每个 Builder Agent 收到的不是"去做个导航栏"这种模糊指令，而是这份精确到像素的规格书。
第四阶段：并行构建
这是最爽的一步。
复杂区块会被拆成多个子任务，每个任务交给一个独立的 Builder Agent，在各自的 Git worktree 里并行开发。一个导航栏一个 Agent，三张不同的卡片三种变体就三个 Agent。
互不干扰，做完再合并。
第五阶段：组装 & QA
所有 worktree 合并后，Agent 把组件组装到 page.tsx 里，然后打开原站和克隆站做视觉对比。逐个区块检查，发现差异就修，直到看起来一模一样。
技术栈
生成出来的代码质量还不错：
- Next.js 16 — App Router + React 19 + TypeScript strict
- Tailwind CSS v4 — oklch 色彩令牌
- shadcn/ui — Radix 底层组件
- Lucide React — 图标（会被替换为目标站提取的 SVG）
不是那种 div 套 div 的屎山代码，至少结构上是干净的。
12+ 平台支持
虽然推荐 Claude Code + Opus 4.6，但它支持一大堆 AI Agent：
Claude Code、Codex CLI、Gemini CLI、Cursor、Windsurf、GitHub Copilot、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider、OpenCode……基本你能叫出名字的 AI 编程工具都覆盖了。
而且维护方式很聪明——核心指令只有两份文件（AGENTS.md 和 .claude/skills/clone-website/SKILL.md），改完之后跑个脚本，自动同步到所有平台的配置文件里。
快速上手
# 1. 克隆模板
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
# 2. 安装依赖
npm install
# 3. 启动 AI Agent（推荐 Claude Code）
claude --chrome
# 4. 执行克隆
/clone-website https://example.com
# 5. 查看结果
npm run dev
前置条件：Node.js 24+ 和一个 AI Coding Agent 账号。Claude Code 是推荐的，因为它的浏览器自动化能力最强。
如果你想克隆多个站点，一条命令就行：
/clone-website https://site1.com https://site2.com https://site3.com
v0.3.0 新增的多 URL 并行支持，每个站点独立隔离输出。
适合谁用？
说了这么多，这东西到底解决什么问题？
1. 平台迁移
你有个 WordPress / Webflow / Squarespace 建的老站，想迁移到现代的 Next.js 技术栈。以前得手动重写，现在喂给 AI Agent 就行。
2. 源码丢失
网站还在跑，但代码仓库没了、开发者离职了、技术栈烂了。这种情况其实不少见。这个模板能帮你把线上站点逆向成一份干净的现代代码。
3. 学习研究
想研究某个生产级网站是怎么实现特定布局、动画、响应式行为的？克隆下来看代码，比看教程快十倍。
4. 快速原型
看到别人家网站某个区块设计得很好，想借鉴？克隆下来改改就能用。
一些现实问题
得说几点实话。
Token 消耗不小。 整个流程涉及大量的浏览器自动化调用、CSS 提取、组件规格生成、并行构建。用 Claude Code 的话，一次完整的克隆操作可能会消耗不少 token。复杂站点可能会比较贵。
浏览器自动化是硬依赖。 没有 Chrome MCP / Playwright MCP 之类的浏览器工具，这个 Skill 根本跑不起来。如果你的 Agent 不支持浏览器集成，那就只能看热闹了。
复杂交互页面不一定完美。 项目文档里也说了，对于大量依赖后端数据的动态页面（实时功能、认证系统），它做不了。它处理的是视觉层面的克隆，不是功能层面的复制。
版权问题需要自己掂量。 项目 README 里写得挺明确：不能用于钓鱼、冒充、侵犯商标。但实际操作中，克隆别人网站的边在哪，得你自己判断。Hacker News 上那个被克隆网站的开发者可不是闹着玩的。
项目信息
- GitHub: https://github.com/JCodesMore/ai-website-cloner-template
- Star: 8.9k（还在涨）
- License: MIT
- 最新版本: v0.3.1（2026-03-29）
写在最后
AI 编程 Agent 正在从"帮你写函数"进化到"帮你完成整个工程项目"。这个项目是一个很好的信号——AI 不再只是代码补全工具，它可以扮演架构师、项目经理、甚至多个开发者的角色。
当然，现阶段它更像一个"聪明的搬砖工"——流程设计得好，但最终质量还是依赖 AI 的理解和执行能力。克隆一个简单落地页可能接近完美，克隆一个复杂的 SaaS 产品页面大概率还是需要人工调优。
但这个方向，大概率是对的。
本文使用 MGO 编辑并发布
关注"何三笔记"，回复"mgo" 免费下载使用
