克隆网站，一条命令就能完成的神器

还在手动抠图、翻源码、一个个写组件？这个开源项目让 AI 替你干完所有脏活。

当你想模仿一个优秀的网站界面，或者需要把旧网站迁移到新技术栈时，通常会经历以下痛苦流程：

• 手动抠图：F12 打开开发者工具，一个个翻 HTML/CSS，复制样式
• 截图目测：对着截图手动调间距、颜色、字体，眼睛都快看瞎
• 逐个组件还原：从零手写 Header、Footer、卡片……重复造轮子
• 响应式适配：PC 调好了，移动端又崩了，来回改到崩溃
• 技术栈老旧：网站是 WordPress/Webflow 建的，想迁移到 Next.js 又不想重写

如果每次都要经历这一套，效率低得令人发指。

而 AI Website Cloner Template 的出现，直接把这件事的难度降到了零——你只需给 AI 一个 URL，它自动完成从侦察到部署的全流程，而且输出的是干净、模块化的 Next.js 代码库。

它的核心功能特点

一个用于逆向工程任意网站，将其转化为现代化 Next.js 代码库的开源 AI 模板。

说白了就是：给个网址，AI 帮你抄代码，还能直接上线。

五阶段管道，全自动克隆

项目设计了一套精密的五阶段工作流，AI 代理按流程执行：

侦察 → 基础搭建 → 组件规范 → 并行构建 → 质检上线

阶段 1：侦察 🔍

AI 通过浏览器自动化工具（Playwright MCP）访问目标网站：

• 截图目标网站的各个页面和状态
• 提取设计令牌：颜色、字体族、字号、间距等精确 getComputedStyle() 值
• 模拟真实用户行为：滚动、点击、悬停
• 自动切换响应式断点，获取移动端、平板端的真实效果

阶段 2：基础搭建

• 根据侦察结果更新项目的字体配置、颜色变量、全局样式
• 下载所有图片、图标等静态资源到本地
• 搭建 Next.js 项目骨架

阶段 3：组件规范生成

• 为网站的每个 UI 组件编写详细的规范文档
• 存储在 docs/research/components/ 目录
• 包含精确的计算样式值（非模糊描述）、交互状态、响应式断点
• 这份规范本身就是一份珍贵的设计文档

阶段 4：并行构建 ⚡

这是效率最高的环节——AI 将多个组件构建任务分发到不同的 Git 工作树，多个代理同时工作，一个构建 Header、一个构建 Footer、一个构建卡片……并行推进，速度远超串行开发。

阶段 5：集成与质检 ✅

• 合并所有工作树的代码
• 组装完整的页面
• 与原始网站进行视觉差异对比，确保还原度
• 完成后即可直接部署上线

技术栈

技术	版本
框架	Next.js 16
UI 库	React 19
语言	TypeScript
样式	Tailwind CSS v4

项目的最终输出就是一套可直接运行的现代化 Next.js 代码库，可维护性远超传统工具生成的混乱 HTML。

多 AI 助手兼容

项目适配了几乎所有主流 AI 编程助手：

AI 助手	适配情况
Claude Code	✅ 推荐，配合 Opus 4.6+ 效果最佳
WorkBuddy	✅ 完全支持
Cursor	✅ 完全支持
GitHub Copilot	✅ 完全支持
Windsurf	✅ 完全支持
Amazon Q	✅ 完全支持
其他十余种	✅ 均有适配

适用场景

场景	说明
平台迁移	将 WordPress、Webflow、Squarespace 网站迁移到 Next.js
源码丢失恢复	项目在线上但源码丢了、员工离职了，一键恢复
快速原型改造	基于现有网站快速改造，生成可维护的代码
学习研究	逆向工程优秀网站，学习布局、动画和响应式设计的实现

---

安装使用说明

前置条件

• Node.js 18+
• 一个 AI 编程助手（推荐 Claude Code 或 WorkBuddy）
• Playwright MCP（浏览器自动化工具，需要安装）

安装方式

方式一：作为项目模板克隆（推荐）

在 AI 助手中新建任务，选择工作目录，输入：

安装技能：https://github.com/JCodesMore/ai-website-cloner-template

安装时选择 「作为项目克隆」，将整个仓库克隆到工作目录。

方式二：Git 命令行安装

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

使用流程

第一步：启动 AI 助手

# 以 Claude Code 为例
claude --chrome

第二步：输入克隆命令

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

AI 会自动创建五个任务（对应五阶段），依次执行。

第三步：一键部署到 Vercel

请将目录下的网站部署到 Vercel

⏱ 全流程仅需约 15 分钟，从拿到 URL 到网站上线。

使用小贴士

1. 从简单网站开始：首次使用建议选择结构简单的落地页，熟悉流程后再挑战复杂网站
2. 适时开新任务：上下文过长会影响 AI 效率，定期切任务保持稳定输出
3. 配合部署技能：安装 Vercel 部署技能，形成完整的「克隆 → 上线」工作流
4. 手动检查大屏/小屏：虽然 AI 会自动视觉对比，建议手动检查响应式效果

---

可能出现的问题

1. 克隆效果不完美

项目目前为 v0.3.1，属于早期版本，复杂网站的还原效果可能不尽如人意。建议：

• 先从结构简单的网站（如落地页、产品介绍页）入手
• 克隆完成后可以通过对话让 AI 继续微调

2. 对 AI 模型版本有要求

项目的效果高度依赖 AI 助手的能力。推荐使用 Claude Code 配合 Opus 4.6+，其他模型的效果可能会有差异。

3. 需要消耗 API 额度

整个克隆过程会多次调用 AI API，需要消耗一定的额度。简单网站消耗较少，复杂网站消耗较多。

4. 复杂交互难以还原

对于大量 JavaScript 驱动的复杂交互（如 SPA、实时数据展示等），克隆的是视觉层面的还原，动态交互逻辑可能需要二次开发。

5. 法律与道德红线

⚠️非常重要：禁止将本工具用于以下目的：

• 制作钓鱼网站冒充他人
• 侵犯版权或其他知识产权
• 任何非法活动

本工具仅供学习研究、网站迁移、源码恢复等合法用途。

---

五、项目信息

项目	内容
📛 项目名称	AI Website Cloner Template
🔖 开源协议	MIT License
📂 仓库地址	https://github.com/JCodesMore/ai-website-cloner-template

AI Website Cloner Template 代表了一种全新的工作方式——你不再需要手动拆解网站、一个个写组件，而是把「需求」告诉 AI，AI 替你完成整个逆向工程和重建流程。

这就是 AI 时代的前端开发：你负责创意和方向，AI 负责执行和细节。

对于需要快速迁移网站、学习优秀网站实现方式、或者想快速出原型的开发者来说，这个工具值得一试