HTML / CSSAI大前端
使用 TRAE CN 与 MCP 协议将 MasterGo 设计稿转化为前端代码
介绍如何使用 TRAE CN IDE 结合 MasterGo MCP 协议，将设计稿自动转换为前端代码。主要步骤包括配置账号权限、生成 Personal Access Token、在 IDE 中添加 MCP Server 以及调用智能体生成代码。文中详细说明了 DSL 数据原理、API 能力、常见问题排查及注意事项，旨在帮助开发者降低设计还原成本，实现设计到代码的端到端智能化转换。
介绍如何使用 TRAE CN IDE 结合 MasterGo MCP 协议，将设计稿自动转换为前端代码。主要步骤包括配置账号权限、生成 Personal Access Token、在 IDE 中添加 MCP Server 以及调用智能体生成代码。文中详细说明了 DSL 数据原理、API 能力、常见问题排查及注意事项，旨在帮助开发者降低设计还原成本，实现设计到代码的端到端智能化转换。
MCP（Model Context Protocol，模型上下文协议）是 MasterGo（国内原型设计平台）为 AI 工具打通设计稿数据的标准化协议，可让 TRAE CN IDE 等 AI 工具直接读取 MasterGo 设计稿的结构化数据（如布局、样式、资源、变量等），无需人工导出/上传设计稿，实现「设计稿 → 代码」的端到端智能化转换。
简单来说，你无需再手动截图、描述设计细节，AI 工具可通过 MCP 直接「读懂」MasterGo 设计稿，精准生成符合设计规范的前端代码，大幅降低设计还原的沟通成本和手动开发工作量。
在使用 MasterGo MCP 前，请确保满足以下条件：
MasterGo MCP 中 DSL 的技术原理，是作为'设计稿→代码'的标准化中间层：先通过授权后的 MasterGo API 拉取设计稿全量原始数据，再过滤冗余信息、统一格式完成数据清洗，接着为纯数值数据注入前端领域语义（如标注组件类型、样式变量），最终输出结构化的 DSL 数据（通常为 JSON），供 TRAE IDE、AI 智能体等工具直接解析，高效生成符合设计意图的前端代码。
补充一个 DSL 的极简 JSON 示例：
{"components":[{"id":"123","type":"Button","props":{"text":"点击我","style":{"color":"red","fontSize":16}}}]}
当前 MCP 工具版本为 0.1.2，MasterGo AI Bridge 基于该版本提供以下核心 API 方法，用于支撑设计稿数据的读取与组件关联：
| API 方法 | 能力描述 |
|---|---|
| mcp_getDsl | 用于获取设计稿的领域特定语言数据 |
| mcp_getComponentLink | 当 mcp_getDsl 返回数据包含非空内容时，用于获取组件关联链接 |
| mcp_getMeta | 当用户需要搭建完整网站时，调用此工具获取相关元数据 |
| mcp_getComponentGenerator | 需主动调用此工具，获取组件开发相关资源 |
Token 是 MCP 工具访问 MasterGo 设计稿数据的身份凭证，需严格按照官方规范生成：
验证连接失败排查：
内置智能体「Builder with MCP」可满足基础需求，自定义智能体可针对性优化代码生成规则：
@，点击「创建智能体」。提示词（官方推荐模板）：
你是专业的前端开发工程师，需基于 MasterGo 设计稿数据（通过 MCP 获取）完成以下要求： 1. 代码框架：使用 Vue 3（可替换为 React/Angular 等）； 2. 样式规范：严格遵循设计稿中的颜色、字体、间距、圆角等样式参数，使用 REM 适配不同屏幕； 3. 代码结构：组件化拆分（按设计稿模块划分），注释清晰，符合前端工程化规范； 4. 资源处理：自动下载设计稿中的图标/图片资源，存放至「assets」目录，路径映射正确； 5. 兼容性：兼容 Chrome 90+、Edge 90+、Safari 14+ 浏览器。禁止擅自修改设计稿中的样式参数，若有不明确的地方，先询问用户再生成代码。
右键点击选中区域 →「复制链接」→「复制选中内容链接」（或「复制文件链接」），复制格式示例：
https://mastergo.com/file/xxxxxx?fileOpenFrom=project&page_id=xxxxxxxxx&layer_id=xxxxxxxxx
提示：包含 nodeId 的链接仅读取指定节点数据，无 nodeId 则读取整个设计稿。
在智能体对话框中输入指令，示例：
请基于以下 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. 生成后在浏览器中预览效果。
若生成的代码不符合预期，可通过以下方式优化：
设计稿原图如下：
代码复现如下：
原因及解决方案：
file/xxxxxx（设计稿 ID），而非分享链接/评论链接；原因及解决方案：
原因及解决方案：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online