Skip to content

Magic MCP

MasterGo Magic MCP 是原有的远程 MCP 服务,主要用于通过远程服务器获取设计稿的 DSL / D2C 数据。

远程 MCP @mastergo/magic-mcp 是提供特定功能的轻量级程序,通过标准化的 Model Context Protocol 向客户端暴露多种能力,例如向 Cursor、Trae、Claude Code 等支持 MCP 的客户端提供获取设计图数据的能力。

开始前准备

请确认以下条件已经满足:

  • 当前电脑已安装 Node.js 18.0.0 或以上版本,npm 8.0.0 或以上版本。点击下载 Node.js
  • 你的 IDE / CLI 支持 MCP 服务配置。
  • 账号拥有团队版及团队版以上权限,且需要读取的设计文件已放入有权限的团队中。

配置 MCP 服务

获取个人访问令牌(MG_MCP_TOKEN)

  1. 访问 MasterGo 官网 并登录。
  2. 进入个人设置。
  3. 点击「安全设置」选项卡。
  4. 找到「个人访问令牌」。
  5. 点击「生成令牌」并复制保存。

获取个人访问令牌

配置参数说明

在客户端 MCP 配置中添加如下服务配置:

json
{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": ["-y", "@mastergo/magic-mcp", "--token=你的个人令牌", "--url=https://mastergo.com"],
      "env": {}
    }
  }
}

权限提示

如遇权限不足提示,请检查 Token 是否正确、是否有团队版及团队版以上权限,以及设计文件是否已拖入有权限的团队中。

在不同工具中配置与使用

1. Claude Code

将配置粘贴到 Claude Code 的全局配置中:

Claude Code 配置

2. Cursor

编辑 ~/.cursor/mcp.json,将配置添加到 mcpServers 中:

Cursor 配置

常用方法

1. mcp_getDsl 方法

获取选中图层的 DSL 数据。

  • 注意:需先在 MasterGo 画布中选中图层,layerId 为必传参数。

getDsl 演示

2. mcp_getD2c 方法

获取 D2C 相关数据并与大模型交互。

  • 注意:先在插件中点击发送数据按钮,将 D2C 数据发送的同时会将 contentId 复制到剪切板,将其粘贴至大模型对话框中进行对话即可。

getD2c 演示

VSCode 拓展中使用 MCP

在 VSCode 插件生态中同样支持使用 MasterGo MCP 获取设计数据:

VSCode 拓展演示

常见问题

问题原因解决方法
权限不足 / 连接失败Token 未配置、失效或无权限检查个人访问令牌是否正确,确保账号拥有团队版及以上权限
无法读取设计数据文件不在权限范围内或未选中图层确保文件已移动至有权限的团队,并在操作时选中目标图层
返回数据过大超时复杂页面包含过多节点建议选中具体组件或局部容器分别获取 DSL
频繁触发 429 错误触发速率限制适当降低请求频率

评价此篇文章

👉 本篇文章对你是否有帮助?👍🏻 有帮助 👎🏻 无帮助,我们期待着你的反馈。