AI导哈

网页设计提取工具

一个基于TypeScript的MCP服务器，用于捕获网页设计并将其转换为适用于不同前端框架的样式。

  • by chipsxp
  • JavaScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 chipsxp/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，用于访问浏览器中的调试工具。

相关 MCP