Skip to main content
Glama
chipsxp

design-copier

by chipsxp
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Local

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

Related MCP server: imugi

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.

Available Tools

3 tools
designcopier_applyC

Apply extracted styles to target framework

ParametersJSON Schema
NameRequiredDescriptionDefault
stylesYesExtracted styles
targetFrameworkYesTarget framework
componentNameYesName for the generated component

TDQS

C2.7/5.0
Behavior2/5

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

No annotations exist, so description carries full burden. It only says 'Apply extracted styles' without disclosing any side effects, permissions, or output behavior. Important for a code generation tool.

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

Conciseness2/5

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

Extremely brief (one short sentence) but underspecified. Conciseness at the cost of completeness is not effective.

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

Completeness2/5

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

Missing context on output format, interaction with sibling tools, and practical usage steps. Schema covers params but not tool behavior.

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%, so the schema already documents each parameter. The description adds no additional meaning beyond what is in the schema.

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

Purpose4/5

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

Description states 'Apply extracted styles to target framework' which clearly indicates the action (apply) and the resource (styles) and target. It distinguishes from sibling 'designcopier_extract' (which likely extracts) but does not differentiate from 'designcopier_snapshot'.

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

Usage Guidelines2/5

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

No usage guidance provided. Does not indicate when to use this tool versus alternatives, nor any prerequisites (e.g., need to extract styles first).

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

designcopier_extractC

Extract styles and convert to different formats

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlYesHTML content
stylesYesCSS styles
formatYesOutput format

TDQS

C2.9/5.0
Behavior2/5

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

No annotations are provided, and the description does not disclose any behavioral traits such as side effects, permissions, or output format. The tool's behavior beyond the schema is opaque.

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?

The description is a single concise sentence that efficiently communicates the core functionality without unnecessary words.

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

Completeness2/5

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

Given the lack of annotations and output schema, the description is insufficient. It does not explain the return value or behavior, leaving the agent with incomplete context for a tool with 3 parameters.

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 coverage is 100% with descriptions for all parameters. The description does not add additional meaning beyond the schema, such as explaining the enum values (css, tailwind, react). Baseline of 3 is appropriate.

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

Purpose4/5

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

The description clearly states the action (extract and convert) and the resource (styles). It distinguishes from siblings like 'apply' and 'snapshot' through the verb 'extract'. However, it does not specify the source (HTML/CSS) explicitly, relying on 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 Guidelines2/5

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

No guidance on when to use this tool versus alternatives. No conditions or exclusions are mentioned, leaving the agent without context for selection.

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

designcopier_snapshotC

Capture webpage or element styles

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesURL to capture
selectorNoOptional CSS selector for specific element

TDQS

C2.9/5.0
Behavior2/5

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

No annotations exist, so description must carry full burden. Only states 'Capture', with no mention of side effects, authentication, rate limits, or what exactly is returned. Minimal transparency.

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?

Single sentence of 5 words, perfectly concise and front-loaded. No unnecessary information.

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

Completeness2/5

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

Despite simple schema and no output schema, description fails to define what 'styles' entails (e.g., CSS properties, computed styles, or screenshots). Agent lacks critical context for correct invocation.

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 already describes both parameters clearly (100% coverage). Description adds no extra meaning beyond schema, but does not repeat it. Baseline score of 3 is appropriate.

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

Purpose4/5

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

Description clearly states verb 'Capture' and resource 'webpage or element styles', making the tool's function understandable. However, it does not differentiate from sibling tools like designcopier_extract, which may have overlapping purpose.

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

Usage Guidelines2/5

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

No guidance provided on when to use this tool versus alternatives or when not to use it. Lacks any contextual hints about suitability.

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. Dates show when Glama detected each change.

  1. 3 tool updatesv0.1.0
    • First observeddesigncopier_apply
    • First observeddesigncopier_extract
    • First observeddesigncopier_snapshot
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.5/5.0
Disambiguation5/5

Each tool has a distinct role in a clear pipeline: snapshot captures styles, extract converts them, and apply outputs to a target framework. No overlap in functionality.

Naming Consistency5/5

All tool names follow a consistent pattern of 'designcopier_' prefix with a descriptive verb (snapshot, extract, apply) in snake_case.

Tool Count5/5

3 tools are well-scoped for a focused design copying utility, covering the essential steps without bloat or insufficiency.

Completeness5/5

The pipeline is complete: capture (snapshot), transform (extract), and output (apply) cover the full workflow, with no missing steps for the stated purpose.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/chipsxp/design-copier'

If you have feedback or need assistance with the MCP directory API, please join our Discord server