一、硬性****条件
1. 账号版本：必须是团队版或更高
- 个人版（免费版）账号无法使用 MCP，需要拥有团队版、企业版或教育版 的 MasterGo 账号权限
2. 设计稿文件位置：必须位于团队项目
- 草稿箱（Drafts）里的文件 MCP 无法读取，设计文件必须被移动到具体的团队空间下的项目中
- 判断依据：项目mastergo的URL路径应包含/team/，（如 https://mastergo.com/team/123456/file/...）
3. 身份凭证：有效的个人访问令牌
- 需要在 MasterGo 安全设置中生成 个人访问令牌
- 格式通常以 mg_开头的一长串字符串
- 该Token需配置到 Cursor 客户端的MCP设置中
4. 运行环境：Node.js 环境
- 本地需要安装 Node.js，MCP Server 通常通过 npx命令启动
二、配置 MCP
将MasterGo MCP 配置信息复制粘贴到Cursor的mcp.json文件， "你的MG_MCP_TOKEN" 修改成个人令牌（获取个人令牌看步骤三），保存后在Cursor Settings中启用mastergo-magic-mcp服务，左侧显示绿色圆点说明配置成功
"mastergo-magic-mcp": {
"desc": "MasterGo Magic MCP",
"command": "npx",
"args": [
"-y",
"@mastergo/magic-mcp",
"--token=你的MG_MCP_TOKEN", // 替换为你的个人令牌
"--url=https://mastergo.com"
]
}
三、--token=你的MG_MCP_TOKEN（必填）
含义： MasterGo个人访问令牌
作用： 身份验证，用于访问你的MasterGo账号和数据获取步骤：
- 登录 MasterGo 网页版
- 点击右上角头像 → 个人设置
- 在右侧选择「安全设置」选项卡
- 找到「个人访问令牌」部分
- 点击「生成新令牌」，复制生成的字符串
四、--url=https://mastergo.com（可选）
含义： MasterGo API服务地址
作用： 指定MCP服务连接的服务器地址
默认值： https://mastergo.com**协议要求：**必须使用 HTTPS，必须包含完整的协议头
五、Cursor读取 MasterGo 设计稿并生成代码
1、复制带layer_id设计稿链接
在 MasterGo 中打开对应文件，选中具体画板或图层，通过浏览器地址栏或右键"复制链接"获取 URL。格式通常为：
https://mastergo.com/file/xxxxxx?page_id=...&layer_id=...
2、在 Cursor 中发起指令
在 Cursor 的 Chat 面板（建议使用 Agent 模式）中，直接粘贴链接并给出指令。AI 会自动调用 MCP 工具抓取数据，不再"盲猜"样式，而是直接读取精确的尺寸、间距、颜色和字体变量，生成高保真的 HTML/CSS 或 Vue/React 代码
3、常用指令模版
| 场景 | 指令示例（直接复制修改） |
|---|---|
| 生成 HTML 结构 | 请解析这个设计稿链接 https://mastergo.com/file/xxx... 并生成对应的 HTML + CSS 代码，注意还原间距和颜色 |
| 生成 Vue/React 组件 | 参考这个设计稿 https://mastergo.com/file/xxx...，用 Vue 3 + Tailwind CSS 写一个商品卡片组件，要求响应式 |
| 提取设计变量 | 读取这个设计稿 https://mastergo.com/file/xxx... 中的颜色和字体样式，帮我生成一份 CSS 变量配置文件 |
| 生成 Icon 组件 | 解析这个设计稿 https://mastergo.com/file/xxx... 中的图标图层，生成一个可复用的 SVG React 组件 |
六、常见错误
"Invalid token": token无效或已过期
"No permission": 账号版本不支持或个人版
"Connection refused": URL地址错误
"File not found": 文件不在团队项目中