基于 MasterGo MCP 协议实现设计稿到前端代码的自动化转换

• 设计稿必须发布至云端，本地离线文件无法被识别。
• 建议统一组件命名和样式变量，这能显著提升 AI 生成代码的可读性。

配置流程

获取身份凭证

Token 是 MCP 访问设计数据的钥匙，请按以下步骤生成：

1. 登录 MasterGo 网页端，点击右上角头像进入个人中心。
2. 选择左侧「安全设置」→「个人访问令牌」。
3. 点击「生成新令牌」，复制生成的字符串。

注意：复制时请确保无多余空格或换行，Token 泄露后可随时撤销。

接入 MCP Server

在 TRAE CN IDE 中完成连接配置：

1. 打开 IDE 设置页面，找到「MCP」选项卡。
2. 进入市场添加「MasterGo Magic Mcp」插件。
3. 粘贴刚才获取的 Token 进行验证。
4. 验证通过后，即可在对话面板中看到可用的工具列表。

创建自定义智能体（可选）

内置智能体能满足基础需求，但针对特定框架（如 Vue 3 或 React），自定义智能体能提供更精准的代码风格。

在对话框输入 @ 选择创建智能体，并填入类似以下的提示词模板：

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

生成与迭代

最后一步是实际调用。打开空项目文件夹，将设计稿链接发送给智能体。

例如：

请基于以下 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. 生成后在浏览器中预览效果。

IDE 会自动执行读取、解析、生成文件及下载资源的动作。如果生成的代码有偏差，可以通过补充指令微调，比如「修复按钮圆角应为 8px」。

常见问题排查

在实际使用中，可能会遇到以下几种情况：

1. MCP 无法读取设计稿数据

通常是因为 Token 权限不足或链接格式错误。请检查 Token 是否包含「文件内容（只读）」权限，并确保复制链接时包含了 file/xxxxxx 部分，而非普通的分享链接。

2. 图片资源缺失

如果生成的代码中图片路径为空，可能是复制链接时未选中包含图片的节点，或者设计稿使用了 WebP 格式（目前暂不支持）。建议导出为 PNG/SVG 重新上传，或在提示词中明确指定资源目录。

3. 样式参数不一致

AI 对某些复杂变量可能解析不准。此时可以在提示词中强制指定单位，例如「所有尺寸使用 REM 单位，1REM = 16px」，或者直接在设计稿中将变量替换为固定值。

4. Token 安全管理

切勿将 Token 分享给无关人员。如果发现泄露，立即在 MasterGo 安全设置中撤销该 Token 并重新生成。

总结

这套工作流的核心在于利用 Token 授权机制，让 AI 工具直接读取设计稿的结构化数据，从而实现「设计 → 代码」的端到端转换。关键在于生成最小必要权限的 Token、正确配置 MCP 服务以及编写清晰的生成指令。虽然目前技术尚未完美，但在常规页面还原场景下，它能显著降低沟通成本，提升开发效率。