AI Website Cloner Template 调研报告

一、项目概述

基本信息

一句话介绍

AI Website Cloner Template 是一个基于 AI 编码 Agent 的网站逆向工程模板，通过一条 /clone-website 命令，自动提取目标网站的设计令牌、资产和交互行为，并在 Git Worktree 中并行派发多个 Builder Agent 重建为像素级精确的 Next.js 代码。

发展历程

• 2026-03-13: 项目创建
• 2026-03-28 (v0.1.0): 初始发布 — Next.js 16 + shadcn/ui 脚手架、/clone-website 技能、Chrome MCP 集成、并行 Builder Agent、完整检查指南
• 2026-03-28 (v0.1.1): 修复 LICENSE、添加 Issue/PR 模板和 CHANGELOG
• 2026-03-28 (v0.2.0): 重大更新 — 支持 14 个 AI 编码 Agent 平台（Claude Code、Cursor、Windsurf、Gemini CLI、Codex、Copilot、Cline 等）、平台同步脚本
• 2026-03-29 (v0.3.0): 多 URL 支持（单次命令克隆多个网站）、CI 质量门禁、npm run check 脚本
• 2026-03-29 (v0.3.1): 修复 Windows 平台同步脚本的 CRLF 问题
• Unreleased: Node.js 基线提升到 24

定位

AI Website Cloner Template 自定位为 网站逆向工程的 AI Agent 模板，核心差异化：

1. 多 Agent 编排: 侦察→基础→规格→并行构建→组装，流水线式自动化
2. 像素级精确: 提取 getComputedStyle() 的精确值，不是猜测
3. 14 个平台支持: 覆盖几乎所有主流 AI 编码 Agent
4. Worktree 并行: 每个 Builder Agent 在独立 Git Worktree 中工作

二、核心功能

功能概览

核心功能详解

1. /clone-website 多阶段流水线（核心）

这是整个项目的核心——一个精心设计的多阶段克隆流水线：

Phase 1: 侦察 (Reconnaissance)
├── 全页截图（桌面 1440px + 手机 390px）
├── 全局提取（字体、颜色、Favicon）
├── 强制交互扫描（滚动/点击/悬停/响应式）
└── 页面拓扑映射
    │
Phase 2: 基础构建 (Foundation Build)
├── 更新 layout.tsx 字体
├── 更新 globals.css 设计令牌
├── 创建 TypeScript 类型
├── 提取 SVG 图标
├── 下载全局资产
└── 验证 npm run build 通过
    │
Phase 3: 组件规格 (Component Specs)
├── 为每个组件生成详细规格文件
├── 包含精确 CSS 值、交互模型、多状态内容
└── 保存到 docs/research/components/
    │
Phase 4: 并行构建 (Parallel Build)
├── 每个 Builder Agent 在独立 Worktree 中工作
├── 每个 Agent 接收完整的组件规格
├── 小任务原则（~150 行规格上限）
└── 每个 Agent 独立编译验证
    │
Phase 5: 组装 & QA (Assembly & QA)
├── 合并 Worktree
├── 组装页面
└── 与原始截图进行视觉对比

2. 设计令牌提取

GSD 从目标网站提取的精确设计信息：

3. 交互行为提取（差异化亮点）

这是该项目最大的差异化——不仅提取静态样式，还提取动态交互：

四种扫描类型:

提取的交互模式: - 滚动触发：导航栏收缩、背景变化、添加阴影 - 入场动画：淡入上升、滑入、交错延迟 - 滚动吸附：scroll-snap-type 区域 - 视差效果：不同速度移动的图层 - 悬停动画：包含过渡时间和缓动函数 - 下拉/模态/手风琴：进出动画 - 滚动驱动进度指示器 - 自动播放轮播 - 滚动驱动标签切换 - 平滑滚动库（Lenis、Locomotive Scroll）

交互模型识别（关键决策点）:

在编写任何构建器之前，必须确定交互模型： - 点击驱动？滚动驱动？悬停驱动？时间驱动？ - 错误识别交互模型意味着完全重写

4. 并行 Builder Agent

