一、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）的设计文件源数据。所谓源数据，并不是图像，而是设计文件底层的结构化信息。例如，一个按钮的源数据中包含：

{   "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 的详细步骤

前置准备

1. 环境要求：
   • 安装 Node.js v18+（支持 ES Modules）；
   • Master Go 账号需拥有 研发席位权限（需要申请研发席位，否则连接生成令牌连接会报错，可以申请免费试用一个月），点击顶部按钮，然后申请团队版；
   • - [MasterGo AI：快速生成网页设计图AI工具(实践方法）](https://juejin.cn/post/7441231092226572307)
   • 
   • 
   • 推荐使用 Cursor v0.46+（MCP 功能在新版本中优化）。

1. 获取 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 系统配置

{     "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 系统的改动）

{     "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 中打开目标设计稿；
• 选中需生成代码的容器图层（如整个页面或组件）；
• 右键 → 复制容器链接（格式：https://mastergo.com/file/xxx#page=xxx&element=xxx）。
• 

步骤 2：在 Cursor 中生成代码

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

请根据以下设计稿链接生成代码： 1. 使用 Vue 3.5 框架和 Element UI 组件库 2. 严格遵循设计稿的布局、样式和交互逻辑 3. 代码需包含响应式适配 设计稿链接：https://mastergo.com/file/xxx#page=xxx&element=xxx

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

多模态Ai项目全流程开发中，从需求分析，到Ui设计，程序开发，部署上线，感兴趣打开链接（带项目功能演示）：[AI多模态项目全栈开发](https://coding.m.imooc.com/classindex.html?cid=954)

五、总结

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

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