design-copier

design-copier is a TypeScript-based MCP server that provides an automated workflow for capturing webpage designs and converting them into frontend-ready formats. It exposes three core tools: designcopier_snapshot, designcopier_extract, and designcopier_apply. Use snapshot to grab HTML structure and CSS from a target URL (optionally scoped by a selector). Then run extract to convert the captured content into formats like CSS, Tailwind classes, or React-ready code. Finally, use apply to generate ready-to-use component templates tailored to your target framework (e.g., React with styled-components) and apply the extracted styles to your components. This enables a streamlined design-to-developer handoff across projects and frameworks.

Prerequisites:

• Node.js installed (LTS preferred)
• npm or yarn available

Setup steps:

1. Install dependencies npm install

2. Prepare the build (first-time or after changes) npm run prepare

3. Build the server (produces build/index.js) npm run build

4. Run in development with auto-rebuild (optional) npm run watch

5. Optional: run the server directly via Node (example path is provided in mcp_config) node /path/to/design-copier/build/index.js

Notes:

• Ensure your environment has access to the required system dependencies for any design extraction libraries used by the server.
• If you modify config, update your MCP host's json accordingly (see the provided examples in the repository).

Tips and common issues:

• Since MCP servers use stdio for communication, verify that the host application can spawn and connect to the process without redirection issues.
• Use the MCP Inspector for debugging; install via npm run inspector to get a debugging URL.
• If the build output path differs in your environment, update the mcp_config accordingly (index.js location).
• For CI environments, consider setting NODE_ENV=production and disabling verbose logs unless debugging.
• Environment variables can customize behavior (e.g., feature flags, API endpoints) and should be added to the mcp_config under env.
• When using designcopier_snapshot, you can supply a URL and an optional CSS selector to scope the capture to a specific element.
• designcopier_extract supports multiple output formats (CSS, Tailwind, React) to fit into your existing frontend workflow.
• designcopier_apply will generate framework-specific components, such as React components with or without styled-components, based on the extracted styles.