Why This Tool?

Screenshot-based Tools	Perfect Web Clone IDE
Guesses code from pixels	Extracts real source code
Approximate CSS	Exact computed styles
Broken responsive layouts	Preserved responsiveness
Lost animations	@keyframes preserved
Complex setup	One config file

Inspired by Perfect-Web-Clone: Want to understand the full multi-agent architecture? Check out the original project. This IDE version brings that power directly into your coding workflow.

---

Features

One-Command Cloning

Just type in your IDE:

Clone https://stripe.com for me

帮我克隆 https://pixso.ai

The AI handles everything—crawling, code extraction, styling, and preview.

Pixel-Perfect Extraction

• Real HTML Structure: Not guessed from screenshots
• Exact CSS: Computed styles, variables, @keyframes
• All Assets: Images, fonts, videos, SVGs
• Framework Detection: Auto-injects Tailwind, Bootstrap, Bulma CDN

Parallel Processing

Multiple workers process different sections simultaneously:

┌─────────────────────────────────────────────────┐
│  "Clone https://example.com"                    │
│                    ↓                            │
│    ┌─────────┐ ┌─────────┐ ┌─────────┐        │
│    │Worker 1 │ │Worker 2 │ │Worker 3 │  ...   │
│    │Section 0│ │Section 1│ │Section 2│        │
│    └────┬────┘ └────┬────┘ └────┬────┘        │
│         └──────────┼───────────┘              │
│                    ↓                            │
│           Assembled Project                     │
│           + Live Preview                        │
└─────────────────────────────────────────────────┘

IDE Integration (MCP)

Works with any MCP-compatible IDE:

IDE / Tool	Status
Claude Code	Native support
Cursor	Via MCP plugin
VS Code + Continue	Via MCP extension
Any MCP Client	Standard protocol

---

Getting Started

Prerequisites

• Python 3.9+
• Claude Code CLI (npm install -g @anthropic-ai/claude-code)
• Playwright (playwright install chromium)

Installation

# 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

Configure MCP Server

Add to ~/.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"
    }
  }
}

Restart your IDE to load the MCP server.

---

Usage

Clone a Website

Clone https://example.com

The system will:

1. Crawl the webpage with Playwright
2. Extract HTML, CSS, JS, assets
3. Split into logical sections
4. Process each section in parallel
5. Assemble into React project
6. Preview in your browser

Output Structure

~/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

Run Full Project

cd ~/ClonedSites/example.com_20260129_123456/output
npm install && npm run dev

---

Architecture

┌──────────────────────────────────────────────────────────────┐
│                     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 Tools

Tool	Description
clone_webpage	Crawl and split webpage
get_sections	List extracted sections
process_section	Process single section
process_sections_batch	Parallel processing
assemble_project	Assemble and preview
get_status	Session status

---

Limitations

• Login-required pages: Cannot clone authenticated pages
• Heavy SPAs: Complex client-side rendering may not extract fully
• Dynamic content: API-loaded content after page load may be missed

---

Related Projects

• Perfect-Web-Clone: Full multi-agent system with 40+ tools and web UI. See this to understand the complete architecture.

---

Star History

Star History Chart

---

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

License

MIT License - see LICENSE for details.

---