在 UI 开发中，"设计稿还原" 往往耗费大量时间，尤其需要手动对照像素、调整布局与样式。本文将带大家通过 MasterGo MCP（Magic Component Platform） 与 Cursor 的联动，实现设计稿到代码的自动化还原，大幅提升开发效率。以下是详细操作步骤，新手也能轻松上手！
一、前置准备：明确核心条件与工具
在开始前，需确保满足以下基础要求，避免后续操作报错：
- MasterGo 权限 ：必须拥有 MasterGo 团队版及以上 的编辑席位或研发席位（个人免费版不支持）。
- 工具安装 ：已安装 Cursor（最新版即可，无需额外插件）。
- 核心依赖 ：确保本地环境可正常使用 npx（Node.js 14+ 版本自带，未安装需先配置 Node 环境，Node.js最好安装18+版本）。
二、Step 1：获取 MasterGo 个人访问令牌（Token）
Token 是 MasterGo 与 Cursor 联动的 "钥匙"，需先在 MasterGo 官网生成：
- 打开 MasterGo 官网，输入账号密码登录。
- 点击右上角 个人头像 ，在下拉菜单中选择 "个人设置"，进入设置页面。
- 在左侧菜单栏找到 "安全设置" ，点击进入后找到 "个人访问令牌" 模块。
- 点击 "生成令牌" ，系统会自动生成一串 Token，尽量保存下来Token以便后续使用。
⚠️ 重要提醒：Token 仅本人可见，切勿分享给他人，避免数据泄露！
三、Step 2：配置 Cursor 的 MCP 服务
接下来需在 Cursor 中新建 MCP 服务，并关联刚才生成的 MasterGo Token：
- 打开 Cursor 软件，点击左侧菜单栏的 "设置"（齿轮图标）。
- 在设置页面中，找到并点击 "MCP" 选项（位于 "Background Agents" 下方）。
- 点击 "New MCP Server" （新建 MCP 服务），此时会提示配置 mcp.json 文件。
-
将以下代码复制到 mcp.json 中，将 MG_MCP_TOKEN替换为 Step 1 中保存的 Token，替换后点击 "保存"：
{
"mcpServers": {
"mastergo-magic-mcp": {
"command": "npx",
"args": [
"-y",
"@mastergo/magic-mcp",
"--token=MG_MCP_TOKEN", // 替换为你的Token
"--url=https://mastergo.com"
],
"env": {
"NPM_CONFIG_REGISTRY": "https://registry.npmjs.org/"
}
}
}
} -
保存后返回 MCP 设置页面，若看到 "mastergo-magic-mcp" 左侧显示 绿色圆点，说明配置成功；若未显示，关闭 Cursor 重新打开即可。
四、Step 3：获取 MasterGo 设计稿的带 Layer ID 链接
需复制包含 "Layer ID" 的设计稿链接，确保 Cursor 能精准识别设计内容：
- 回到 MasterGo 设计稿页面，全选需要还原的设计图层 （快捷键 Ctrl+A 或手动框选）。
- 复制浏览器地址栏中的 URL，需确保链接中包含 layer_id 参数（示例：https://mastergo.com/file/171884599236256?fileOpenFrom=project\&page_id=M\&layer_id=7%3A1384）。
- ❌ 错误链接：无 layer_id（仅文件地址，无法定位图层）；
- ✅ 正确链接：包含 layer_id（可精准定位选中的设计内容）。
五、Step 4：Cursor 一键生成还原代码
配置完成后，只需在 Cursor 中发送指令，即可自动生成 UI 代码：
- 打开 Cursor，切换到 "Agent" 模式 （左侧菜单栏点击 "Agent"，或使用快捷键 Ctrl+L）。
- 在 Agent 对话框中，输入以下指令（替换链接为 Step 3 复制的设计稿 URL）：
|----------------------------------------------------------------------------------------------------------------------------------|
| @https://mastergo.com/file/171884599236256?fileOpenFrom=project\&page_id=M\&layer_id=7%3A1384 请将这个设计稿的内容 100% 还原到 @index.vue 文件中 |
- 发送指令后，等待 Cursor 执行（过程中会自动调用 MasterGo MCP 解析设计稿），几分钟后即可生成完整的 index.vue 代码（包含 HTML 结构、CSS 样式）。
六、效果对比：设计稿 vs 生成代码
（上图为 MasterGo 设计稿截图，下图为生成代码的浏览器运行效果）
七、常见问题与解决方案
1. 报错：{"code":"10003","message":"禁止访问..."}
- 原因：MasterGo 权限不足（非团队版）或 Token 错误；
- 解决：升级为 MasterGo 团队版，或重新生成并替换正确的 Token。
2. MCP 服务无绿色圆点（配置失败）
- 原因：Node.js 未安装（npx 不可用）或代码格式错误；
- 解决：安装 Node.js 18+ 版本，检查 mcp.json 语法（确保无多余逗号、引号闭合）。
3. 生成代码缺失部分元素
- 原因：设计稿未全选（漏选图层）或链接无 layer_id；
- 解决：重新全选设计图层，复制包含 layer_id 的链接。
（注：文档部分内容可能由 AI 生成）