cat README.md | head -50
ai-website-cloner-template
一句话克隆任何网站 —— 用 AI 编程 Agent 做逆向工程的模板项目。一条 /clone-website <url> 命令，13 个 AI 平台支持，多阶段管线：侦察 → 基础 → 组件规格 → 并行构建 → 组装 & QA。
// 目录
// 概览
今日新增 692 star
最后推送: 2026-06-01
Bus Factor ≈ 1 · JCodesMore 35/40 commits
我为什么被这个项目击中
上个月接了一个活——把客户的老 WordPress 站点迁移到 Next.js。那个站看起来不复杂，一个首页、三个 Landing Page、一套 Blog 布局。我心想三天搞定。
结果第一天就卡住了。所有元素的颜色、间距、字体大小都不是设计稿给的值——客户十年前找的自由设计师，PSD 早就丢了。我只能一个 Div 一个 Div 地打开 Chrome DevTools，getComputedStyle() 手动扒，然后一个个写到代码里。三天变成了六天，而且错漏百出——hover 状态忘了、移动端布局对不上、某个卡片的阴影值抄错了。
做完之后我发现 JCodesMore/ai-website-cloner-template 这个项目，那感觉就像——我花六天搬砖，转头发现有人已经发明了起重机。
不过，拆完之后我才意识到，这个项目的真正价值根本不在"一键克隆"这件事本身。
网站克隆最难的不是像素还原，是让 AI 不瞎猜
先说结论：这个项目的创新，在于它用 规格驱动（Spec-Driven） 的方式解决了 AI 编程 Agent 最大的问题——瞎猜。
你用过 Cursor、Claude Code、Windsurf 的话一定有体会：AI 写代码很多时候是"看起来对了"。颜色值它编一个，间距它猜一个，动画它用最通用的 transition。看起来还行，但放到原站旁边一对比就露馅——差了几个像素，颜色不在 oklch 空间里，hover 状态根本没提取。
这个项目做了一件非常聪明的事：在让 AI 写代码之前，先强制它写一份详细的组件规格文件（Component Spec）。
什么意思呢？它的 /clone-website 指令里有一条铁律——"spec files are the source of truth"。每个 Builder Agent 在动手之前，必须从目标网站提取出完整的结构化数据：CSS 值全部来自 getComputedStyle()、交互模型已确定、所有状态（包括 hover）已记录、响应式断点已检查。这份 Spec 文件存在 docs/research/components/ 目录下，是可审计的制品。
这才是真东西。不是让 AI 一边看截图一边猜代码，而是先把"真值"提取出来，再按图施工。
我研究了一下它的 SKILL.md，里面有 9 条核心原则，第 4 条叫 "Foundation First"——先建地基再砌墙。这和很多 AI 工具"一把梭"的思路完全相反。第 8 条更直接："Spec files are truth source"，规格文件是唯一的事实来源。
还有 13 条"禁止行为"清单，每一条都是血泪教训。比如"禁止 AI 估算 CSS 值"、"禁止只看默认状态不提取 hover"、"禁止一次性构建所有组件"、"禁止 agent 跨 section 工作"。这些规则看起来像是约束，但实际上是保障——保障最终输出的代码和原站一模一样。
Git Worktree 做并行构建：Agent 编排的一手妙棋
项目的另一个亮点是 Git Worktree 并行构建模式。它的流程是这样的：做完侦察和基础搭建之后，把每个 section 的规格文件分发到独立的 Git Worktree，每个 Worktree 里跑一个独立的 Builder Agent，并行构建不同的页面区块。
说实话，用 Git Worktree 做 Agent 编排这个思路，我第一次见到。本质上这是"用 Git 做 Agent Orchestration"——Worktree 提供了天然隔离，Agent 之间不会互相踩文件；Git Merge 作为天然的结果聚合；每个 Agent 的工作都是独立可审计的。
当然这有个前提——你的 Spec 文件必须足够清晰和完整，否则并行出来的组件对不上接口，合并就是灾难。这也是为什么它花那么多功夫在规范制定上。
多阶段管线拆解
项目定义了五个阶段，不是那种虚头巴脑的流程图，每一步都有明确的可交付物：
第 1 阶段侦察（Recon）不是随便截个图就完了。它会强制做交互扫描——scroll、click、hover，还有 1440px/768px/390px 三个响应式断点。这保证了后续 Agent 拿到的是全量信息。
第 2 阶段 Foundation Build 先建全局地基：字体系统、颜色 Token（oklch）、全局 TypeScript 类型、SVG 图标资源、甚至自动生成一个资源下载脚本。这些基础设施在所有并行 Agent 启动前就位。
第 3 阶段 Component Specs 是这个项目的灵魂。每个页面区块被拆成独立的 Spec 文件，每个 Spec 包含：完整的 CSS 计算值、交互模型标注、所有状态描述、响应式行为、使用的真实内容。然后这些 Spec 被分发到不同的 Worktree Builder Agent。
第 4、5 阶段就是并行构建和 QA 了。QA 不是人工看，而是并排对比——左边是原站截图，右边是克隆结果，桌面版和移动版都有。
技术栈和平台支持
技术选型很务实：Next.js 16 + React 19 + TypeScript Strict + shadcn/ui + Tailwind CSS v4 + Lucide React。Node.js 24+ 起步，带 Docker 多阶段生产构建。
它支持 13 个 AI 编程平台——Claude Code（推荐搭配 Opus 4.7）、Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider。但说实话，作者在文档里明确推荐 Claude Code + Opus 4.7，其他平台的可靠性参差不齐。
还有一个小细节值得提：它用 AGENTS.md 作为单一真相来源，自动同步到各平台的配置格式。这个设计思路很干净，避免了维护多套配置文件的同步噩梦。
效果演示
下面是项目提供的效果对比截图——左边是原始网站，右边是克隆结果。实话实说，对于简单到中等复杂度的网站，还原度非常高。
克隆后的产出物
使用这个模板克隆一个网站后，你会得到一套完整的、可维护的 Next.js 项目，不是 dump 出来的静态 HTML。产出物包括：
├─ app/
│ ├─ layout.tsx // 全局布局，包含字体、主题
│ ├─ page.tsx // 组装所有 section 组件
│ └─ globals.css // oklch 颜色 Token + 全局样式
├─ components/
│ ├─ hero-section.tsx // 每个 section 独立组件
│ ├─ features-section.tsx
│ └─ footer-section.tsx
└─ docs/research/components/
└─ spec-*.md // 可审计的规格文件
横向对比：它和别家有什么不一样
我把市面上几个同类方案放在一起比较了一下，差距一目了然。
| 项目 | 类型 | 输入方式 | 核心差异 |
|---|---|---|---|
| ai-website-cloner-template | 开源模板 | URL → 多阶段管线 | Spec 驱动 · Agent 编排 · 可审计制品 |
| CopyWeb | 商业 | URL/截图/Figma | 多输入 UI2Code · 对话式迭代 |
| JustCopy.ai | 商业 | URL → React+Tailwind | 极简一键 · 无 Agent 管线 |
| screenshot-to-code | 开源 | 截图 → HTML/React | 社区项目 · 无结构化流程 |
| v0.dev | Vercel 商业 | 对话式生成 | 通用 AI Web 生成 · 非专用于克隆 |
| design.md | Google Labs | 视觉识别规范 | 专注 Brand 资产 · 不生成代码 |
五项关键指标评分
视频演示
综合评判
这个项目最打动我的其实不是它能克隆网站——市面上能克隆网站的工具多的是。它真正让我觉得 有点东西 的，是它把 AI Agent 的工作方式从"猜"变成了"查"。
这和我最近做 GitHub AI 评测自动化的一个发现完全吻合：AI 写代码最大的瓶颈不是模型能力，是上下文信息的完整性和结构化程度。你给它模糊的指令，它就给你模糊的结果。你给它精确的 Spec，它就给你精确的代码。ai-website-cloner-template 的价值就是提供了一套 把"模糊的网站克隆需求"变成"精确的组件规格" 的标准化流程。
当然，它也有一堆问题。Bus Factor 等于 1——作者 JCodesMore 一个人写了 40 个 commit 里的 35 个。最后一次 push 是 6 月 1 号，已经 24 天没更新了。只有 5 个 Release，v0.3.1 还是早期阶段。Node.js 24+ 的门槛也让不少团队的 CI 环境吃不住。对于复杂网站，克隆结果仍然需要手动调整。
+ Git Worktree 并行构建：天然的 Agent 隔离与合并
+ 多阶段管线：侦察/基础/规格/构建/QA，每步有可交付物
+ 13 平台兼容：覆盖面极广
+ AGENTS.md 单源配置：避免多平台配置同步噩梦
+ Pixel-perfect 提取：getComputedStyle() 保证 CSS 准确
− 维护停滞：最后更新 24 天前
− 生态早期：只有 5 个 Release
− Node.js 24+ 门槛高
− 复杂网站仍需手动调整
− Claude Code + Opus 4.7 依赖重
跟我在做的事有什么关系
有人可能会问：你一个做 AI 工具评测的，跟网站克隆有什么关系？
关系很大。我每天的工作是用 AI 自动扫描 GitHub 热门项目，分析代码质量、社区健康度、技术趋势——本质上也是一种"逆向工程"：从已有软件制品中提取结构化信息，形成可复用的知识。ai-website-cloner-template 的 Spec-Driven Pipeline 思路，和我写评测脚本时的痛点完全一致——不是"能不能做"，而是"能不能不靠猜"。把对手工程序化、把质量标准可审计化，这个思路放到测试、文档生成、代码审查、技术调研，全都能用。
这也是我为什么花时间深度拆解这个项目。它的核心方法论——结构化提取 → 规格化存储 → 多 Agent 并行处理 → 可审计产出——对任何需要 AI 做严肃工程任务的人，都有参考价值。
如果你对这类"AI Agent 工程方法论"的深度分析有兴趣，我会持续挖掘 GitHub 上真正值得关注的项目，不只是看 Star 数，而是看它的设计思路能不能改变你写代码的方式。关注我，咱们一起盯着那些"看起来简单，拆开全是细节"的东西。