design-clone-mcp

wplaunchify/design-clone-mcp

3.2

If you are the rightful owner of design-clone-mcp and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to dayong@mcphub.com.

The Design Clone MCP Server allows users to clone website designs and extract structured data using Puppeteer.

Tools
1
Resources
0
Prompts
0

Design Clone MCP Server

One-click website design cloning with Puppeteer

Clone any website's design and get structured data (HTML, CSS, colors, fonts, layout) that you can use to recreate it.

🚀 Installation

One Command Install:

npx @minutelaunch/design-clone-mcp

Or install globally:

npm install -g @minutelaunch/design-clone-mcp

📋 Prerequisites

  • Node.js 18+ (Puppeteer requirement)
  • That's it!

Puppeteer (including Chromium) is bundled automatically.

🎯 Usage

In Cursor or Claude Desktop:

Just say:

"Clone the design from https://stripe.com"

The MCP server will:

  1. Launch Puppeteer
  2. Capture the website design
  3. Extract colors, fonts, HTML, CSS
  4. Return structured data
  5. You can then use it to create pages

Manual Testing:

# Start the server
design-clone-mcp

# Or with npx
npx @minutelaunch/design-clone-mcp

🔧 Configuration

For Cursor:

Add to your ~/.cursor/mcp.json:

{
  "mcpServers": {
    "design-clone": {
      "command": "npx",
      "args": ["@minutelaunch/design-clone-mcp"]
    }
  }
}

For Claude Desktop:

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "design-clone": {
      "command": "npx",
      "args": ["@minutelaunch/design-clone-mcp"]
    }
  }
}

📊 What Gets Captured

  • ✅ HTML - Full rendered HTML (up to 50KB)
  • ✅ Colors - All background and text colors (top 20)
  • ✅ Fonts - All font families used (top 10)
  • ✅ Sections - Header, main, footer, etc. with computed styles
  • ✅ Layout - Padding, margin, display properties
  • ✅ Metadata - Capture timestamp, viewport size

🎨 Example Output

{
  "url": "https://stripe.com/pricing",
  "title": "Pricing - Stripe",
  "colors": [
    "rgb(99, 91, 255)",
    "rgb(10, 37, 64)",
    "rgb(255, 255, 255)"
  ],
  "fonts": [
    "Inter, sans-serif",
    "system-ui"
  ],
  "sections": [
    {
      "tag": "header",
      "className": "site-header",
      "html": "<header>...</header>",
      "computedStyles": {
        "backgroundColor": "rgb(255, 255, 255)",
        "color": "rgb(10, 37, 64)",
        "fontSize": "16px",
        "fontFamily": "Inter, sans-serif",
        "padding": "20px",
        "margin": "0px"
      }
    }
  ],
  "metadata": {
    "capturedAt": "2025-10-28T12:00:00.000Z",
    "viewport": {
      "width": 1920,
      "height": 1080
    }
  }
}

🔌 Available Tools

clone_website_design

Clone a website's design and get structured data.

Parameters:

  • url (string, required) - The URL to clone

Returns:

  • Structured design data (JSON)

🛠️ Development

# Clone the repo
git clone https://github.com/wplaunchify/design-clone-mcp.git
cd design-clone-mcp

# Install dependencies
npm install

# Build
npm run build

# Run locally
npm start

📝 Notes

  • Timeout: Default 30 seconds per page
  • Size Limits: HTML limited to 50KB, sections limited to 10
  • Public Sites Only: Only captures publicly accessible websites
  • No Authentication: Can't capture sites requiring login

🐛 Troubleshooting

Puppeteer won't install

npm install puppeteer --unsafe-perm=true

Timeout errors

Increase timeout in the code or try again (some sites are slow)

"Command not found"

Make sure Node.js 18+ is installed:

node --version

📄 License

MIT

👤 Author

MinuteLaunch Team

Just works. No configuration. One command. 🚀