website-cloner

网站克隆技能

通过多 Agent 协同工作流，以像素级精准度克隆任意网站。

概述

此技能提供了一套完整的网站克隆系统：

• 斜杠命令：/clone-website <url> 协调整个工作流
• 4 个专用子 Agent：各自负责特定阶段
• 输出：使用 Tailwind CSS + motion 的单个 React 组件

架构

┌─────────────────────────────────────────┐
│     ORCHESTRATOR (/clone-website)       │
│     Delegates, doesn't code             │
└─────────────────────────────────────────┘
                    │
    ┌───────────────┼───────────────┐
    ▼               ▼               ▼
┌─────────┐   ┌─────────┐   ┌─────────┐
│ screen- │   │ extrac- │   │  (can   │
│ shotter │   │  tor    │   │ parallel│
└─────────┘   └─────────┘   └─────────┘
                    │
                    ▼
            ┌─────────────┐
            │   cloner    │◄────────┐
            └─────────────┘         │
                    │               │
                    ▼               │
            ┌─────────────┐         │
            │ qa-reviewer │─────────┘
            └─────────────┘  (loop until done)

快速设置

1. 创建子 Agent

在 Claude Code 中运行 /agents 并创建以下 4 个 Agent。对于每个 Agent，选择“Generate with Claude”并提供描述。

Agent 名称	描述摘要
website-screenshotter	捕获全面的屏幕截图（整页、各个区域、组件、悬停状态）
website-extractor	将资源下载到 public/，提取颜色、排版、间距和动画信息
website-cloner	使用 Tailwind + motion 实现 React 组件，并自动检测项目类型
website-qa-reviewer	逐像素比较，并将问题分为 Critical/Major/Minor

各 Agent 的详细提示词：参见 references/subagents.md

2. 安装斜杠命令

将 assets/clone-website.md 复制到你的命令文件夹：

# Project-level (shared via git)
cp assets/clone-website.md .claude/commands/

# Or user-level (personal)
cp assets/clone-website.md ~/.claude/commands/

3. 配置 Playwright MCP

确保 Playwright MCP 已在 ~/.claude.json 或 .claude/settings.json 中配置：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-playwright"]
    }
  }
}

用法

/clone-website https://example.com

编排器将：

1. 创建任务文件夹 .tasks/clone-{domain}/
2. 调用截图 Agent → 捕获所有视觉参考
3. 调用提取 Agent → 下载资源并提取样式
4. 调用克隆 Agent → 实现 React 组件
5. 调用 QA 审核 Agent → 找出差异
6. 循环执行步骤 4–5，直到达到 PERFECT 或最多迭代 5 次

输出结构

your-project/
├── public/
│   ├── images/          # Downloaded images
│   ├── videos/          # Downloaded videos
│   └── icons/           # Downloaded SVGs/icons
├── app/clone/page.tsx   # React component (location varies by framework)
└── .tasks/clone-{domain}/
    ├── context.md       # Extracted styles
    ├── screenshots/     # Visual references
    └── review-notes.md  # QA findings

技术选型

技术	原因
Tailwind CSS	任意值（bg-[#hex]）可实现像素级精准的颜色匹配
motion	比 framer-motion 更新、更轻量的替代方案（从 "motion/react" 导入）
单个组件	专注于克隆而非架构；通过注释划分各个区域
自动检测框架	支持 Next.js、TanStack Start、Vite 等

详细说明：参见 references/tech-decisions.md

工作流详情

各阶段的详细说明：参见 references/workflow.md

自定义

更改输出位置

编辑克隆 Agent 的系统提示词以指定其他输出路径。

添加框架

更新克隆 Agent 中的项目检测逻辑，以支持其他框架。

调整迭代上限

修改斜杠命令的阶段 5，以更改最大迭代次数（默认值：5）。

故障排除

问题	解决方案
找不到子 Agent	确认名称完全匹配：website-screenshotter、website-extractor、website-cloner、website-qa-reviewer
Playwright 错误	运行 npm install -g @anthropic-ai/mcp-playwright
资源未加载	检查 public/ 文件夹结构以及组件中的图片路径
无限循环	QA 审核 Agent 应设置状态；检查 review-notes.md 中的 STATUS 行