website-cloner

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Website Cloner Skill

网站克隆Skill

Clone any website with pixel-perfect fidelity using an orchestrated multi-agent workflow.

借助编排好的多Agent工作流，以像素级精度克隆任意网站。

Overview

概述

This skill provides a complete system for cloning websites:

Slash command:
```
/clone-website <url>
```
orchestrates the entire workflow
4 specialized sub-agents: Each handles a specific phase
Output: Single React component using Tailwind CSS + motion

该Skill为网站克隆提供了一套完整的系统：

斜杠命令：
```
/clone-website <url>
```
编排整个工作流
4个专用子Agent：每个Agent负责特定阶段的任务
输出结果：单个使用Tailwind CSS + motion的React组件

Architecture

架构

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

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

Quick Setup

快速设置

1. Create Sub-Agents

1. 创建子Agent

Run

/agents

in Claude Code and create these 4 agents. For each, select "Generate with Claude" and provide the description.

Agent Name	Description Summary
`website-screenshotter`	Captures comprehensive screenshots (full-page, sections, components, hover states)
`website-extractor`	Downloads assets to `public/` , extracts colors, typography, spacing, animations
`website-cloner`	Implements React component with Tailwind + motion, auto-detects project type
`website-qa-reviewer`	Pixel-by-pixel comparison, classifies issues as Critical/Major/Minor

Detailed prompts for each agent: See

references/subagents.md

在Claude Code中运行

/agents

命令，创建这4个Agent。对于每个Agent，选择“Generate with Claude”并提供描述信息。

Agent 名称	描述摘要
`website-screenshotter`	捕获全面的截图（全页、区块、组件、悬停状态）
`website-extractor`	将资源下载到 `public/` 目录，提取颜色、排版、间距、动画信息
`website-cloner`	实现基于Tailwind + motion的React组件，自动检测项目类型
`website-qa-reviewer`	逐像素对比，将问题分为严重/主要/次要等级

各Agent的详细提示词：请查看

references/subagents.md

2. Install Slash Command

2. 安装斜杠命令

Copy

assets/clone-website.md

to your commands folder:

bash

undefined

将

assets/clone-website.md

复制到你的命令文件夹：

bash

undefined

Project-level (shared via git)

项目级（通过Git共享）

cp assets/clone-website.md .claude/commands/

Or user-level (personal)

或用户级（个人使用）

cp assets/clone-website.md ~/.claude/commands/

undefined

cp assets/clone-website.md ~/.claude/commands/

undefined

3. Configure Playwright MCP

3. 配置Playwright MCP

Ensure Playwright MCP is configured in

~/.claude.json

.claude/settings.json

json

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

确保在

~/.claude.json

或

.claude/settings.json

中配置了Playwright MCP：

json

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

Usage

使用方法

bash

/clone-website https://example.com

The orchestrator will:

Create task folder
```
.tasks/clone-{domain}/
```
Invoke screenshotter → captures all visual references
Invoke extractor → downloads assets, extracts styles
Invoke cloner → implements React component
Invoke qa-reviewer → finds discrepancies
Loop steps 4-5 until PERFECT or max 5 iterations

bash

/clone-website https://example.com

编排器将执行以下操作：

创建任务文件夹
```
.tasks/clone-{domain}/
```
调用截图Agent → 捕获所有视觉参考素材
调用提取Agent → 下载资源，提取样式信息
调用克隆Agent → 实现React组件
调用QA审核Agent → 找出差异
循环步骤4-5，直到达到完美状态或完成最多5次迭代

Output Structure

输出结构

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

your-project/
├── public/
│   ├── images/          # 下载的图片
│   ├── videos/          # 下载的视频
│   └── icons/           # 下载的SVG/图标
├── app/clone/page.tsx   # React组件（位置因框架而异）
└── .tasks/clone-{domain}/
    ├── context.md       # 提取的样式信息
    ├── screenshots/     # 视觉参考素材
    └── review-notes.md  # QA审核结果

Tech Stack Decisions

技术栈选择

Technology	Reason
Tailwind CSS	Arbitrary values ( `bg-[#hex]` ) enable pixel-perfect color matching
motion	Modern, lighter alternative to framer-motion (import from "motion/react")
Single component	Focus on cloning, not architecture; sections divided by comments
Auto-detect framework	Supports Next.js, TanStack Start, Vite, etc.

Detailed rationale: See

references/tech-decisions.md

技术	选择理由
Tailwind CSS	任意值（如 `bg-[#hex]` ）可实现像素级精准的颜色匹配
motion	现代、轻量的framer-motion替代方案（从"motion/react"导入）
单组件输出	专注于克隆功能，不涉及架构；通过注释划分区块
自动检测框架	支持Next.js、TanStack Start、Vite等多种框架

详细选型理由：请查看

references/tech-decisions.md

Workflow Details

工作流详情

Phase-by-phase breakdown: See

references/workflow.md

分阶段详解：请查看

references/workflow.md

Customization

自定义配置

Change output location

修改输出位置

Edit the cloner agent's system prompt to specify a different output path.

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

Add frameworks

添加框架支持

Update project detection logic in cloner agent for additional frameworks.

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

Adjust iteration limit

调整迭代次数上限

Modify the slash command's Phase 5 to change max iterations (default: 5).

修改斜杠命令的第5阶段配置，调整最大迭代次数（默认值：5）。

Troubleshooting

故障排除

Issue	Solution
Sub-agents not found	Verify names exactly match: `website-screenshotter` , `website-extractor` , `website-cloner` , `website-qa-reviewer`
Playwright errors	Run `npm install -g @anthropic-ai/mcp-playwright`
Assets not loading	Check `public/` folder structure and image paths in component
Infinite loop	QA reviewer should set status; check `review-notes.md` for STATUS line

问题	解决方案
找不到子Agent	确认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行

undefined