MCP 协议应用场景 —— Cursor 连接 Master Go AI

一、MCP 协议简介

MCP（Model Context Protocol，模型上下文协议）是一种用于 AI 应用与外部工具之间建立安全连接和标准化交互的通信协议。它的核心价值在于解决两大行业痛点：

1. 不同工具接口标准不统一，AI 难以直接调用；

2. 直接 API 调用存在安全风险，缺乏权限和认证控制。

MCP 三层架构设计

MCP 通过清晰的层级分工实现高效交互：

AI 应用层：作为调用方发起需求，例如 Cursor 想访问设计文件（例："访问 Master Go 设计稿并生成代码"）。
MCP 协议层：在中间层进行协议转换、任务调度和安全认证，充当 "万能适配器"。
外部工具集层：提供具体功能资源，如数据库、命令行、第三方 API，或设计平台 Master Go。

通过这种架构，MCP 就像一座桥梁，既能让 AI 方便与其它工具建立连接关系，又能确保交互过程安全、可控。

二、MCP 协议为何适合连接 AI 与设计工具

在前端开发 场景中，开发者常常需要将设计稿 转换为前端代码 。传统方式是上传截图给 AI，让 AI 根据像素图像解析布局和样式。然而，这种方式存在明显局限性：图像识别会受到清晰度、色彩偏差和缩放等因素影响，很容易造成识别误差 ，比如按钮尺寸不对、颜色代码偏差、字体样式不准等，导致生成的代码需要再次修改。

相比之下，MCP 协议提供了一种更精确的解决方案：

AI 工具（例如 Cursor）可以通过 MCP 协议直接访问设计平台（例如 Master Go）的设计文件源数据 。所谓源数据，并不是图像，而是设计文件底层的结构化信息。例如，一个按钮的源数据中包含：

json 复制代码

{
  "id": "btn-123",
  "type": "Button",
  "name": "提交",
  "position": { "x": 120, "y": 340 },  // 精确坐标
  "size": { "width": 160, "height": 40 },  // 准确尺寸
  "style": {
    "backgroundColor": "#007BFF",  // 十六进制色值
    "textColor": "#FFFFFF",
    "fontFamily": "Arial",
    "fontSize": 14,
    "borderRadius": 8  // 圆角参数
  },
  "layerIndex": 12,  // 图层层级
  "interactions": [
    { "event": "onClick", "action": "submitForm" }  // 交互逻辑
  ]
}

元素的几何信息（位置坐标、宽高尺寸、层级顺序）；
样式信息（背景颜色、字体名称、字号、边框圆角、阴影效果）；
组件属性（按钮、输入框、图标等类型）；
图层关系（哪些元素在上层，哪些在下层）；
资源引用（图片链接、SVG 路径、图标库引用）；
交互逻辑（点击后跳转、触发的动作）。

有了这些精确的结构化数据 ，AI 直接依据真实的属性生成代码。这样得到的代码在布局、样式和交互上都能高度还原设计稿，减少再次修复的工作量。

三、Cursor 连接 Master Go 的详细步骤

前置准备

环境要求：

安装 Node.js v18+（支持 ES Modules语法）；
Master Go 账号需拥有 研发席位权限（需要申请研发席位，否则连接生成令牌连接会报错，可以申请免费试用一个月），点击顶部按钮，然后申请团队版；

MasterGo AI：快速生成网页设计图AI工具(实践方法）

推荐使用 Cursor v0.46+（MCP 功能在新版本中优化）。

获取 Master Go 访问令牌：

登录 Master Go → 右上角头像 → 个人设置 → 安全设置 ---> 生成令牌；
保存令牌（形如 mg_xxxxxxxxxx），后续配置需使用。

配置 Cursor 的 MCP 连接

步骤 1：安装 Master Go MCP 插件

打开 Cursor → 点击右上角设置→ Tools → Add a Custom MCP Server → 打开 mcp.json 文件；

步骤 2：配置 mcp.json 文件

在弹出的配置窗口中，替换为以下参数（区分系统）：

Windows 系统配置

perl 复制代码

{
  "mcpServers": {
      "mastergo-magic-mcp": {
          "command": "cmd",
          "args": [
              "/c",
              "npx",
              "-y",
              "@mastergo/magic-mcp",
              "--token=MG_MCP_TOKEN",
              "--url=https://mastergo.com",
              "--rule=如果使用图片，则下载到本地并使用相对路径",
              "--timeout=30000"
          ]
      }
  }
}

Mac 系统配置（相对于 Windows 系统的改动）

perl 复制代码

{
  "mcpServers": {
      "mastergo-magic-mcp": {
          "command": "/bin/sh",  // 将 Windows 的 "cmd" 改为 "/bin/sh"
          "args": [
              "-c",  // 将 Windows 的 "/c" 改为 "-c"
              "npx",
              "-y",
              "@mastergo/magic-mcp",
              "--token=MG_MCP_TOKEN",
              "--url=https://mastergo.com",
              "--rule=如果使用图片，则下载到本地并使用相对路径",
              "--timeout=30000"
          ]
      }
  }
}

主要字段含义说明

args：命令的参数列表。
- /c（Windows）和 -c（Mac）：用于执行后续的命令字符串。
- npx：用于执行 npm 包的工具。
- -y：在安装包时自动确认，无需手动输入 yes。
- @mastergo/magic-mcp：Master Go 的 MCP 服务包。
- --token=MG_MCP_TOKEN：用于身份验证的 Master Go 访问令牌，需替换为实际获取的令牌。
- --url=``https://mastergo.com：Master Go 的官方网址。
- --rule=如果使用图片，则下载到本地并使用相对路径：设置图片处理规则。
- --timeout=30000：设置超时时间，单位为毫秒，此处表示 30 秒。

步骤 3：验证连接

保存配置后，返回 MCP 设置页面；
点击刷新按钮，若服务器状态显示 绿色图标，则连接成功。

四、实战：从设计稿生成前端代码

步骤 1：获取设计稿链接

在 Master Go 中打开目标设计稿；
选中需生成代码的容器图层（如整个页面或组件）；
右键 → 复制容器链接（格式：mastergo.com/file/xxx#pa...）。

步骤 2：在 Cursor 中生成代码

打开 Cursor → 按 Ctrl+L 进入 Agent 模式；
输入提示词（示例）：

bash 复制代码

请根据以下设计稿链接生成代码：

1\. 使用 Vue 3.5 框架和 Element UI 组件库

2\. 严格遵循设计稿的布局、样式和交互逻辑

3\. 代码需包含响应式适配

设计稿链接：https://mastergo.com/file/xxx#page=xxx\&element=xxx

发送后，Cursor 会自动通过 MCP 协议获取设计源数据，生成贴合设计的代码。

我正在全流程开发这个多模态 AI 全栈项目，如果感兴趣，可以点击链接了解： MasterGo AI+Cursor辅助开发多模态全栈项目

五、总结

MCP 协议通过标准化接口和安全机制，改变了 AI 与外部工具的交互方式。在前端开发场景中，Cursor 借助 MCP 连接 Master Go 后，从 "基于像素识别生成代码" 升级为 "基于源数据精准构建"，生成的前端代码自然更贴近真实效果。

随着 MCP 生态的完善，未来 AI 还将实现与更多工具的无缝连接，推动开发流程向 "自然语言指令→自动化执行" 的方向演进。