主 Agent（Foreman/工头角色）
├── Builder Agent A (Worktree 1) → Hero Section
├── Builder Agent B (Worktree 2) → Features Section
├── Builder Agent C (Worktree 3) → Pricing Section
└── Builder Agent D (Worktree 4) → Footer
    │
    └── 合并所有 Worktree → 最终页面

关键原则: - 完整性优于速度: 每个 Agent 必须收到所有需要的信息 - 小任务完美结果: 一个 Agent ~150 行规格内容，太复杂则拆分 - 规格文件是真相来源: 先写规格再派发，不是凭记忆 - 构建必须编译: 每个 Agent 完成后验证 npx tsc --noEmit

5. 14 个 AI 平台支持

同步机制: 两个真相来源文件驱动所有平台支持： - AGENTS.md → bash scripts/sync-agent-rules.sh → 生成平台特定指令 - .claude/skills/clone-website/SKILL.md → node scripts/sync-skills.mjs → 生成平台特定技能

三、安装配置

环境要求

安装

# 克隆模板
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone

# 安装依赖
npm install

# 启动 AI Agent（以 Claude Code 为例）
claude --chrome

# 运行克隆技能
/clone-website https://target-website.com

Docker 方式

# 生产构建
docker compose up app --build

# 开发模式（端口 3001）
docker compose up dev --build

四、架构设计

整体架构

┌──────────────────────────────────────────────────────────────────┐
│              AI Website Cloner Template 系统架构                   │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │              AI Agent 层（14 个平台）                       │   │
│  │  Claude Code │ Cursor │ Windsurf │ Gemini CLI │ Codex ... │   │
│  └──────────────────────────┬───────────────────────────────┘   │
│                             │ /clone-website 技能                │
│  ┌──────────────────────────▼───────────────────────────────┐   │
│  │              浏览器 MCP 层                                  │   │
│  │  Chrome MCP │ Playwright MCP │ Browserbase MCP             │   │
│  └──────────────────────────┬───────────────────────────────┘   │
│                             │                                    │
│  ┌──────────────────────────▼───────────────────────────────┐   │
│  │              五阶段克隆流水线                                │   │
│  │  ┌────────┐ ┌──────────┐ ┌────────┐ ┌────────┐ ┌─────┐  │   │
│  │  │侦察    │→│基础构建  │→│组件规格│→│并行构建│→│QA   │  │   │
│  │  │Recon   │ │Foundation│ │Specs   │ │Parallel│ │Assem│  │   │
│  │  └────────┘ └──────────┘ └────────┘ └────────┘ └─────┘  │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │              技术栈（Next.js 16）                           │   │
│  │  React 19 │ TypeScript │ shadcn/ui │ Tailwind CSS v4      │   │
│  │  oklch 设计令牌 │ Radix 原语 │ Lucide Icons               │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │              输出层                                         │   │
│  │  docs/research/     → 设计令牌 + 组件规格 + 行为文档        │   │
│  │  docs/design-refs/  → 截图参考                             │   │
│  │  src/               → 最终 Next.js 代码                    │   │
│  │  public/            → 下载的资产（图片/视频/SVG）            │   │
│  └──────────────────────────────────────────────────────────┘   │
└──────────────────────────────────────────────────────────────────┘

项目结构

ai-website-cloner-template/
├── 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/               # 提取输出和组件规格
│   │   ├── INSPECTION_GUIDE.md # 检查指南
│   │   ├── components/         # 组件规格文件
│   │   └── <hostname>/         # 多 URL 时的站点隔离
│   └── design-references/      # 截图和视觉参考
├── scripts/
│   ├── sync-agent-rules.sh     # 同步平台指令文件
│   └── sync-skills.mjs         # 同步技能到所有平台
├── AGENTS.md                   # Agent 指令（真相来源）
├── CLAUDE.md                   # Claude Code 配置
├── GEMINI.md                   # Gemini CLI 配置
├── package.json                # 项目配置
├── Dockerfile                  # 生产 Docker
├── Dockerfile.dev              # 开发 Docker
└── docker-compose.yml          # Docker Compose

核心技术选型

五、使用场景

适用场景

不适用场景

