AI网站克隆模板

1. 项目概述

ai-website-cloner-template 是一个开源的GitHub模板，让AI编程智能体仅凭一个目标URL就能将任何现有网站重建为干净、现代的Next.js应用——解决了无需手动逆向工程标记、样式和资源即可重建网站界面的问题。

2. 背景与定位

该项目旨在将"克隆这个网站"从多天的手动逆向工程任务转变为有引导、高度自动化的AI工作流。该模板不再让开发人员手动复制HTML/CSS、寻找字体和图标、逐像素比对差异，而是封装了一个可重复的五阶段流水线——侦察、基础搭建、组件规格、并行构建和QA——由AI智能体逐步执行，生成结构化、类型化的Next.js代码库，而非一次性的抓取快照。

与通用的网页抓取或"下载此页面"工具相比，该项目不仅捕获静态HTML——它还驱动AI智能体进行设计令牌提取（字体、颜色、断点）、资源下载（图片、视频、SVG图标），并使用TypeScript配合shadcn/ui和Tailwind CSS进行组件级重建，然后通过与原始网站的视觉差异比对来验证结果。它还与智能体无关，对Claude Code提供一流支持，并为其他十几种AI编程智能体提供配置，而非绑定于单一供应商的工具。

3. 功能分类

🔍 侦察工具 — 3项核心能力：整页截图捕获、设计令牌提取和交互/状态映射。目的：在编写任何代码之前建立对源网站的准确认知。
🏗️ 基础搭建 — 涵盖字体和颜色配置、全局Tailwind/Next.js设置以及批量资源下载（图片、视频、SVG）。目的：建立后续组件所依赖的基础项目脚手架。
🧩 组件规格 — 为每个组件生成包含计算CSS值、响应式状态和交互行为的文档。目的：为构建阶段提供无歧义、机器可读的规格说明。
⚙️ 并行构建 — 将组件构建分发到隔离的git工作树中，使UI的多个部分可以并发实现。目的：加速大型多组件网站的重建。
✅ 组装与QA — 集成已构建的组件，并与原始网站进行视觉差异比对。目的：在克隆被认为完成之前捕获布局、间距和样式回归。

4. 核心亮点

AI智能体驱动流水线 — 结构化的五阶段流程（侦察→基础→规格→构建→QA）用可重复的工作流取代了临时的手动克隆。
多智能体兼容性 — 支持Claude Code（推荐，搭配Opus级模型）、Codex CLI、Cursor、Windsurf、Gemini CLI、GitHub Copilot、Cline、Roo Code、Continue、Amazon Q、Augment Code、Kiro和OpenCode。
现代、类型化输出 — 生成Next.js 16 + React 19 + TypeScript（严格模式）代码库，而非原始抓取的HTML。
设计系统保真度 — 将真实设计令牌（字体、颜色、断点）提取到Tailwind CSS v4中，使用oklch颜色值，并基于shadcn/ui + Radix原语构建UI。
自动化资源处理 — 自动下载图片和视频并提取SVG图标，由Lucide React为任何缺失的默认图标提供支持。
视觉差异验证 — QA阶段将完成的克隆与原始网站进行比较以验证准确性，而非依赖肉眼检查。

5. 按角色的使用场景

普通开发人员 — 快速搭建现有网站设计的现代、可维护的Next.js版本，而非从头构建布局。
项目经理/技术负责人 — 通过更快、结构化的概念验证路径，评估将遗留站点迁移到当前技术栈（Next.js、TypeScript、Tailwind）的可行性。
学生/自学者 — 通过让智能体将生产网站拆解为可检查的组件，研究其如何实现特定布局、动画和响应式行为。

（不直接适用于DevOps/SRE、安全工程或数据/科研工作流，因此省略。）

6. 快速开始

查找所需内容 — 阅读README以及运行侦察阶段后在docs/research/下生成的文档，以了解提取输出和组件规格。

安装/集成

# 1. 在GitHub上点击"Use this template"创建自己的仓库，然后：
git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
cd YOUR-REPO
npm install

