website-cloner by horuz-ai/claude-plugins
npx skills add https://github.com/horuz-ai/claude-plugins --skill website-cloner使用编排的多智能体工作流,以像素级精度克隆任何网站。
本技能提供了一个完整的网站克隆系统:
/clone-website <url> 编排整个工作流 ┌─────────────────────────────────────────┐
│ 编排器 (/clone-website) │
│ 负责委派,不编写代码 │
└─────────────────────────────────────────┘
│
┌───────────────┼───────────────┐
▼ ▼ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐
│ 屏幕截图│ │ 提取器 │ │ (可并行)│
│ 智能体 │ │ 智能体 │ │ │
└─────────┘ └─────────┘ └─────────┘
│
▼
┌─────────────┐
│ 克隆器 │◄────────┐
│ 智能体 │ │
└─────────────┘ │
│ │
▼ │
┌─────────────┐ │
│ QA 审查器 │─────────┘
│ 智能体 │ (循环直至完成)
└─────────────┘
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
在 Claude Code 中运行 /agents 并创建这 4 个智能体。对于每个智能体,选择"使用 Claude 生成"并提供描述。
| 智能体名称 | 描述摘要 |
|---|---|
website-screenshotter | 捕获全面的屏幕截图(整页、部分、组件、悬停状态) |
website-extractor | 将资源下载到 public/,提取颜色、排版、间距、动画 |
website-cloner | 使用 Tailwind + motion 实现 React 组件,自动检测项目类型 |
website-qa-reviewer | 逐像素比较,将问题分类为严重/主要/次要 |
每个智能体的详细提示 : 参见 references/subagents.md
将 assets/clone-website.md 复制到您的命令文件夹:
# 项目级别(通过 git 共享)
cp assets/clone-website.md .claude/commands/
# 或用户级别(个人)
cp assets/clone-website.md ~/.claude/commands/
确保 Playwright MCP 已在 ~/.claude.json 或 .claude/settings.json 中配置:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@anthropic-ai/mcp-playwright"]
}
}
}
/clone-website https://example.com
编排器将:
.tasks/clone-{domain}/your-project/
├── public/
│ ├── images/ # 下载的图片
│ ├── videos/ # 下载的视频
│ └── icons/ # 下载的 SVG/图标
├── app/clone/page.tsx # React 组件(位置因框架而异)
└── .tasks/clone-{domain}/
├── context.md # 提取的样式
├── screenshots/ # 视觉参考
└── review-notes.md # QA 发现
| 技术 | 原因 |
|---|---|
| Tailwind CSS | 任意值(bg-[#hex])可实现像素级颜色匹配 |
| motion | framer-motion 的现代、更轻量替代品(从 "motion/react" 导入) |
| 单一组件 | 专注于克隆,而非架构;各部分通过注释分隔 |
| 自动检测框架 | 支持 Next.js, TanStack Start, Vite 等 |
详细原理 : 参见 references/tech-decisions.md
分阶段详解 : 参见 references/workflow.md
编辑克隆器智能体的系统提示,以指定不同的输出路径。
更新克隆器智能体中的项目检测逻辑以支持更多框架。
修改斜杠命令的第 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 行 |
每周安装量
132
代码仓库
GitHub 星标数
2
首次出现
2026 年 1 月 24 日
安全审计
安装于
opencode128
gemini-cli124
codex122
kimi-cli115
github-copilot115
amp111
Clone any website with pixel-perfect fidelity using an orchestrated multi-agent workflow.
This skill provides a complete system for cloning websites:
/clone-website <url> orchestrates the entire workflow┌─────────────────────────────────────────┐
│ ORCHESTRATOR (/clone-website) │
│ Delegates, doesn't code │
└─────────────────────────────────────────┘
│
┌───────────────┼───────────────┐
▼ ▼ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐
│ screen- │ │ extrac- │ │ (can │
│ shotter │ │ tor │ │ parallel│
└─────────┘ └─────────┘ └─────────┘
│
▼
┌─────────────┐
│ cloner │◄────────┐
└─────────────┘ │
│ │
▼ │
┌─────────────┐ │
│ qa-reviewer │─────────┘
└─────────────┘ (loop until done)
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
Copy assets/clone-website.md to your commands folder:
# Project-level (shared via git)
cp assets/clone-website.md .claude/commands/
# Or user-level (personal)
cp assets/clone-website.md ~/.claude/commands/
Ensure Playwright MCP is configured in ~/.claude.json or .claude/settings.json:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@anthropic-ai/mcp-playwright"]
}
}
}
/clone-website https://example.com
The orchestrator will:
.tasks/clone-{domain}/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
| 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
Phase-by-phase breakdown : See references/workflow.md
Edit the cloner agent's system prompt to specify a different output path.
Update project detection logic in cloner agent for additional frameworks.
Modify the slash command's Phase 5 to change max iterations (default: 5).
| 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 |
Weekly Installs
132
Repository
GitHub Stars
2
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykWarn
Installed on
opencode128
gemini-cli124
codex122
kimi-cli115
github-copilot115
amp111
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
155,300 周安装