通过在 Cursor 的 MCP 设置中添加命令 npx -y @mastergo/magic-mcp --token=YOUR_TOKEN，即可让 AI 直接读取 MasterGo 设计稿数据并自动生成高还原度的前端代码。
前言：告别像素级手磨代码
在传统的前端开发流程中，"从设计到代码"往往是最耗时的环节。开发者需要反复在设计工具和编辑器之间切换，手动测量间距、提取颜色值、计算布局比例。即便如此，最终的样式还原度也难以保证。随着 Cursor 引入了 MCP（Model Context Protocol）协议，MasterGo 官方推出的 Magic MCP 服务彻底打破了这一壁垒。它允许 Cursor AI 直接访问设计稿的底层 DSL 数据，这意味着 AI 不再是"看图说话"，而是直接读取精确的设计规范，实现 99% 以上的样式还原。
第一步：获取 MasterGo 访问令牌 (Token)
要让 Cursor 有权限读取你的 MasterGo 文件，首先需要生成一个个人访问令牌。请登录 MasterGo 官网，点击右上角头像进入"个人设置"，随后在"设置"菜单中找到"安全设置"选项。在这里你可以看到"生成令牌"的按钮，点击并为该令牌命名（如 Cursor-Integration）。系统会生成一段长字符串，请务必立即复制并妥善保存，因为出于安全考虑，该令牌在关闭窗口后将无法再次查看。 MasterGo MCP - MasterGo 帮助中心
第二步：环境准备与 Node.js 检查
MasterGo MCP 服务是基于 Node.js 运行的，因此在配置之前，请确保你的电脑已安装 Node.js 环境。你可以打开终端（Terminal 或 CMD），输入 node -v 来验证。如果显示版本号（建议 v18 及以上），则说明环境已就绪。如果尚未安装，请前往 Node.js 官网下载长期支持版（LTS）。此外，确保你的 Cursor 版本是最新的，以获得对 MCP 协议的最佳支持。 MasterGo MCP - MasterGo 帮助中心
第三步：在 Cursor 中激活 MasterGo MCP
Cursor 提供了两种配置 MCP Server 的方式，你可以根据自己的习惯选择：
方式一：通过 UI 界面配置（推荐新手）
打开 Cursor 的设置面板（快捷键 Ctrl + Shift + J 或点击右上角齿轮图标），导航至 Features 选项卡下的 MCP 栏目。点击 + Add New MCP Server 按钮，在弹出的窗口中填入以下信息：
- Name : 建议填写
MasterGo。 - Type : 选择
command。 - Command : 输入
npx -y @mastergo/magic-mcp --token=你的Token（请将"你的Token"替换为第一步中获取的字符串）。
对于 Windows 用户，如果遇到执行权限问题，建议将 Command 栏的内容修改为 cmd /c npx -y @mastergo/magic-mcp --token=你的Token。点击保存后，如果看到绿色的连接状态，说明配置成功。
方式二：通过 mcp.json 配置文件（推荐进阶用户）
如果你更喜欢直接编辑配置文件，或者需要在多个项目中复用相同的 MCP 配置，可以手动创建或修改 mcp.json 文件。该文件通常位于以下位置之一：
- 项目级别：
.cursor/mcp.json（仅当前项目生效） - 全局级别：
~/.cursor/mcp.json（所有项目生效）
将以下内容粘贴到配置文件中，并将 YOUR_TOKEN 替换为你实际获取的 Token：
json
{
"mcpServers": {
"mastergo-magic-mcp": {
"command": "npx",
"args": [
"-y",
"@mastergo/magic-mcp",
"--token=YOUR_TOKEN",
"--url=https://mastergo.com"
],
"env": {
"NPM_CONFIG_REGISTRY": "https://registry.npmjs.org/"
}
}
}
}这里的 env 字段配置了 npm 镜像源，可以有效避免国内网络环境下可能出现的包下载超时问题。保存文件后，重启 Cursor 使配置生效。 mastergo-design/mastergo-magic-mcp
第四步：实战演练------从设计稿到 React/Vue 组件
配置完成后，你就可以在 Cursor Chat 中通过链接直接### **通过在 Cursor 的 MCP 设置中添加命令 npx -y @mastergo/magic-mcp --token=YOUR_TOKEN，即可让 AI 直接读取 MasterGo 设计稿数据并自动生调用设计数据了。在 MasterGo 设计稿中，选中你想要生成的图层或容器，右键选择"复制链接"。回到 Cursor 的对话框，输入类似这样的指令："参考这个设计稿链接 https://mastergo.com/file/xxxx?layer=yyyy，帮我用 React 和 Tailwind CSS 写一个响应式的商品卡片组件"。
此时，Cursor 会通过 MCP 插件调用 MasterGo 的 API，解析该图层的宽度、高度、圆角、阴影、字体样式以及 Flex 布局信息。它生成的代码将不再是模糊的猜测，而是带有精确像素值和 CSS 变量的高质量组件代码。
进阶技巧与常见问题排查
为了获得更佳的体验，你可以尝试一些高级配置。例如，在配置命令中添加 --cleanLayers=true 参数，可以自动过滤掉设计稿中冗余的编组层，让生成的代码结构更加扁平化。如果遇到连接超时，可以检查是否设置了网络代理，或者尝试在 env 中配置其他 npm 镜像源（如 https://registry.npmmirror.com）。
如果 Cursor 提示找不到工具，请检查 MCP 设置中的状态是否为 Active。有时重启 Cursor 能够解决大部分配置不生效的问题。此外，请确保你提供的 MasterGo 链接包含具体的 layer 参数，否则 AI 可能无法准确定位到具体的设计元素。 mastergo-design/mastergo-magic-mcp
希望这份指南能帮你成功开启 AI 驱动的设计开发新流。祝你的编码过程如丝般顺滑。