AI Website Cloner：克隆任意网站，13 个 AI 编程工具通用
看到好看的网站想参考？给一个网址，它自动截图、提取设计 token、分析交互，然后并行构建。13 个 AI 编程工具通用。
- 以前的做法要么手动扒 CSS 要么截图让 AI 照着画，效果都不稳。
- 整个流程分五步：侦察、基础设施、组件规范、并行构建、组装和 QA。
- 侦察阶段自动提取设计 token，这是比截图靠谱得多的输入。
- 并行构建是效率关键，多个组件同时出而不是排队。
- 最后有组装和 QA 环节，不是生成完就撒手。
看到一个网站设计很好看，想拿来参考？
以前要么手动扒 CSS，要么截图让 AI 照着画，效果参差不齐。
现在有一个 Claude Code Skill 模板叫 AI Website Cloner，做法简单粗暴：你给它一个 URL，跑 /clone-website，它自动截图、提取设计 token、分析交互行为，然后派出一堆并行 Agent 把网站的每个部分重建出来。
出来的不是草图，是用 Next.js 16 + Tailwind CSS v4 + shadcn/ui 搭建的可运行代码。
怎么运作的
整个克隆流程分五个阶段，全自动跑完：
① 侦察
通过 Chrome MCP（浏览器自动化协议）自动完成：截全屏、提取颜色/字体/间距等设计 token、分析滚动/点击/悬停等交互行为、跑不同分辨率的响应式截图。
这一步的产出是一份完整的"设计情报"，后面所有工序都基于它。
② 基础设施
更新全局字体、颜色变量、CSS globals，下载目标网站用到的所有图片、视频和图标素材。
③ 组件规范
这是最关键的一步。它不是"看着截图画"，而是对每个组件写一份详细的技术规范文档：精确到 getComputedStyle() 的 CSS 值、多状态内容（hover/active/disabled）、响应式断点、素材路径。
每个 builder Agent 拿到的不是"大概长这样"的描述，是精确到像素的施工蓝图。这是克隆质量的关键。
④ 并行构建
每个组件/区块分配一个独立的 builder Agent，各自在 Git worktree 里工作。互不干扰，并行推进。一个页面有 8 个区块，就同时派 8 个 Agent 开工。
⑤ 组装和 QA
合并所有 worktree，把组件串成完整页面，跑视觉差异对比。
用法
# 克隆仓库
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install
# 启动 Claude Code（带浏览器）
claude --chrome
# 跑克隆
/clone-website https://目标网站.com
就这么多。不需要配置，不需要写提示词，URL 扔进去等结果。
不只是 Claude Code 能用
虽然推荐 Claude Code + Opus 4.6 效果最好，但这个模板支持 13 个 AI 编程工具：
仓库里有一个 AGENTS.md 文件作为统一指令源，大部分 Agent 会自动读取。
技术栈
克隆出来的项目用的是：
- Next.js 16：App Router + React 19 + TypeScript 严格模式
- shadcn/ui：Radix 原语 + Tailwind CSS v4
- Tailwind CSS v4：oklch 设计 token
- Lucide React：默认图标（克隆过程中会替换为目标网站提取的 SVG）
这套组合比较主流，克隆完直接就能改、能部署。
几个需要注意的点
- 需要 Node.js 20+，旧版本跑不起来
- Claude Code 模式下需要加 --chrome 参数启动，因为侦察阶段依赖 Chrome MCP
- 克隆的是静态样式和交互，不包含后端逻辑和数据库
- 并行 Agent 数量取决于你的 AI 工具的并发能力，Claude Code 的 worktree 支持最完善
- 复杂的 SPA 或需要登录才能看到的页面可能效果打折
- 克隆的是"长什么样"，不是"怎么实现的"，原站如果用了非常规的 CSS hack 或 Canvas 渲染可能还原不了
和我们有什么关系
如果你在做前端或者做设计稿还原，这个工具能省掉大量扒 CSS 的时间。更有意思的玩法是：看到一个 landing page 设计不错，直接 /clone-website 拿到结构和样式，然后在上面改内容。比从零搭要快得多。
原推文附有视频演示。
👉 GitHub 仓库 |