MasterGo 设计稿转前端代码:基于 TRAE CN 与 MCP 协议实战
什么是 MCP
MCP(Model Context Protocol)是 MasterGo 为 AI 工具打通设计稿数据的标准化协议。它允许 TRAE CN IDE 等 AI 工具直接读取设计稿的结构化数据,包括布局、样式、资源及变量等。这意味着我们无需再手动截图或描述细节,AI 能精准'读懂'设计稿并生成符合规范的前端代码,大幅降低还原成本。
简单来说,通过 MCP,设计稿到代码的转换实现了端到端的智能化。
前置条件
在开始之前,请确保满足以下环境要求:
1. 账号权限
- 持有已验证手机号/邮箱的 MasterGo 企业版账号。
- 若操作团队空间的设计稿,需拥有'查看'或'编辑'权限(仅评论权限无法读取数据)。
- 生成 Token 时,账号需为企业空间的成员或管理员。
技术原理补充:DSL 作为中间层,通过授权 API 拉取全量原始数据,过滤冗余后注入前端语义(如组件类型),最终输出结构化 JSON 供 AI 解析。
{
"components": [
{
"id": "123",
"type": "Button",
"props": {
"text": "点击我",
"style": {
"color": "red",
"fontSize": 16
}
}
}
]
}
2. 环境要求
- TRAE CN IDE 版本 ≥ 1.0.0。
- 网络可正常访问 MasterGo 官网及 IDE 服务器。


