Skip to main content
Glama
Sign In
Perfect Web Clone IDE

Perfect Web Clone IDE

by ericshang98
OverviewSchemaSourceRelated ServersDiscussionsAdmin
Python
Local

Perfect Web Clone IDE

Pixel-Perfect Website Cloning for Your IDE

English · 中文

License: MIT Python 3.9+ MCP Playwright

An MCP server that brings pixel-perfect website cloning directly into your IDE.

Clone any website with one command. Get real code, not guesses.

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.

Related MCP server: design-clone-mcp

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.

Perfect Web Clone IDE - Extract the real code, not guesses.

Made with ❤️ by Eric Shang

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    This server cannot be deployed

    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    Resources

    Related MCP Connectors

    Related MCP Servers

    Appeared in Searches