What is Design Copier

Design Copier is a TypeScript-based MCP server that allows users to copy CSS or Tailwind properties from a web page to facilitate design transfer in development applications.

Use cases

Use cases include copying design properties for UI components, generating style guidelines from existing web pages, and facilitating collaboration between designers and developers.

How to use

To use design-copier, install the necessary dependencies using npm, build the server, and configure it in your application. For integration with Claude Desktop or VS-Code, add the server configuration to the respective config files.

Key features

Key features include resources for managing text notes with URIs and metadata, tools for creating new notes, and prompts for generating summaries of stored notes.

Where to use

Design Copier can be used in web development, particularly for transferring design elements from live web pages into development environments.

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:

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.