AI Website Cloner使用教程

AYBIAO
AYBIAO
  • 8 次浏览

使用 Claude Code 快速克隆任意网站为像素级完美的 Next.js 项目

功能概述

AI Website Cloner 是一个 Claude Code 技能，可以：

  • 自动分析目标网站的视觉设计、布局、颜色、字体
  • 提取所有 CSS 样式值（精确到 px）
  • 识别交互行为（滚动、悬停、点击等）
  • 并行调度 Builder Agent 在独立 worktree 中构建各个组件
  • 最终输出一个可运行的 Next.js 网站克隆

前置要求

  • Node.js 20+
  • Claude Code CLI
  • 浏览器自动化 MCP（已配置 @playwright/mcp）

安装步骤

1. 克隆模板仓库

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

2. 安装技能到全局（可选）

如果想让技能在任何目录都能用：

# 在项目内同步技能
cd my-clone
node scripts/sync-skills.mjs

# 复制到全局 Claude 目录
mkdir -p ~/.claude/skills/clone-website
cp my-clone/.claude/skills/clone-website/SKILL.md ~/.claude/skills/clone-website/

3. 确保 MCP Router 已配置浏览器自动化

确保 claude_desktop_config.json 或 MCP 配置中已启用 @playwright/mcp。

使用方法

快速开始

# 启动 Claude Code
claude

# 在 Claude Code 中运行命令
/clone-website 你要克隆的网站

示例

克隆 Stripe 官网：

/clone-website https://stripe.com

克隆 GitHub 首页：

/clone-website https://github.com

工作流程

Phase 1: Reconnaissance（侦察）

  1. 截图 - 获取桌面端（1440px）和移动端（390px）截图
  2. 全局提取 - 提取字体、颜色、favicon、全局 CSS 模式
  3. 交互扫描 - 滚动/点击/悬停测试，发现所有动态行为
  4. 页面拓扑 - 绘制页面结构图，识别各区块

Phase 2: Foundation Build（基础构建）

  1. 更新 layout.tsx 中的字体配置
  2. 更新 globals.css 中的颜色变量
  3. 创建 TypeScript 接口
  4. 提取 SVG 图标为 React 组件
  5. 下载所有图片/视频资源

Phase 3: Component Spec & Dispatch（组件规格与调度）

对于每个页面区块：

  1. 提取 - 精确获取 CSS 值、文本内容、资源路径
  2. 写 Spec - 创建 docs/research/components/<name>.spec.md
  3. 调度 Builder - 并行在 worktree 中构建组件

Phase 4: Page Assembly（页面组装）

  1. 在 page.tsx 中组合所有组件
  2. 实现页面级布局（sticky、z-index 等）
  3. 实现页面级交互（smooth scroll、IntersectionObserver 等）

Phase 5: Visual QA（视觉对比）

  1. 截图对比原站和克隆站
  2. 逐区块检查差异
  3. 修正任何不匹配的地方

项目结构

my-clone/
├── src/
│   ├── app/
│   │   ├── page.tsx          # 主页面
│   │   ├── layout.tsx        # 布局（字体、metadata）
│   │   └── globals.css       # 全局样式（颜色变量）
│   ├── components/           # React 组件
│   │   ├── icons.tsx         # 提取的 SVG 图标
│   │   └── ui/               # shadcn/ui 组件
│   └── types/                # TypeScript 类型定义
├── public/
│   ├── images/               # 下载的图片
│   ├── videos/               # 下载的视频
│   └── seo/                  # Favicon、OG 图片
├── docs/
│   ├── research/              # 研究输出
│   │   ├── BEHAVIORS.md      # 行为分析
│   │   ├── PAGE_TOPOLOGY.md  # 页面拓扑
│   │   └── components/       # 组件规格文件
│   └── design-references/    # 截图参考
├── scripts/                  # 辅助脚本
└── TARGET.md                 # 可选：克隆目标配置

常见问题

Q: 技能找不到？

# 重新同步技能
cd my-clone
node scripts/sync-skills.mjs

Q: 浏览器自动化不工作？

检查 MCP 配置中是否已启用 @playwright/mcp：

  • 确保 ~/.claude/claude_desktop_config.json 中有 playwright 配置
  • 或检查 MCP router 配置

Q: 构建失败？

检查是否有 TypeScript 错误：

npx tsc --noEmit

提示

  1. 从简单网站开始 - 先克隆简单的静态页面熟悉流程
  2. 编辑 TARGET.md - 在克隆前配置目标页面、精度级别、范围
  3. 查看 SPEC 文件 - 所有组件规格都保存在 docs/research/components/
  4. 检查 BEHAVIORS.md - 所有交互行为都被记录

相关资源