Cursor 配置 MasterGo MCP 还原UI设计稿

一、硬性条件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.jsMCP 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, // 替换为你的个人令牌 --urlhttps://mastergo.com ] }三、--token你的MG_MCP_TOKEN必填含义MasterGo个人访问令牌作用身份验证用于访问你的MasterGo账号和数据获取步骤登录 MasterGo 网页版点击右上角头像 → 个人设置在右侧选择「安全设置」选项卡找到「个人访问令牌」部分点击「生成新令牌」复制生成的字符串四、--urlhttps://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: 文件不在团队项目中