Skip to main content
Glama
wplaunchify

design-clone-mcp

by wplaunchify
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

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

Related MCP server: browser-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. 🚀

Available Tools

1 tool
clone_website_designA

Clone a website design by capturing HTML, CSS, colors, fonts, and layout. Returns structured design data that can be used to recreate the page.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesThe URL of the website to clone (e.g., https://stripe.com/pricing)

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full behavioral burden. It discloses what is captured and that structured design data is returned, but omits side effects, network/scraping implications, rate limits, authentication needs, and how dynamic content is handled.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two tight sentences with the core action front-loaded and no filler. The second sentence adds useful return-value context without bloat.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple one-parameter tool with no output schema, the description does well by naming captured artifacts and describing the return as structured design data for recreation. It could be more explicit about return format, but it is largely complete for the tool's complexity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% and the single URL parameter is fully documented with an example. The description adds no additional meaning beyond the schema, so the baseline of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb (clone) and resource (website design), then enumerates the exact artifacts captured (HTML, CSS, colors, fonts, layout). An agent can tell exactly what this tool produces without inspecting the schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies its use case (cloning a website design from a URL) but offers no explicit when-to-use guidance, prerequisites, or exclusions. There are no sibling tools to differentiate from, so the lack of comparative guidance is less damaging, but still a gap.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

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

  1. 1 tool updatev1.0.0
    • First observedclone_website_design
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

A4/5.0

Scored across 1 tool

Disambiguation5/5

With only one tool, there is no possibility of confusion or misselection. The tool's purpose is unambiguous.

Naming Consistency5/5

The single tool name 'clone_website_design' follows a clear verb_noun pattern in snake_case. No inconsistency can exist with only one tool.

Tool Count3/5

One tool is borderline thin for a server, even though the task is well-defined. The rubric considers 1-2 tools as feeling thin.

Completeness5/5

The tool covers the entire stated purpose: capturing HTML, CSS, colors, fonts, and layout for design cloning. No obvious gaps exist for this single-operation domain.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers