一句“克隆这个网站”,AI帮你扒下整份源码——开源网站克隆模板

输入URL，AI自动拆解设计、提取资源、生成Next.js代码 不用手写一行HTML，不用F12一点点抠 Claude Code + Opus 4.7效果最佳

🧱 先看痛点：看到一个好网站，想“复制”它的设计，有多难？

你是一个开发者、设计师、或者创业者。

你看到一个网站——布局干净、交互流畅、响应式完美——你想在你自己项目里用类似的风格，或者你想把客户的老旧WordPress站点迁移到现代技术栈。

你的选择：

核心矛盾：

网站的设计是“看得见但摸不着”的——你能看到效果，但拿不到可维护的源码。想“复用”一个设计，要么从零手写，要么花大价钱外包。

✅ AI Website Cloner 的解法

这是一个可复用的AI网站克隆模板——给AI编程助手用的“克隆网站”技能包。

一句话：给AI一个URL，它自动拆解网站，生成干净、现代的Next.js代码库

# 在自己的项目里启动git clone 你复制的仓库npm install# 启动AI编程助手（推荐Claude Code + Opus 4.7）claude --chrome# 在AI里输入/clone-website https://example.com

AI会：

1. 截图分析，提取设计令牌（颜色、字体、间距）
2. 滚动、点击、悬停，观察所有交互行为
3. 下载所有图片、图标、视频资源
4. 为每个页面区块写详细的组件规范
5. 并行派遣多个“Builder Agent”同时生成代码
6. 合并、组装、与原网站做视觉对比

你得到的是一个完整的、可运行的Next.js项目，不是一堆静态HTML。

🔥 它解决了什么？

1. “看得见拿不到” vs “AI帮你扒源码”

2. “老网站搬不动” vs “一键现代化迁移”

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
• 组装完整页面
• 与原网站做视觉对比
• 修复差异

🚀 怎么用？

第一步：创建你自己的仓库

1. 到GitHub项目主页，点击 Use this template → Create a new repository
2. 给你的新仓库起个名字
3. 点击 Create repository

⚠️ 重要：不要直接克隆这个模板仓库来用。先“Use this template”创建你自己的副本。也不要往这个模板仓库里提PR提交你生成的网站。

第二步：克隆你的新仓库

git clone https://github.com/你的用户名/你的新仓库.gitcd 你的新仓库

第三步：安装依赖

npm install

第四步：启动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/ 目录下，可以直接运行：

npm run dev

🎯 谁最适合用？

一个典型的“迁移”场景

问题：你的客户有一个运行了5年的WordPress网站，内容多、页面多、设计复杂。客户想迁移到Next.js+Vercel，体验更好、速度更快。

传统做法：从零重建所有页面——设计稿还原、写代码、调响应式……以周计。

用这个模板：

1.  /clone-website https://client-site.com
2. AI分析所有页面，生成Next.js代码
3. 你检查生成结果，做定制修改（把WordPress内容接入CMS）
4. 部署上线

时间：从几周缩短到几天。

🛠️ 技术栈

⚠️ 重要提醒

合法使用边界

这个工具是技术性的“逆向工程”辅助工具。使用前请考虑：

一句话：用这个工具复制你可以合法使用的设计。不要用它做侵权的事。

🔗 链接

• GitHub
  ：github.com/JCodesMore/ai-website-cloner-template
• 许可证
  ：MIT
• 演示视频
  ：YouTube链接（项目README里有）

✅ 总结

AI Website Cloner Template —— 让网站“克隆”，从“手抄”变成“AI自动生成”。MIT协议，开源免费。

全文完。既然已经看到这里，请随手点个“赞”和“在看”吧。

◆ 发愿：四十如年少◆

公众号：为郎

更多项目实战部署、问题答疑尽在知识星球：