website-cloner

用途

Website Cloner 是一个用于克隆网站的智能体工作流技能，目标是以像素级保真度（pixel-perfect fidelity）复制任意网站。当用户希望克隆、复制或复刻某个网站时使用。

主要能力

该技能提供一套完整的网站克隆系统，包含：

斜杠命令：/clone-website <url> 负责编排整个工作流。
4 个专用子智能体，各自负责一个特定阶段：
- website-screenshotter：捕获全面的截图（整页、区块、组件、悬停状态）。
- website-extractor：将资源下载到 public/，提取颜色、排版、间距、动画。
- website-cloner：使用 Tailwind + motion 实现 React 组件，自动检测项目类型。
- website-qa-reviewer：逐像素比较，将问题分类为 Critical/Major/Minor。
输出：使用 Tailwind CSS + motion 的单个 React 组件。

架构上，编排器（/clone-website）负责委派而不编写代码，各子智能体可并行执行，cloner 与 qa-reviewer 之间循环直到完成。

使用方式

1. 创建子智能体

在 Claude Code 中运行 /agents 并创建上述 4 个智能体。对每个智能体选择 "Generate with Claude" 并提供描述。各智能体的详细提示词见 references/subagents.md。

2. 安装斜杠命令

将 assets/clone-website.md 复制到 commands 文件夹：

# 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

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

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

使用命令

/clone-website https://example.com

编排器将执行以下步骤：

创建任务文件夹 .tasks/clone-{domain}/
调用 screenshotter → 捕获所有视觉参考
调用 extractor → 下载资源、提取样式
调用 cloner → 实现 React 组件
调用 qa-reviewer → 找出差异
循环步骤 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。

自定义

更改输出位置：编辑 cloner 智能体的系统提示词以指定不同的输出路径。
添加框架：更新 cloner 智能体中的项目检测逻辑以支持更多框架。
调整迭代上限：修改斜杠命令的 Phase 5 以更改最大迭代次数（默认：5）。

故障排除

找不到子智能体：验证名称完全匹配：website-screenshotter、website-extractor、website-cloner、website-qa-reviewer。
Playwright 错误：运行 npm install -g @anthropic-ai/mcp-playwright。
资源未加载：检查 public/ 文件夹结构和组件中的图片路径。
无限循环：QA 审查器应设置状态；检查 review-notes.md 中的 STATUS 行。

适用场景与限制

适用于需要以像素级保真度复刻网站视觉与结构的场景，尤其是使用 React 与 Tailwind CSS 的项目。限制方面，资料未提供关于收费、价格、平台兼容性范围或克隆效果保证的更多信息。