Design Copier

设计复印机MCP服务器

一个网页设计提取工具，用于捕获和转换网页设计以供开发

这是一个基于TypeScript的MCP服务器，实现了一个网页设计复制系统。它允许您：

• 捕获网页样式和HTML结构
• 提取CSS并将其转换为Tailwind类
• 将提取的样式应用于不同的前端框架

特性

工具

• designcopier_snapshot -捕获网页或元素样式

- 接受URL和可选的CSS选择器 - 从目标返回HTML和CSS样式

• designcopier_extract -提取样式并转换为不同格式

- 处理HTML和CSS内容 - 支持转换为顺风类 - 可以以CSS、Tailwind或React格式输出

• designcopier_apply -将提取的样式应用于目标框架

- 提取样式并将其应用于组件 - 支持React（带样式化组件） - 创建即用型组件模板

克隆回购与开发

安装依赖项：

npm install

npm run prepare , first time only or any custom changes 

构建服务器：

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

对于自动重建的开发：

npm run watch

安装

要与Claude Desktop一起使用，请添加服务器配置：

在MacOS上： ~/Library/Application Support/Claude/claude_desktop_config.json 在Windows上： %APPDATA%/Claude/claude_desktop_config.json 使用Cline或Roo的VS代码： Click top MCP Server icon, go to 'Installed' and at bottom of server list running, click 'Configure MCP Server' 将此添加到配置中：

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

另一个例子：

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

调试

由于MCP服务器通过stdio进行通信，调试可能具有挑战性。我们建议使用 MCP检查员，可作为包脚本使用：

npm run inspector

检查器将提供一个URL，用于访问浏览器中的调试工具。