Muiscan MCP Server

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

1. 安装依赖项

   npm install

1. 配置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"]
       }
     }
   }

1. 重新启动克劳德桌面

保存配置后，重新启动Claude Desktop以使更改生效。

用法

安装后，Muiscan提供：

工具

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

提示

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

在克劳德桌面

1. 打开克劳德桌面
2. 首选 设置 → 工具和MCP
3. 验证“Muiscan”是否出现在MCP服务器列表中
4. 从Figma出口:

- 在Figma中打开您的设计 - 选择要转换的框架/组件 - 运行Muiscan Figma插件复制布局

1. 转换为光标或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连接

许可证

麻省理工学院

贡献

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