<div align="center">
Perfect Web Clone IDE
Pixel-Perfect Website Cloning for Your IDE
   
An MCP server that brings pixel-perfect website cloning directly into your IDE.
Clone any website with one command. Get real code, not guesses.
---
</div>
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.aiThe 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 chromiumConfigure 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.comThe system will:
- Crawl the webpage with Playwright
- Extract HTML, CSS, JS, assets
- Split into logical sections
- Process each section in parallel
- Assemble into React project
- 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 dataRun 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
---
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
---
License
MIT License - see LICENSE for details.
---
<div align="center">
Perfect Web Clone IDE - Extract the real code, not guesses.
Made with ❤️ by Eric Shang
</div>
