HTML / CSSAI大前端
AI 编程实战：使用 TRAE CN 将 MasterGo 设计稿转为前端代码
介绍如何使用 TRAE CN IDE 结合 MasterGo MCP 协议，实现从设计稿到前端代码的自动化转换。主要步骤包括安装 IDE、获取访问令牌、配置 MCP Server、创建智能体及调用生成代码。方案支持 Vue/React 框架，通过 DSL 数据解析布局样式，解决手动还原效率低的问题，同时提供常见问题排查指南。
介绍如何使用 TRAE CN IDE 结合 MasterGo MCP 协议，实现从设计稿到前端代码的自动化转换。主要步骤包括安装 IDE、获取访问令牌、配置 MCP Server、创建智能体及调用生成代码。方案支持 Vue/React 框架，通过 DSL 数据解析布局样式，解决手动还原效率低的问题，同时提供常见问题排查指南。
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