ai-website-cloner-template：基于 AI 编码代理的一键网站克隆模板

这是什么

JCodesMore/ai-website-cloner-template 是一个基于 TypeScript 的开源模板项目，旨在利用 AI 编程代理（AI Coding Agents）将任意网站逆向工程为干净、现代化的 Next.js 代码库。

该项目并非一个直接运行的网站克隆工具，而是一个工作流模板。它通过定义标准化的指令和结构，引导 AI 代理（如 Claude Code、Gemini CLI 等）执行从视觉分析到代码生成的完整流水线。目前该项目在 GitHub 上已获得约 17,429 颗星，主要因其解决了将现有网站迁移至现代前端栈的痛点。

推荐使用的 AI 代理为 Claude Code（配合 Opus 模型效果最佳），但也兼容多种其他 AI 编程工具。

解决的问题

在传统的前端开发或网站迁移场景中，存在以下核心痛点：

1. 遗留系统迁移困难：许多企业网站仍运行在 WordPress、Webflow 或 Squarespace 等平台上，或者原始代码库丢失、开发者离职，导致难以维护或无法迁移到现代技术栈。
2. 逆向工程成本高：手动分析现有网站的布局、样式、交互逻辑并重构为 React/Next.js 组件需要大量时间，且容易遗漏细节（如特定的 CSS 计算值、响应式断点）。
3. 设计还原精度不足：传统的截图或简单复制粘贴无法保留复杂的交互状态、动态样式和组件规范，导致重建后的网站在视觉和体验上与原版存在偏差。

该项目通过自动化“侦察-规范-构建-组装”的流程，解决了将非标准或遗留网站快速、高精度地转换为可维护的 Next.js 代码库的问题。

核心功能

该项目的核心在于其多阶段（Multi-phase）的自动化流水线，由 /clone-website 技能驱动：

1. 侦察阶段 (Reconnaissance)：

   • 对目标 URL 进行截图。
   • 提取设计令牌（Design Tokens），包括颜色、字体、间距等。
   • 执行交互扫描，覆盖滚动、点击、悬停及响应式行为。

2. 基础构建 (Foundation)：

   • 更新全局样式、字体和颜色配置。
   • 下载并整理所有静态资源（图片、视频）。

3. 组件规范生成 (Component Specs)：

   • 生成详细的规范文件（位于 docs/research/components/）。
   • 包含精确的 getComputedStyle() 计算值、状态定义、行为逻辑及内容结构。
   • 确保 AI 代理无需猜测，直接基于精确数据构建。

4. 并行构建 (Parallel Build)：

   • 利用 Git Worktrees 技术，分发多个 Builder 代理并行工作。
   • 每个代理负责一个特定的板块或组件，接收完整的组件规范。

5. 组装与 QA (Assembly & QA)：

   • 合并各个工作树的代码。
   • 连接页面路由。
   • 运行视觉差异对比（Visual Diff），确保重建结果与原始网站一致。

技术栈详情：

• 框架：Next.js 16 (App Router), React 19, TypeScript (Strict Mode)。
• UI 库：shadcn/ui (基于 Radix Primitives + Tailwind CSS v4)。
• 样式：Tailwind CSS v4 (使用 oklch 设计令牌)。
• 图标：Lucide React (克隆过程中会被提取的 SVG 替换)。

亮点 / 与同类相比

• 精确度优先：与简单的“网页转代码”工具不同，该项目强调提取精确的 CSS 计算值和交互模型。AI 代理不是基于模糊描述生成代码，而是基于包含 getComputedStyle 值的详细规范文件进行构建。
• 并行工程架构：利用 Git Worktrees 实现并行构建，显著提高了大型复杂网站的克隆效率，避免了单线程构建的性能瓶颈。
• 平台无关性：虽然推荐 Claude Code，但通过 AGENTS.md 这一单一事实来源（Single Source of Truth），可以轻松同步配置给 Gemini CLI 等其他代理，具有良好的扩展性。
• 现代化输出：生成的代码直接符合现代前端最佳实践（Next.js App Router, React 19, Tailwind v4），而非过时的类组件或旧版样式方案。
• 合规与安全警示：项目明确禁止用于网络钓鱼、冒充他人或违反服务条款的行为，强调了合法使用场景（如迁移自有网站、学习布局技术）。

适合谁用 / 上手

适合人群：

• 前端开发者：需要将老旧网站、WordPress 站点或丢失源码的网站迁移到 Next.js 技术栈。
• 技术学习者：希望深入理解生产级网站如何实现特定布局、动画和响应式行为，通过逆向工程学习真实代码。
• 独立开发者：希望快速原型化一个现有网站的设计，并在此基础上进行二次开发。

上手步骤：

1. 创建仓库：

   • 在 GitHub 上点击 "Use this template" 创建你自己的仓库。不要直接 clone 主仓库，以免产生冲突或污染主项目。
   • 在本地克隆你创建的仓库：

     git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
     cd YOUR-NEW-REPOSITORY
     

2. 安装依赖：

   npm install
   

3. 启动 AI 代理：

   • 推荐使用 Claude Code：

     claude --chrome
     

   • 其他代理请参考 AGENTS.md 中的说明。

4. 执行克隆指令： 在 AI 代理终端中运行：

   /clone-website <target-url1> [<target-url2> ...]
   

5. 自定义与开发：

   • 克隆完成后，代码将生成在 src/ 目录下。
   • 你可以像普通 Next.js 项目一样启动开发服务器：

     npm run dev
     

   • 根据需求修改组件、样式或逻辑。

注意事项：

• 确保使用 Node.js 24+ 版本。
• 尊重版权和 Terms of Service，仅克隆你拥有所有权或获得授权访问的网站。