# 2. 启动AI编程智能体（以Claude Code为例，--chrome启用浏览器访问）
claude --chrome

# 3. 在智能体会话中运行克隆技能
/clone-website <target-url>

# 日常脚本
npm run dev     # 启动开发服务器
npm run build   # 生产构建
npm run check   # 代码检查、类型检查和构建组合

贡献 — 分叉仓库，在功能分支上进行更改，并按照项目MIT许可、开放贡献模式向JCodesMore/ai-website-cloner-template提交拉取请求。

7. 项目结构

src/
  app/              # Next.js路由
  components/       # React/TypeScript UI组件
  hooks/, types/, utils/
public/
  images/, videos/  # 下载的网站资源
  seo/              # SEO相关资源
docs/
  research/         # 侦察输出与组件规格
.cline/ .kiro/ .roo/ # 平台特定的AI智能体配置

关键项：docs/research/保存侦察和规格阶段产生的产物（截图、设计令牌、组件规格），供后续阶段使用；平台特定的点目录（.cline/、.kiro/、.roo/等）允许同一模板由不同的AI编程智能体驱动，而无需更改核心项目。

8. 相关生态

上游依赖：Next.js 16、React 19、TypeScript、Tailwind CSS v4、shadcn/ui、Radix UI原语、Lucide React图标、Node.js 24+。
集成的AI编程智能体：Claude Code、Codex CLI、Cursor、Windsurf、Gemini CLI、GitHub Copilot、Cline、Roo Code、Continue、Amazon Q、Augment Code、Kiro、OpenCode。
互补用途：克隆完成后，自然与标准Next.js部署平台（如Vercel）搭配使用。

9. 许可证

MIT许可证。

✅ 可自由使用、复制、修改、合并、发布和分发代码，包括商业项目。
✅ 使用该模板迁移自己的遗留站点或学习网站的构建方式。
❌ 不得将该工具用于欺骗目的、冒充他人或任何违法活动——项目指南明确禁止此类行为。
ℹ️ MIT按"原样"提供软件，不附带任何担保；在再分发的副本中保留原始许可证和版权声明。

10. 常见问题

问：使用此工具是否需要付费的AI编程智能体订阅？
答：您需要访问受支持的AI编程智能体（推荐Claude Code，搭配Opus级模型）；大多数其他受支持的智能体如Cursor或Gemini CLI也可用，各自按自己的定价方案。

问：如果我只想要静态副本，而不是完整的Next.js重建怎么办？
答：此模板专门设计用于输出结构化的Next.js/TypeScript代码库，而非静态HTML快照——如果您只需要原始HTML，更简单的抓取工具可能更合适。

问：使用此工具克隆任何网站是否合法？
答：您对自己克隆内容的合法性负责；该项目明确禁止欺骗或冒充用途，因此请仅克隆您拥有、获得许可或用于个人学习的网站。

问：我应该查看哪个目录来了解AI智能体提取了什么？
答：侦察阶段后查看docs/research/——其中包含后续构建阶段使用的设计令牌、截图和组件规格。

问：我可以使用Claude Code以外的智能体吗？
答：可以——该模板为十多种智能体（Codex CLI、Cursor、Windsurf、Gemini CLI、GitHub Copilot等）提供了配置，但推荐使用Claude Code搭配Opus级模型。

11. 快速链接

仓库：https://github.com/JCodesMore/ai-website-cloner-template
许可证：MIT（见仓库LICENSE文件）
贡献：向仓库默认分支提交拉取请求
社区/讨论：使用仓库的GitHub Issues/Discussions标签页

12. 总结

ai-website-cloner-template将网站克隆转变为结构化的、AI智能体驱动的流水线，输出现代、类型化的Next.js代码库，而非抓取的HTML转储。它对于将遗留站点迁移到当前技术栈、恢复已部署站点的源代码或研究生产布局构建方式的开发人员和团队最有价值——任何希望获得忠实、可维护的重建而无需手动逆向工程每个组件的人。