AI Website Cloner Template

AI Website Cloner Template 是一个为 AI编程助手设计的开源模板，由开发者 JCodesMore 发布的开源项目（MIT 许可证），在 GitHub 上发布不到一周就收获了 8.9k+ Stars 和 1.2k+ Forks。它的核心能力是：给 AI Agent 一个 URL，它会自动把整个网站逆向工程成一整套干净的 Next.js代码。

这不是简单的“右键保存网页”，而是真正提取设计令牌、下载资源、拆分组件、逐区块重建的像素级克隆方案。

⚙️ 核心工作原理：五阶段流水线

这个项目最让人惊艳的，不是“能克隆网站”这个结果，而是它把一个复杂任务拆解成了一套可靠、可审计、可并行的 5 个阶段。

1. 侦察阶段

Agent 先摸透目标网站，不做任何猜测：

• 全页面截图（桌面端 + 移动端）
• 从 getComputedStyle() 提取真实的设计令牌：字体族、字重、颜色变量、间距、阴影等
• 交互扫描：滚动触发动效、Tab 切换内容、Hover 状态变化、响应式断点

这一步产出的是一堆规格文件，而不是代码。

2. 基础搭建

根据侦察结果，自动更新字体、颜色变量、全局样式，并下载所有图片、图标等资源到本地。

3. 组件规格化

这是最“变态”的一步。每个 UI组件都会被写成一份独立的规格文件（存放在 docs/research/components/），包含：

• 精确的 CSS 计算值（直接从浏览器获取的真实数值）
• 所有交互状态（默认态、Hover 态、Scroll 触发态等）
• 真实的文字内容和资源路径
• 响应式行为（桌面、平板、手机各怎么布局）

Builder Agent 收到的不是“去做个导航栏”这种模糊指令，而是一份精确到像素的规格书。

4. 并行构建

将构建代理分发到不同的 Git worktree，每个组件或页面区块对应一个独立的 Builder Agent，同时并行构建。Header、Footer、Hero Section、Card Grid 这些独立组件同时开工，大幅缩短时间。

5. 组装与 QA

合并所有 worktree，把组件组装进 page.tsx，然后打开原站和克隆站做视觉对比。逐个区块检查，发现差异就修，直到看起来一模一样。

🚀 快速上手指南

前置要求

• Node.js 18+ 或 24+（官方推荐）
• 一个 AI编程Agent（推荐 Claude Code + Opus 4.6 模型，效果最佳）
• Chrome MCP 浏览器扩展（用于浏览器自动化侦察）

步骤一：克隆模板

git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install

步骤二：启动 AI Agent（Claude Code 为例）

claude --chrome

在出现的菜单中确认信任 Claude Code 读写文件，当提示在 Chrome 中安装 Claude 扩展时，按 Enter 确认。

步骤三：执行克隆

/clone-website https://你要克隆的网站.com

之后会打开一个 Chrome 窗口供 Claude 使用，整个过程全自动，你只需等待。

支持的其他 AI Agent

除了 Claude Code，这个模板还支持 Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider 等十多种 AI编程助手。

💡 小技巧：有用户实测使用 WorkBuddy、OpenClaw 等工具也能顺利跑通，核心是确保配置好 Playwright MCP 或 Chrome MCP 作为浏览器自动化前置工具。

💡 使用场景建议

✅ 适合做的

• 平台迁移：将 WordPress、Webflow、Squarespace 等网站重建为现代 Next.js代码库
• 恢复丢失的源代码：网站还在线上但仓库丢了，可以反向工程重建
• 快速原型验证：几小时内搭建出视觉效果极佳的 Demo，用于产品演示或内部方案评估
• 学习参考：观察 AI 如何将复杂 DOM 结构转化为简洁的 Tailwind 代码，提升自己的前端工程化能力

⚠️ 需要注意的

1. 不要盲目抄袭：项目设计初衷是学习和快速起步，不是鼓励直接剽窃他人设计。Hacker News 上已有开发者吐槽“自己的网站被 AI克隆工具抄了，对方只改了几个字”。
2. 复杂网站成本较高：淘宝这类商业网站结构极其复杂，克隆过程会消耗大量 token，不建议浪费资源去尝试。
3. Token 消耗：对于大型网站，整个五阶段流水线会调用大量 AI 调用，注意控制预算。
4. 项目上下文管理：建议每个克隆任务单独建一个工作目录，避免全局技能堆积导致上下文过长、拖慢响应速度。

📦 生成的技术栈

克隆完成后，你会得到一个基于以下技术栈的生产级 Next.js 项目：

• Next.js 16（App Router + React 19 + TypeScript strict）
• shadcn/ui（Radix primitives + Tailwind CSS v4）
• Tailwind CSS v4（oklch 设计令牌）
• Lucide React（图标库，克隆过程中会被提取的 SVG 替换）

🔗 相关链接

• GitHub 仓库：https://github.com/JCodesMore/ai-website-cloner-template
• 项目演示视频：仓库 README 中点击 Demo 图片可观看完整 YouTube 演示
• 短链接：https://dsc.gg/jcodesmore（目前访问异常，建议以 GitHub 为准）

🌐 同类工具对比

除了 AI Website Cloner Template，还有一些同类工具也值得关注：

总结：AI Website Cloner Template 本质上是一套 Agent 工作流模板，而不是一个封装好的黑盒工具。它展示了一个很重要的思路：把“克隆网站”这种模糊任务，拆成 5 个明确的阶段，每个阶段都有具体的输入输出，让 AI 能够可靠地执行。如果你在用 Claude Code、Cursor 等 AI 编程助手，这个项目绝对值得一试，哪怕不是为了克隆，光是学习它的流程设计思路就很有价值。