AI导哈

Figma转MUI组件工具

Muiscan是一款通过模型上下文协议（MCP）将Figma设计文件转换为生产就绪的MUI（Michael UI）Web组件的工具，适用于前端开发者和设计系统团队。

  • by michaeltrilford
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 michaeltrilford/muiscan-mcp

使用说明

Muiscan MCP服务器

通过模型上下文协议（MCP）将Figma文件转换为MUI设计系统组件。

Muiscan是什么？

Muiscan通过模型上下文协议将Figma设计转换为生产就绪的MUI（Michael UI）web组件。

MUI设计系统入门

在使用Muiscan之前，请设置您的MUI项目：

创建Mui应用程序

快速开始使用官方MUI入门模板：

创建Mui应用程序

一个轻量级的入门模板，用于使用Mui Web Components构建可访问、快速加载的界面。

# Clone the starter template
git clone https://github.com/michaeltrilford/create-mui-app.git
cd create-mui-app
npm install
npm start

一旦您设置了MUI项目，您就可以使用Muiscan将Figma设计直接转换为MUI组件。

安装

  1. 克隆或下载此存储库

    git clone https://github.com/yourusername/muiscan-mcp.git
cd muiscan-mcp

  2. 安装依赖项

    npm install

  3. 配置Claude桌面 将Muiscan服务器添加到Claude Desktop配置文件中：

    macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
    视窗: %APPDATA%\Claude\claude_desktop_config.json

    添加此配置（更新路径以匹配您的安装）：

    {
  "mcpServers": {
    "muiscan": {
      "command": "node",
      "args": ["/Users/AddYourPath/muiscan-mcp/server.js"]
    }
  }
}

  4. 重新启动克劳德桌面 保存配置后，重新启动Claude Desktop以使更改生效。

用法

安装后，Muiscan提供：

工具

  • translate_muiscan：将多扫描JSON转换为web组件

提示

  • mui-component-guide：将UI转换为MUI web组件的指南

在克劳德桌面

  1. 打开克劳德桌面
  2. 首选 设置 → 工具和MCP
  3. 验证“Muiscan”是否出现在MCP服务器列表中
  4. 从Figma出口:
    • 在Figma中打开您的设计
    • 选择要转换的框架/组件
    • 运行Muiscan Figma插件复制布局
  5. 转换为光标或play.muibook.com:
    • 将扫描的布局粘贴到提示中
    • 要求模型/提示将其转换为MUI web组件
    • MCP将使用组件指南生成代码

完成工作流程

Figma Design
    ↓
Muiscan Figma Plugin (Export)
    ↓
MUISON JSON (Copy to clipboard)
    ↓
Paste into Cursor or play.muibook.com
    ↓
Muiscan MCP (Transform)
    ↓
MUI Web Components

支持的组件

Muiscan支持一套全面的MUI组件，包括：

  • 输入：字段、复选框、输入、选择、切换、文件上传、进度
  • 内容：手风琴、标题、正文、代码、对话框、抽屉、引用、板条、智能卡、表格、图像、列表
  • 布局：卡片、容器、响应式、规则、v-stack、h-stack、网格
  • 反馈：警报、徽章、消息、加载器
  • 行动：按钮、按钮组、芯片、下拉菜单、链接
  • 导航：转盘控制器、步进器、标签控制器、标签栏

项目结构

muiscan-mcp/
├── server.js           # Main MCP server
├── mui-prompts.js      # Component guide and examples
├── transform.js        # JSON transformation logic
├── mcp.json            # Server configuration
├── package.json        # Node.js dependencies
└── README.md           # This file

发展

要在本地测试服务器，请执行以下操作：

npm start

故障排除

服务器未出现在Claude Desktop中

  1. 检查路径是否正确 claude_desktop_config.json 是正确的
  2. 验证是否安装了Node.js： node --version
  3. 完全重新启动克劳德桌面
  4. 检查Claude Desktop日志是否有错误

更改未生效

  1. 保存所有配置文件
  2. 完全退出并重新启动Claude Desktop（而不仅仅是关闭窗口）
  3. 清除所有缓存的MCP连接

许可证

麻省理工学院

贡献

欢迎投稿！请打开问题或提交拉取请求。

相关 MCP