一行命令，克隆任意网站

原文链接：https://mp.weixin.qq.com/s/19kSuUld0oqcgWYTtZD27w

摘要

ai-website-cloner-template — 18.3k Star 的 GitHub 项目（MIT 协议），3 天涨 6000 星、每周持续上涨。核心突破：不是让 AI"看着截图猜代码"，而是通过 Chrome MCP 直接读浏览器 getComputedStyle() 真实 CSS 值，做到像素级复刻。一行命令 /clone-website 跑完侦察→打地基→写规格书→并行施工→合并质检五步流水线。

核心机制：不是猜，是读

大部分 AI 仿站工具——截图丢给大模型，看图写代码。模型在猜边距、猜颜色，猜错就走样。

这个项目走另一条路——Chrome MCP 操控浏览器，把每个元素的 getComputedStyle() 抠出来：精确到像素的间距、确切的颜色值、字重、过渡时间。不是猜，是读。这一步差别决定了复刻精度的天花板。

五步流水线

1. 侦察 — 多分辨率截图 + 提取设计 token + 滚动/点击/hover/响应式断点全扫描
2. 打地基 — 配字体颜色全局样式 + 下载所有图片/视频/图标素材到本地
3. 写规格书 — 每个组件一份详细 spec：精确 computed CSS + 状态 + 行为逻辑 + 文案
4. 并行施工 — 多个 builder agent 各负责一个区块，独立 git worktree 同时干活
5. 合并质检 — 合并 worktree + 视觉对比 + 自动修复差异

每个 builder 拿到的是内联完整规格，没有留给它"猜"的空间。

上手

• 环境：Node.js 20+、Chrome MCP（Claude Code 浏览器扩展）、推荐 Opus 4.7
• 三步：Use this template → npm install → claude --chrome → /clone-website <url>
• 支持一次多个 URL 并行克隆，已适配 13+ 种 AI 编码 agent（Cursor、Codex CLI、Gemini CLI、Windsurf 等）

适用场景

• 源码丢了要重建（开发跑路/技术栈过时）
• 学习拆解（扒明白结构、间距、动效套路）
• 平台迁移（老站迁 Next.js 16 + Tailwind v4）
• 做 Landing Page（照着喜欢风格快速起模板）

核心启示

最值得琢磨的不是"克隆网站"这个功能，而是背后的思路：把复杂任务拆成精确规格书，再派一群 agent 并行施工。"侦察→定规格→并行施工→合并质检"这套打法，放到别的活儿上就是下一个 agent 应用。

AI 编码这一年的真正进步往往不在模型本身，而在"怎么把活儿安排明白"。