mastergo ai 实现设计稿一键转代码预览的关键在于通过mcp协议打通设计数据与ai工具的结构化通路，而非截图识别；需企业版账号、生成personal access token、配置cursor接入mcp server，并基于画布链接触发dsl解析与代码生成。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 实现设计稿一键转代码预览，关键不在于“点击就出代码”，而在于打通设计数据与AI工具之间的结构化通路。核心是启用 MCP（Model Context Protocol）协议，让 AI 能直接读取画布的 DSL 数据，而非靠截图识别。配置本身不复杂，但每一步都影响后续能否真正生成可用代码。
确认账号权限与生成 Personal Access Token
只有企业版账号且具备查看/编辑权限的设计稿才能被 MCP 读取。访客或仅评论权限无法调用 API。
- 登录 MasterGo → 右上角头像 → 个人设置 → 安全设置
- 点击“生成令牌”，有效期建议设为 180 天
- 复制生成的 token（格式如 mg_xse1da89123n），后续配置中需填入
配置 Cursor（或其他支持 MCP 的 IDE）接入 MasterGo MCP Server
Cursor 是目前最主流的落地载体，它通过本地运行 @mastergo/magic-mcp 包，把设计稿 DSL 实时拉取为 JSON 结构供 AI 解析。
Cursor 2.4
下载
Agents 正在你的整个代码库中处理越来越复杂、运行时间更长的任务。本次版本引入了新的 agent 框架改进，以实现更好的上下文管理，并在编辑器和 CLI 中带来了许多提升使用体验的修复。
- 打开 Cursor → 设置 → MCP 配置 → 点击 “Add new global MCP Server”
- 在自动生成的 mcp.json 文件中粘贴以下配置（替换
mg_token为你自己的 token）：
- 保存后重启 Cursor；若右下角出现 “MasterGo MCP” 工具列表，说明配置成功
- 常见失败原因：Node.js 版本低于 v18、npm 源不可达、Windows 下未指定 cmd 启动方式
在 Cursor 中触发 DSL 获取与代码生成
不是上传文件或截图，而是直接基于画布链接操作——这是“一键预览”的本质。
- 在 MasterGo 设计稿中，右键点击目标页面或图层 → 选择 “复制容器链接”
- 回到 Cursor，新建空白文件，粘贴该链接，并启用右下角的 Agent 模式
- 输入指令如：“根据这个 DSL 生成一个响应式 React 页面，使用 Tailwind CSS，保留按钮悬停效果”
- AI 将调用
getDSL工具解析结构，再结合语义生成可运行代码片段
验证与微调：预览 ≠ 完整交付
生成的代码是“可运行预览”，不是最终交付物。它默认还原布局、基础样式和简单交互（如 hover、跳转箭头），但业务逻辑、状态管理、API 接口仍需手动补充。
- 生成后可直接在 Cursor 内运行 HTML 或启动本地开发服务查看效果
- 若组件语义识别不准（例如把图标误判为文字），可在 MasterGo 中给图层重命名（如 “PrimaryButton”、“HeaderNav”），提升 DSL 解析准确率
- 颜色/间距等变量若已在 MasterGo 中定义为设计系统变量，DSL 会自动映射，无需硬编码
