文章目录
-
- 什么是 MCP
- 前置条件
-
- 1. 账号权限
- 2. 环境要求
- 3. 设计稿准备
- MasterGo AI Bridge 支持的能力
- 操作步骤
-
- 第一步: 安装/升级 TRAE CN IDE
- 第二步: 获取 MasterGo 的 Personal Access Token
- 第三步: 添加 MCP Server
- 第四步: 创建自定义智能体（可选）
- 第五步: 调用 MCP 生成前端代码
-
- 5.1 复制 MasterGo 设计稿链接
- 5.2 在 TRAE CN IDE 中生成代码
- 5.3 代码优化与迭代
- 复现效果
- 常见问题与排查
-
- Q1: MCP 无法读取 MasterGo 设计稿数据
- Q2: 生成的代码中图片资源缺失
- Q3: 样式参数与设计稿不一致
- Q4: Token 泄露/需要撤销
- 注意事项
-
- 1. 数据安全
- 2. 兼容性
- 3. 效率优化
- 总结
- AI 原生开发工作流逻辑图
文档信息
- 创建时间：2026-01-22
- 作者：zuozewei
- 功能：使用 TRAE CN 将 MasterGo 设计稿转化为前端代码
- 技术栈：MasterGo、TRAE CN、MCP
什么是 MCP
MCP（Model Context Protocol，模型上下文协议）是 MasterGo（国内原型设计平台）为 AI 工具打通设计稿数据的标准化协议，可让 TRAE CN IDE（国际版不支持） 等 AI 工具直接读取 MasterGo 设计稿的结构化数据（如布局、样式、资源、变量等），无需人工导出/上传设计稿，实现「设计稿 → 代码」的端到端智能化转换。
简单来说，你无需再手动截图、描述设计细节，AI 工具可通过 MCP 直接「读懂」MasterGo 设计稿，精准生成符合设计规范的前端代码，大幅降低设计还原的沟通成本和手动开发工作量。
前置条件
在使用 MasterGo MCP 前，请确保满足以下条件：
1. 账号权限
- 持有 MasterGo 账号（企业版，支持 DSL（用于自行开发 D2C）），且账号已完成手机号/邮箱验证；
- 若操作团队/企业空间的设计稿，需拥有该设计稿的「查看」或「编辑」权限（仅「评论」权限无法读取设计稿数据）；
- 生成 Personal Access Token 时，账号需为企业空间的「成员」或「管理员」（访客账号无法生成 Token）。
MasterGo MCP 中 DSL 的技术原理，是作为“设计稿→代码”的标准化中间层：先通过授权后的 MasterGo API 拉取设计稿全量原始数据，再过滤冗余信息、统一格式完成数据清洗，接着为纯数值数据注入前端领域语义（如标注组件类型、样式变量），最终输出结构化的 DSL 数据（通常为 JSON），供 TRAE IDE、AI 智能体等工具直接解析，高效生成符合设计意图的前端代码。
补充一个 DSL 的极简 JSON 示例：
{
"components": [
{
"id": "123",
"type": "Button",
"props": {
"text": "点击我",
"style": {
"color": "red",
"fontSize": 16
}
}
}
]
}
2. 环境要求
- TRAE CN IDE 版本 ≥ 1.0.0（过低版本可能不兼容 MasterGo MCP 协议）；
- 网络环境可正常访问 MasterGo 官网（https://mastergo.com）及 TRAE CN IDE 服务器。
3. 设计稿准备
- 设计稿需已发布至 MasterGo 云端（本地离线设计稿无法被 MCP 读取）；
- 建议对设计稿进行分层/命名规范（如统一组件命名、规范样式变量），可提升 AI 生成代码的可读性。
MasterGo AI Bridge 支持的能力
当前 MCP 工具版本为 0.1.2，MasterGo AI Bridge 基于该版本提供以下核心 API 方法，用于支撑设计稿数据的读取与组件关联：
| mcp_getDsl | 用于获取设计稿的领域特定语言数据 |
| mcp_getComponentLink | 当 mcp_getDsl 返回数据包含非空内容时，用于获取组件关联链接 |
| mcp_getMeta | 当用户需要搭建完整网站时，调用此工具获取相关元数据 |
| mcp_getComponentGenerator | 需主动调用此工具，获取组件开发相关资源 |
操作步骤
第一步: 安装/升级 TRAE CN IDE
第二步: 获取 MasterGo 的 Personal Access Token
Token 是 MCP 工具访问 MasterGo 设计稿数据的身份凭证，需严格按照官方规范生成：
操作如下图： 
第三步: 添加 MCP Server
- IDE 模式：点击右上角「设置」→「MCP」；
- SOLO 模式：点击对话面板右上角「设置」→「MCP」。
- 点击「添加 → 从市场添加」，或直接点击页面中部「从市场添加」按钮；
- 若市场中未找到「MasterGo Magic Mcp」，可通过搜索框输入关键词快速定位。
- 点击「MasterGo Magic Mcp」右侧「+」按钮，弹出配置弹窗；
- 粘贴第二步 Personal Access Token（启用验证 Token 有效性）；
- 验证通过后，点击「确认」完成添加。
验证连接失败排查：
- 检查 Token 是否复制完整（无空格/换行）；
- 检查 Token 权限是否包含「文件内容（只读）」；
- 检查网络是否可访问 MasterGo 官网。
操作如下图： 
第四步: 创建自定义智能体（可选）
内置智能体「Builder with MCP」可满足基础需求，自定义智能体可针对性优化代码生成规则：
-
名称：如「MasterGo 设计稿转 Vue 代码」（明确场景）；
-
提示词（官方推荐模板）：
你是专业的前端开发工程师，需基于 MasterGo 设计稿数据（通过 MCP 获取）完成以下要求：
1. 代码框架：使用 Vue 3（可替换为 React/Angular 等）；
2. 样式规范：严格遵循设计稿中的颜色、字体、间距、圆角等样式参数，使用 REM 适配不同屏幕；
3. 代码结构：组件化拆分（按设计稿模块划分），注释清晰，符合前端工程化规范；
4. 资源处理：自动下载设计稿中的图标/图片资源，存放至「assets」目录，路径映射正确；
5. 兼容性：兼容 Chrome 90+、Edge 90+、Safari 14+ 浏览器。
禁止擅自修改设计稿中的样式参数，若有不明确的地方，先询问用户再生成代码。 -
工具配置：
- MCP 工具：仅勾选「MasterGo Magic Mcp」；
- 内置工具：勾选「阅读」「编辑」「终端」「预览」（满足代码生成+预览需求）。
效果如下图： 
第五步: 调用 MCP 生成前端代码
5.1 复制 MasterGo 设计稿链接
- 单个组件/画板：点击选中目标节点；
- 整个页面：无需选中，直接复制设计稿根链接。
提示：包含 nodeId 的链接仅读取指定节点数据，无 nodeId 则读取整个设计稿。
5.2 在 TRAE CN IDE 中生成代码
https://mastergo.com/file/xxxxxx?fileOpenFrom=project&page_id=xxxxxxxxx&layer_id=xxxxxxxxx
要求：
1. 使用 Vue + Tailwind CSS 开发；
2. 生成响应式页面，适配移动端(375px)、平板(768px)、桌面端(1920px)；
3. 将图片资源下载至「src/assets/images」目录；
4. 生成后在浏览器中预览效果。
- 调用 MasterGo Magic Mcp → 读取设计稿数据；
- 解析样式/布局/资源 → 生成标准化前端代码；
- 自动创建文件（index.html、src/App.js、src/index.css 等）；
- 下载设计稿资源至指定目录。
操作如下图： 
5.3 代码优化与迭代
若生成的代码不符合预期，可通过以下方式优化：
复现效果
设计稿原图如下： 
代码复现如下： 
常见问题与排查
Q1: MCP 无法读取 MasterGo 设计稿数据
原因及解决方案：
Q2: 生成的代码中图片资源缺失
原因及解决方案：
Q3: 样式参数与设计稿不一致
原因及解决方案：
Q4: Token 泄露/需要撤销
注意事项
1. 数据安全
- 勿将 Personal Access Token 分享给无关人员，定期（如 30 天）轮换 Token；
- 仅向可信的 AI 工具（如 TRAE CN IDE）配置 Token，避免数据泄露。
2. 兼容性
- TRAE CN IDE 低版本可能不支持最新的 MasterGo MCP 协议，建议保持 TRAE CN IDE 为最新版；
- MasterGo 本地客户端的离线设计稿无法被 MCP 读取，需先发布至云端。
3. 效率优化
- 设计稿命名/层级规范可大幅提升代码生成质量；
- 优先选择「读取指定位置(layer_id)」而非整个设计稿，可减少 AI 解析时间。
总结
AI 原生开发工作流逻辑图
