一句“克隆这个网站”，AI帮你扒下整份源码——开源网站克隆模板-开发者社区

输入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.com

AI会：

截图分析，提取设计令牌（颜色、字体、间距）
滚动、点击、悬停，观察所有交互行为
下载所有图片、图标、视频资源
为每个页面区块写详细的组件规范
并行派遣多个“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`
谁适合	开发者做网站迁移、丢失源码恢复、学习设计实现、快速起步项目