design-copier MCP Server

A webpage design extraction tool that captures and converts web designs for development

This is a TypeScript-based MCP server that implements a web design copying system. It allows you to:

• Capture webpage styles and HTML structure
• Extract and convert CSS to Tailwind classes
• Apply extracted styles to different frontend frameworks

Features

Tools

• designcopier_snapshot - Capture webpage or element styles

  • Takes a URL and optional CSS selector
  • Returns HTML and CSS styles from the target

• designcopier_extract - Extract styles and convert to different formats

  • Processes HTML and CSS content
  • Supports conversion to Tailwind classes
  • Can output in CSS, Tailwind, or React formats

• designcopier_apply - Apply extracted styles to target framework

  • Takes extracted styles and applies them to a component
  • Supports React (with styled-components)
  • Creates ready-to-use component templates

Clone Repo and Development

Install dependencies:

npm install

npm run prepare , first time only or any custom changes 

Build the server:

npm run build , to make the build index.js file

For development with auto-rebuild:

npm run watch

Installation

To use with Claude Desktop, add the server config:

On MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json On Windows: %APPDATA%/Claude/claude_desktop_config.json VS-Code with Cline or Roo: Click top MCP Server icon, go to 'Installed' and at bottom of server list running, click 'Configure MCP Server' Add this to the config:

"design-copier": {
      "timeout": 60,
      "command": "node",
      "args": [ "C:\\Users\\$ProfileUser$\\your-folder\\whatever folder\\design-copier\\build\\index.js" 
    ],
      "transportType": "stdio"
    } 

Another example:

{
  "mcpServers": {
    "design-copier": {
      "command": "node",
      "args": [
        "/path/to/design-copier/build/index.js"
      ],
      "transportType": "stdio"
    }
  }
}

Debugging

Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector, which is available as a package script:

npm run inspector

The Inspector will provide a URL to access debugging tools in your browser.