AI Website Cloner Template：一键克隆任意网站的开源神器

在日常开发中，我们经常需要参考或迁移某个网站的设计，但手动逆向工程往往费时费力。今天要介绍的这款开源项目——AI Website Cloner Template，号称能用一条命令把任意网站克隆成一个结构清晰的 Next.js 代码库，在 GitHub 上狂揽 2.6 万+ Star，连续多次登上 GitHub Trending 榜单。

📦 项目概述

AI Website Cloner Template 是一个基于 AI 编码代理的开源工具，只需一条命令即可克隆任意网站。

项目	信息
GitHub	https://github.com/JCodesMore/ai-website-cloner-template
Star 数	26,000+
作者	JCodesMore
许可证	MIT
技术栈	Next.js 16 + React 19 + TypeScript + Tailwind CSS v4

🚀 核心功能

只需给 AI 助手一条命令：

/clone-website <目标URL>

AI 会自动完成以下五个阶段的工作：

1️⃣ 侦察（Reconnaissance）

全页面截图（桌面端、移动端）
提取设计 Token（颜色、字体、间距）
识别技术栈（React/Vue/Angular、CSS 方案、动画库）

2️⃣ 资产提取（Asset Extraction）

下载所有图片、视频、SVG 图标
提取字体资源
下载 Favicon、OG 图片等 SEO 资产

3️⃣ 组件规范（Component Specification）

为每个页面区块编写详细的组件规范文档
记录精确的 CSS 值（而非估算）
记录交互行为（滚动驱动、点击驱动、悬停状态）

4️⃣ 并行构建（Parallel Build）

AI Agent 以工作树（worktree）模式并行构建各组件
每个 Agent 专注单一组件，确保还原度
最终合并到主分支

5️⃣ 质检验证（Quality Assurance）

TypeScript 类型检查
像素级视觉对比
交互行为测试

🛠️ 安装方法

环境要求

Node.js: ≥ 24
AI 编码助手：Claude Code / Cursor / VS Code 等
浏览器自动化工具：Chrome MCP / Playwright MCP 等

安装步骤

1. 克隆项目模板：

git clone https://github.com/JCodesMore/ai-website-cloner-template.git
cd ai-website-cloner-template
npm install

2. 启动开发服务器：

npm run dev

3. 在 AI 助手中输入：

/clone-website https://example.com

🎯 使用示例

克隆一个简单的博客网站：

/clone-website https://example.com

克隆多个网站（并行处理）：

/clone-website https://site1.com https://site2.com https://site3.com

📁 项目结构

克隆完成后，输出结构如下：

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/         # 侦察输出（设计 Token、组件规范）
  design-references/ # 截图和视觉参考
scripts/            # 资产下载脚本