输入URL，AI自动拆解设计、提取资源、生成Next.js代码
不用手写一行HTML，不用F12一点点抠
Claude Code + Opus 4.7效果最佳
🧱 先看痛点：看到一个好网站，想“复制”它的设计，有多难？
你是一个开发者、设计师、或者创业者。
你看到一个网站——布局干净、交互流畅、响应式完美——你想在你自己项目里用类似的风格，或者你想把客户的老旧WordPress站点迁移到现代技术栈。
你的选择：
| 方案 | 问题 |
|---|---|
| 手动F12抄代码 | 极度耗时，容易抄错，而且抄来的是打包后的代码，难以维护 |
| 截图照着画 | 只能看表面，不知道间距、颜色值、字体大小、动画参数 |
| 用网页下载工具 | 下载的是静态HTML/CSS，不是可维护的React组件代码 |
| 请人重建 | 几千到几万块，时间1-4周 |
核心矛盾：
网站的设计是“看得见但摸不着”的——你能看到效果，但拿不到可维护的源码。想“复用”一个设计，要么从零手写，要么花大价钱外包。
✅ AI Website Cloner 的解法
这是一个可复用的AI网站克隆模板——给AI编程助手用的“克隆网站”技能包。
一句话：给AI一个URL，它自动拆解网站，生成干净、现代的Next.js代码库
# 在自己的项目里启动gitclone 你复制的仓库npminstall# 启动AI编程助手（推荐Claude Code + Opus 4.7）claude--chrome# 在AI里输入/clone-website https://example.comAI会：
- 截图分析，提取设计令牌（颜色、字体、间距）
- 滚动、点击、悬停，观察所有交互行为
- 下载所有图片、图标、视频资源
- 为每个页面区块写详细的组件规范
- 并行派遣多个“Builder Agent”同时生成代码
- 合并、组装、与原网站做视觉对比
你得到的是一个完整的、可运行的Next.js项目，不是一堆静态HTML。
🔥 它解决了什么？
1. “看得见拿不到” vs “AI帮你扒源码”
| 手动方式 | 这个模板 | |
|---|---|---|
| 获取设计信息 | F12一点点查 | ✅ AI自动提取所有计算样式 |
| 提取资源 | 手动下载 | ✅ 自动下载所有图片/视频 |
| 生成代码 | 手写 | ✅ AI生成React/Next.js组件 |
| 时间 | 几天到几周 | 几十分钟到几小时 |
| 结果 | 可能不完整 | ✅ 完整的、可运行的项目 |
2. “老网站搬不动” vs “一键现代化迁移”
| 手动迁移（WordPress→Next.js） | 用这个模板 | |
|---|---|---|
| 工作内容 | 新建项目、重写所有页面、重做所有样式 | AI自动分析、生成代码 |
| 设计还原度 | 依赖个人眼力 | ✅ AI用计算样式精确还原 |
| 响应式 | 要自己调 | ✅ 自动提取断点配置 |
| 维护性 | 取决于代码质量 | ✅ 生成现代React组件，可维护 |
3. “一个人啃” vs “AI并行建队”
传统方式：你一个人从头到尾写。
这个模板：AI在后台创建多个“Builder Agent”，每个负责一个页面区块，并行工作，最后合并。
你的指令: /clone-website https://example.com │ ▼ Reconnaissance Agent（侦察）——截图、提取样式、分析交互 │ ▼ Foundation Agent（基础）——更新字体、颜色、全局样式、下载资源 │ ▼ Component Specs（规范生成）——为每个区块写详细规格文档 │ ▼ ┌─────┬─────┬─────┬─────┬─────┐ │ B1 │ B2 │ B3 │ B4 │ B5 │ 并行Builder Agents └──┬──┴──┬──┴──┬──┴──┬──┴──┬──┘ │ │ │ │ │ └─────┴──┬──┴─────┘ │ ▼ │ Assembly + QA（合并+视觉对比） ▼ 完整的Next.js代码库📦 工作流程（五阶段）
第1阶段：侦察（Reconnaissance）
- 截取全页面截图
- 提取所有计算样式（
getComputedStyle()）：颜色值、字体大小、间距、边框、阴影 - 执行交互扫描：滚动、点击、悬停、响应式断点
- 生成设计令牌文档
第2阶段：基础（Foundation）
- 更新
globals.css：颜色、字体、间距变量 - 配置字体加载
- 下载所有图片到
public/images/ - 下载所有视频到
public/videos/ - 提取SVG图标到
components/icons.tsx
第3阶段：组件规范（Component Specs）
- 为每个页面区块生成详细规格文件
- 包含：精确的CSS值、交互状态、行为逻辑、响应式断点、资源路径
- 存在
docs/research/components/
Builder Agent拿到的是完整规格，不是“参考图片”——不需要猜。
第4阶段：并行构建（Parallel Build）
- 在Git worktree中创建多个独立的Builder Agent
- 每个负责一个区块/组件
- 并行生成代码
- 互不干扰
第5阶段：组装与QA（Assembly & QA）
- 合并所有worktree
- 组装完整页面
- 与原网站做视觉对比
- 修复差异
🚀 怎么用？
第一步：创建你自己的仓库
- 到GitHub项目主页，点击Use this template→Create a new repository
- 给你的新仓库起个名字
- 点击Create repository
⚠️重要：不要直接克隆这个模板仓库来用。先“Use this template”创建你自己的副本。也不要往这个模板仓库里提PR提交你生成的网站。
第二步：克隆你的新仓库
gitclone https://github.com/你的用户名/你的新仓库.gitcd你的新仓库第三步：安装依赖
npminstall第四步：启动AI编程助手
推荐：Claude Code + Opus 4.7（效果最好）
claude--chrome第五步：运行克隆命令
/clone-website https://你要克隆的网站.com如果克隆多个页面：
/clone-website https://example.com https://example.com/about第六步：等AI完成，得到一个Next.js项目
生成的代码在src/目录下，可以直接运行：
npmrun dev🎯 谁最适合用？
| 人群 | 为什么适合 |
|---|---|
| 开发者（网站迁移） | 把WordPress/Webflow/Squarespace老站点迁移到Next.js，不用重写所有页面 |
| 丢失源码的团队 | 网站还在线上，但源码丢了、开发者走了——用AI把代码“扒”回来 |
| 想学习生产级设计的人 | 看看真实生产网站怎么实现特定布局、动画、响应式——用AI拆解成可读的React代码 |
| 前端开发者快速起步 | 看到好的设计，想要一个干净的起点，不用从空白项目开始 |
| 接外包/做项目的自由职业者 | 客户给了一个“参考网站”，快速生成初始代码，再定制修改 |
一个典型的“迁移”场景
问题：你的客户有一个运行了5年的WordPress网站，内容多、页面多、设计复杂。客户想迁移到Next.js+Vercel，体验更好、速度更快。
传统做法：从零重建所有页面——设计稿还原、写代码、调响应式……以周计。
用这个模板：
/clone-website https://client-site.com- AI分析所有页面，生成Next.js代码
- 你检查生成结果，做定制修改（把WordPress内容接入CMS）
- 部署上线
时间：从几周缩短到几天。
🛠️ 技术栈
| 工具 | 用途 |
|---|---|
| Next.js 16 | React框架，App Router，React 19 |
| TypeScript (strict) | 类型安全 |
| shadcn/ui | UI组件基元 + Tailwind CSS v4 |
| Tailwind CSS v4 | 样式系统（oklch颜色空间） |
| Lucide React | 默认图标（克隆时会替换成提取的SVG） |
⚠️ 重要提醒
合法使用边界
这个工具是技术性的“逆向工程”辅助工具。使用前请考虑：
| ✅ 可以 | ❌ 不应该 |
|---|---|
| 克隆你自己拥有的网站 | 克隆他人的网站用于仿冒或诈骗 |
| 克隆你被授权使用的开源项目 | 将他人的品牌Logo、设计据为己有 |
| 用于学习、研究、个人项目 | 违反目标网站的服务条款（有些明确禁止爬取） |
| 为客户迁移他们自己拥有的网站 | 未经许可复制他人的商业设计 |
一句话：用这个工具复制你可以合法使用的设计。不要用它做侵权的事。
🔗 链接
- GitHub：github.com/JCodesMore/ai-website-cloner-template
- 许可证：MIT
- 演示视频：YouTube链接（项目README里有）
✅ 总结
| 层次 | 核心内容 |
|---|---|
| 解决了什么 | 网站看得见但拿不到源码。AI自动提取设计、资源、生成现代代码库 |
| 核心能力 | ①侦察提取设计令牌 ②下载资源 ③组件规格生成 ④并行Builder ⑤视觉对比QA |
| 怎么用 | Use this template →npm install→ 启动AI →/clone-website URL |
| 谁适合 | 开发者做网站迁移、丢失源码恢复、学习设计实现、快速起步项目 |
AI Website Cloner Template—— 让网站“克隆”，从“手抄”变成“AI自动生成”。
MIT协议，开源免费。