一、核心概念解析
在开始实操前，先理清 Trae、MCP、Figma 三者的关系：
- Figma：UI 设计工具，负责产出高保真设计稿、组件库和交互逻辑，是开发流程的视觉源头。
- MCP (Model Context Protocol)：Anthropic 发布的标准化协议，核心作用是'搭桥'，让 AI 模型能够访问外部工具和数据源。没有 MCP，AI 无法直接读取 Figma 设计稿信息；有了 MCP，AI 可自动提取布局、样式和组件细节。
- Trae IDE：字节跳动推出的 AI 驱动集成开发环境，内置 MCP 市场，能集成 Figma 等第三方工具，通过 AI 智能体调用 MCP 协议，实现从设计稿到代码的自动化转换。
协同逻辑：Figma 产出设计稿 → MCP 打通 Trae 与 Figma 的连接 → Trae 调用 AI 智能体生成可直接使用的代码。
二、实操步骤：从 0 到 1 完成应用开发
本次目标：用 Figma 设计简单个人主页 UI，通过 Trae+MCP 自动生成响应式前端代码。
1. Figma 申请 Key
- 官网：https://www.figma.com/
- 注册登录
进入设置页面选择 Token 管理。
创建 Token，勾选所有权权限。
确认 Token 生成。
2. Trae 中 MCP 配置
- 打开 Trae 设置 -> MCP。
从市场添加 MCP Server。