• 钓鱼或冒充: 项目明确禁止用于欺骗目的
• 盗用他人设计: 标志、品牌资产和原创文案归原所有者
• 违反服务条款: 部分网站明确禁止抓取或复制
• 需要后端功能: 模板只克隆前端视觉，不包含真实后端

六、对比分析

AI Website Cloner vs screenshot-to-code

AI Website Cloner vs v0 (Vercel)

AI Website Cloner vs bolt.new

AI Website Cloner vs websim.ai

选型建议

• 选择 AI Website Cloner: 需要精确克隆现有网站、平台迁移、学习网站实现
• 选择 screenshot-to-code: 快速将设计稿转为代码概念
• 选择 v0: 从文字描述生成 UI、快速原型
• 选择 bolt.new: 从零开始的全栈 AI 开发

七、最佳实践

推荐做法

1. 使用 Claude Code + Opus 4.6: 项目推荐的最佳组合，效果最好
2. 先跑完整流水线: 不要跳过交互扫描，这是最大的差异化
3. 保持组件粒度小: 一个 Agent 不超过 ~150 行规格，太复杂就拆分
4. 先克隆再定制: 先完成 1:1 克隆，再进行个性化修改
5. 使用 --chrome 模式: Claude Code 的 Chrome 集成提供最佳浏览器 MCP 体验
6. 检查生成的规格文件: docs/research/components/ 是可审计的产出物

避坑指南

1. 不要跳过交互扫描: 静态截图无法捕获动画和交互，会导致克隆"看着对但用着错"
2. 不要让 Agent 猜测: 如果 Builder 需要猜测颜色或间距，说明提取不完整
3. 注意分层资产: 一个看起来像一张图的区域，可能是背景 + 前景 + 叠加层
4. 交互模型识别: 点击驱动 vs 滚动驱动搞错意味着完全重写
5. 验证构建: 每个 Builder 完成后必须 npx tsc --noEmit 通过

八、总结

优势

1. 像素级精确: 通过 getComputedStyle() 提取精确值，而非 AI 猜测
2. 完整交互提取: 滚动/点击/悬停/响应式四种扫描，确保克隆"活着"
3. 多 Agent 并行: Worktree 隔离并行构建，效率高
4. 14 个平台支持: 覆盖几乎所有主流 AI 编码 Agent
5. 生产级技术栈: Next.js 16 + React 19 + shadcn/ui + Tailwind v4
6. 详细规格文件: 每个组件生成可审计的规格文档
7. 快速迭代: 18 天内从 v0.1.0 到 v0.3.1，活跃开发
8. 社区热度: 6,252 Stars，增长迅速

劣势

1. 项目极年轻: 2026 年 3 月 13 日创建，仅 18 天历史
2. 依赖浏览器 MCP: 必须有 Chrome/Playwright MCP，否则无法工作
3. 强依赖 AI 模型质量: Opus 4.6 推荐但成本高，其他模型效果可能打折
4. 仅前端克隆: 不包含后端功能、数据库、API 等
5. Token 消耗大: 多 Agent 并行 + 详细规格生成消耗大量 Token
6. Node.js 24 要求: 较新的 Node.js 版本要求，可能影响兼容性

最终建议

AI Website Cloner Template 在"AI + 网站克隆"领域找到了一个非常实用的切入点——通过浏览器 MCP 精确提取设计令牌和交互行为，再通过多 Agent 并行构建像素级精确的 Next.js 代码。

• 推荐使用: 需要精确克隆网站、平台迁移、学习网站前端实现的开发者
• 观望: 需要 IDE 集成、后端功能、非 Next.js 技术栈的用户
• 关注趋势: 该项目代表的"AI Agent + 浏览器自动化 + 并行构建"模式，是 AI 辅助前端开发的重要方向

参考资料

• GitHub 仓库: https://github.com/JCodesMore/ai-website-cloner-template
• YouTube Demo: https://youtu.be/O669pVZ_qr0
• Discord 社区: https://discord.gg/hrTSX5yTpB
• 作者主页: https://dsc.gg/jcodesmore
• 相关技术: Chrome MCP, screenshot-to-code, v0 (Vercel), bolt.new