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 服务器。
