AI Website Cloner：一条命令克隆任意网站

AI Website Cloner 是一个开源的 Next.js 模板项目，由开发者 JCodesMore 创建。它的核心能力可以用一句话概括：给 AI 一个 URL，让它帮你把任意网站反向工程成干净的 Next.js 代码库。

项目在 GitHub 上已经获得了超过 22,000 个 star 和 3,000 多次 fork，是近期 AI 开发工具领域最受关注的项目之一。

核心能力：一条命令克隆网站

使用流程极其简单：

1. 在 GitHub 上点击 Use this template 创建自己的仓库副本
2. 本地安装依赖：npm install
3. 启动 AI Agent（推荐 Claude Code）：claude --chrome
4. 运行克隆命令：/clone-website <目标网址>

AI Agent 会自动完成从侦察到构建的全流程，最终输出一个像素级还原的克隆站点。

技术栈

• Next.js 16 — App Router、React 19、TypeScript strict 模式
• shadcn/ui — Radix 基础组件 + Tailwind CSS v4
• Tailwind CSS v4 — oklch 设计令牌体系
• Lucide React — 默认图标库（克隆过程中会被提取的 SVG 替换）

克隆流水线：五阶段工作流

这个项目的真正价值不在于技术栈选择，而在于它定义了一套可复用的 AI 驱动克隆流水线：

1. 侦察阶段（Reconnaissance）

AI Agent 首先对目标网站进行全面扫描：

• 截取桌面端（1440px）和移动端（390px）的全页截图
• 提取设计令牌：颜色、字体、间距、圆角、阴影
• 遍历交互行为：滚动、点击、悬停、响应式断点
• 识别全局 UI 模式：自定义滚动条、scroll-snap、平滑滚动库（如 Lenis）

2. 基础构建（Foundation）

更新全局配置：

• 在 layout.tsx 中配置目标站点的实际字体
• 在 globals.css 中写入目标站点的颜色令牌和动画关键帧
• 提取所有内联 SVG 图标，转换为 React 组件存到 src/components/icons.tsx
• 下载所有图片、视频等静态资源到 public/ 目录

3. 组件规格编写（Component Specs）

这是整个流程中最关键的一步。AI Agent 会为每个页面区域编写详细的规格文件，存放在 docs/research/components/ 目录下。

规格文件包含：

• 精确的 getComputedStyle() CSS 值
• 交互模型（点击驱动 / 滚动驱动 / 悬停驱动）
• 多状态样式（默认态、悬停态、激活态、滚动触发态）
• 响应式断点行为
• 内容文本和资产路径

4. 并行构建（Parallel Build）

项目采用工头+并行建筑队的协作模式：

• 主 Agent 作为「工头」，负责侦察和规格编写
• 每个组件/区域由一个独立的 builder Agent 在 git worktree 中并行构建
• 每个 builder 收到完整的规格文件作为输入，无需猜测任何样式值

这种并行策略解决了单 Agent 处理复杂页面时「细节被 gloss over」的问题。当 Agent 接到「构建整个功能区域」的任务时，它往往会近似处理间距、猜测字体大小；但当它只负责一个单一组件且收到精确 CSS 值时，它能做到像素级还原。

5. 组装与质检（Assembly & QA）

合并所有 worktree 的工作成果，连接页面结构，最后运行视觉对比测试验证还原度。

支持的平台

项目原生支持 11 个主流 AI Coding Agent：

适用场景

• 平台迁移 — 将 WordPress / Webflow / Squarespace 站点重建为现代 Next.js 代码库
• 源码丢失 — 网站还在运行，但原始仓库丢失或开发者离职
• 学习解构 — 通过实际代码理解生产级网站如何实现特定布局和动画效果

项目边界

作者明确声明了不适用场景：

• ❌ 钓鱼或冒充 — 禁止用于欺骗目的
• ❌ 盗用设计 — Logo、品牌资产和原创文案归原所有者所有
• ❌ 违反服务条款 — 部分网站明确禁止抓取或复制

文件结构

src/
  app/              # Next.js 路由
  components/       # React 组件
    ui/             # shadcn/ui 基础组件
    icons.tsx       # 提取的 SVG 图标
  lib/utils.ts      # cn() 工具函数
  types/            # TypeScript 接口
  hooks/            # 自定义 React hooks
public/
  images/           # 从目标站下载的图片
  videos/           # 从目标站下载的视频
  seo/              # Favicon、OG 图片
docs/
  research/         # 提取输出和组件规格
  design-references/ # 截图和视觉参考
scripts/
  sync-agent-rules.sh  # 重新生成 Agent 指令文件
  sync-skills.mjs      # 为所有平台重新生成 /clone-website skill

两条「单一事实来源」

项目维护了两条自动化同步链路：

编辑源文件后运行对应脚本，即可自动重新生成所有平台特定的副本。