使用 TRAE CN 结合 MasterGo MCP 实现设计稿转前端代码

1. 在对话输入框输入 @，点击「创建智能体」；
2. 配置参数：名称设为「MasterGo 设计稿转 Vue 代码」，工具勾选「MasterGo Magic Mcp」及内置的「阅读」「编辑」「终端」「预览」；
3. 点击创建并立即使用。

推荐提示词模板：

你是专业的前端开发工程师，需基于 MasterGo 设计稿数据（通过 MCP 获取）完成以下要求：
1. 代码框架：使用 Vue 3（可替换为 React/Angular 等）；
2. 样式规范：严格遵循设计稿中的颜色、字体、间距、圆角等样式参数，使用 REM 适配不同屏幕；
3. 代码结构：组件化拆分（按设计稿模块划分），注释清晰，符合前端工程化规范；
4. 资源处理：自动下载设计稿中的图标/图片资源，存放至「assets」目录，路径映射正确；
5. 兼容性：兼容 Chrome 90+、Edge 90+、Safari 14+ 浏览器。
禁止擅自修改设计稿中的样式参数，若有不明确的地方，先询问用户再生成代码。

最后，调用 MCP 生成前端代码

复制设计稿链接

打开 MasterGo 设计稿，选中需要转换的范围（单个组件/画板或整个页面）。右键点击选中区域 →「复制链接」→「复制选中内容链接」。包含 nodeId 的链接仅读取指定节点数据，无 nodeId 则读取整个设计稿。

生成代码

在 TRAE CN IDE 中打开空项目文件夹，发送指令后 IDE 会自动执行读取、解析、生成及资源下载操作。

指令示例：

请基于以下 MasterGo 设计稿链接生成前端代码： 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. 生成后在浏览器中预览效果。

代码优化与迭代

若生成的代码不符合预期，可通过以下方式优化：

1. 补充精准指令：如「修复按钮样式与设计稿不一致的问题，按钮圆角应为 8px」；
2. 调整智能体提示词：优化代码框架或样式规范；
3. 修正设计稿：若设计稿存在命名不规范或层级混乱，整理后重新复制链接生成。

常见问题与排查

Q1: MCP 无法读取 MasterGo 设计稿数据

• Token 无效或过期：重新生成 Token，确保权限包含「文件内容（只读）」；
• 设计稿权限不足：联系所有者将你的账号添加为「查看者/编辑者」；
• 链接格式错误：确保链接包含 file/xxxxxx（设计稿 ID），而非分享链接；
• 网络问题：检查是否能访问 MasterGo 官网。

Q2: 生成的代码中图片资源缺失

• 图片节点未选中：复制链接时确保选中包含图片的节点；
• 图片格式不支持：MasterGo MCP 暂不支持 WebP 格式，建议导出为 PNG/SVG 后重新上传；
• 资源下载路径错误：在提示词中明确资源存放路径。

Q3: 样式参数与设计稿不一致

• 设计稿使用了未解析的变量：确保 Token 权限包含「变量（只读）」，或替换为固定值；
• AI 解析误差：补充指令明确样式参数；
• 单位转换问题：在提示词中指定单位（如「所有尺寸使用 REM 单位」）。

Q4: Token 泄露或需要撤销

• 登录 MasterGo「个人设置 → 安全与授权 → 个人访问令牌」；
• 找到目标 Token，点击「撤销」终止权限；
• 重新生成新 Token 并更新 IDE 配置。

注意事项

1. 数据安全：勿将 Token 分享给无关人员，定期轮换 Token；仅向可信 AI 工具配置 Token。
2. 兼容性：保持 TRAE CN IDE 为最新版；本地客户端离线设计稿需先发布至云端。
3. 效率优化：设计稿命名/层级规范可大幅提升代码生成质量；优先选择「读取指定位置」而非整个设计稿以减少解析时间。

总结

MasterGo MCP 核心是通过 Token 授权，让 AI 工具直接读取设计稿结构化数据，实现「设计→代码」智能化转换。关键步骤包括生成带最小必要权限的 Token、配置 TRAE CN IDE 的 MasterGo Magic Mcp、复制设计稿链接及指令生成代码。常见问题多与 Token 权限、设计稿权限、链接格式相关，按「最小权限原则」生成 Token 可兼顾安全性与可用性。