使用说明
完美的Web克隆IDE
Pixel Perfect网站克隆为您的IDE
一个MCP服务器，将像素完美的网站克隆直接带入您的IDE。
只需一个命令即可克隆任何网站。获取真实代码，而不是猜测。
为什么是这个工具？
| 基于截图的工具 | 完美的Web克隆IDE |
|---|---|
| 根据像素推测代码 | 提取真实源代码 |
| 近似CSS | 精确计算样式 |
| 响应式布局损坏 | 保持响应能力 |
| 丢失的动画 | @保留关键帧 |
| 复杂的设置 | 一个配置文件 |
受...启发 完美的网络克隆：想了解完整的多代理架构吗？查看原始项目。这个IDE版本将这种能力直接带入您的编码工作流程。
特性
一个命令克隆
只需键入IDE：
Clone https://stripe.com for me
帮我克隆 https://pixso.ai
人工智能处理一切——爬行、代码提取、样式和预览。
像素完美提取
- 真正的HTML结构：未从屏幕截图中猜测
- 精确CSS：计算样式、变量、@关键帧
- 所有资产：图像、字体、视频、SVG
- 框架检测：自动注入Tailwind、Bootstrap、Bulma CDN
并行处理
多个工人同时处理不同的部分：
┌─────────────────────────────────────────────────┐
│ "Clone https://example.com" │
│ ↓ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │Worker 1 │ │Worker 2 │ │Worker 3 │ ... │
│ │Section 0│ │Section 1│ │Section 2│ │
│ └────┬────┘ └────┬────┘ └────┬────┘ │
│ └──────────┼───────────┘ │
│ ↓ │
│ Assembled Project │
│ + Live Preview │
└─────────────────────────────────────────────────┘
IDE集成（MCP）
适用于任何兼容MCP的IDE：
| IDE/工具 | 状态 |
|---|---|
| 克劳德代码 | 本地支持 |
| 光标 | 通过MCP插件 |
| VS代码+继续 | 通过MCP扩展 |
| 任何MCP客户端 | 标准协议 |
入门指南
先决条件
- Python 3.9+
- 克劳德代码CLI(
npm install -g @anthropic-ai/claude-code) - 剧作家(
playwright install chromium)
安装
# Clone the repository
git clone https://github.com/ericshang98/Perfect-Web-Clone-IDE.git
cd Perfect-Web-Clone-IDE
# Create virtual environment
python -m venv venv
source venv/bin/activate # Windows: venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Install Playwright browser
playwright install chromium
配置MCP服务器
添加到 ~/.claude/settings.json:
{
"mcpServers": {
"web-clone": {
"command": "/path/to/Perfect-Web-Clone-IDE/venv/bin/python",
"args": ["-m", "cloner"],
"cwd": "/path/to/Perfect-Web-Clone-IDE"
}
}
}
重新启动IDE以加载MCP服务器。
用法
克隆网站
Clone https://example.com
该系统将：
- 爬行 Playwright的网页
- 提取 HTML、CSS、JS、资源
- 分裂 分为逻辑部分
- 过程 每个部分平行
- 组装 进入React项目
- 预览 在浏览器中
输出结构
~/ClonedSites/example.com_20260129_123456/
├── output/
│ ├── preview.html # Standalone preview
│ ├── src/
│ │ ├── app/
│ │ │ ├── page.tsx # Next.js page
│ │ │ └── layout.tsx
│ │ └── components/
│ │ └── sections/ # React components
│ ├── package.json
│ └── tailwind.config.js
└── sections/ # Raw extraction data
运行完整项目
cd ~/ClonedSites/example.com_20260129_123456/output
npm install && npm run dev
建筑
┌──────────────────────────────────────────────────────────────┐
│ MCP Server │
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ clone_webpage(url) │ │
│ │ → Playwright: Full page crawl │ │
│ │ → Extract: CSS, JS, computed styles, @keyframes │ │
│ │ → Detect: Tailwind / Bootstrap / Bulma │ │
│ │ → Split: Semantic sections │ │
│ └────────────────────────────────────────────────────────┘ │
│ ↓ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ process_sections_batch() │ │
│ │ │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ Claude │ │ Claude │ │ Claude │ │ │
│ │ │ Worker │ │ Worker │ │ Worker │ (Parallel) │ │
│ │ └────┬────┘ └────┬────┘ └────┬────┘ │ │
│ │ ↓ ↓ ↓ │ │
│ │ Section0.jsx Section1.jsx Section2.jsx │ │
│ └────────────────────────────────────────────────────────┘ │
│ ↓ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ assemble_project() │ │
│ │ → Combine components │ │
│ │ → Generate Next.js structure │ │
│ │ → Start preview server │ │
│ │ → Open browser │ │
│ └────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
MCP工具
| 工具 | 说明 |
|---|---|
clone_webpage |
抓取和拆分网页 |
get_sections |
列出提取的部分 |
process_section |
工艺单段 |
process_sections_batch |
并行处理 |
assemble_project |
组装和预览 |
get_status |
会话状态 |
局限性
- 登录必填页面：无法克隆经过身份验证的页面
- 重型SPA：复杂的客户端渲染可能无法完全提取
- 动态内容：可能会错过页面加载后加载的API内容
相关项目
- 完美的网络克隆：具有40多种工具和web UI的完整多代理系统。查看此内容以了解完整的架构。
明星历史
贡献
欢迎投稿！请随时提交拉取请求。
- 分叉存储库
- 创建功能分支(
git checkout -b feature/amazing-feature) - 提交您的更改(
git commit -m 'Add amazing feature') - 推到分支(
git push origin feature/amazing-feature) - 打开拉取请求
许可证
MIT许可证-请参阅 许可证 了解详情。
完美的Web克隆IDE -提取真实代码，而不是猜测。
由以下材料制成❤️ 通过 尚
