https://github.com/chipsxp/design-copier
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
https://github.com/chipsxp/design-copier
css html mcp mcp-server tailwindcss
Last synced: about 1 month ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/chipsxp/design-copier
- Owner: chipsxp
- Created: 2025-05-11T06:08:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-13T00:53:39.000Z (about 1 year ago)
- Last Synced: 2025-05-13T01:36:48.457Z (about 1 year ago)
- Topics: css, html, mcp, mcp-server, tailwindcss
- Language: JavaScript
- Homepage: https://chipsxp.com
- Size: 33.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```bash
npm install
```
```bash
npm run prepare , first time only or any custom changes
```
Build the server:
```bash
npm run build , to make the build index.js file
```
For development with auto-rebuild:
```bash
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:
```json
"design-copier": {
"timeout": 60,
"command": "node",
"args": [ "C:\\Users\\$ProfileUser$\\your-folder\\whatever folder\\design-copier\\build\\index.js"
],
"transportType": "stdio"
}
```
Another example:
```json
{
"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](https://github.com/modelcontextprotocol/inspector), which is available as a package script:
```bash
npm run inspector
```
The Inspector will provide a URL to access debugging tools in your browser.