前言
TRAE + Figma 将 AI 能力深度集成到产品设计的每个环节：从自然语言需求描述到可验证的交互原型。通过 TRAE 的语义理解与约束生成能力，我们将业务目标、用户场景与交互规则进行结构化处理，自动映射为 Figma 的页面架构、组件库与设计令牌，确保设计的一致性与可复用性。
本文档旨在提供一套轻量且可落地的闭环解决方案：
- 需求捕获与澄清
- 规格化产物生成（PRD 片段、用户流程、状态矩阵）
- 原型自动化生成与同步
- 评审迭代与版本追踪
无论你是产品经理、设计师还是前端开发者，都能以更低的沟通成本快速达成共识，将模糊的想法迅速转化为可测试、可交付的原型。
成果展示
环境配置
第一步：安装基础环境
# 1. 克隆项目
git clone https://gith*u*b*.com/grab/cursor-talk-to-figma-mcp.git
# 2. 进入项目目录
cd cursor-talk-to-figma-mcp/
# 3. 安装 Bun（如已安装请跳过）
curl -fsSL https://bu*n.sh/in**stall | bash
# 4. 项目初始化
bun setup
# 5. 启动服务
bun socket
运行成功如下：
第二步：配置 TRAE
1. 打开 TRAE 应用
2. 选择 Solo 模式
3. 点击 Figma 选项
4. 启动 MCP 插件
5. 确认配置成功
第三步：配置 MCP 工具
选择手动添加，按照以下配置进行设置：
第四步：添加上下文
1. 为项目配置 6A 工作流
6A工作流介绍：
zhuanlan.zhihu.com/p/193825400…
以下为「6A 工作流规范」完整内容
2. 添加 Figma 设计规范指南
以下为「Figma设计规范指南」完整内容
第五步：连接 MCP 服务
使用 MCP 时需要将 Connected to server in channel: 124a3i4t 信息提供给 AI，以便调用 MCP 链接对应的频道，否则无法正常调用 Figma MCP 服务。
实践应用
需求梳理阶段
1. 使用 TRAE 编辑器， 结合 6A 工作流第一阶段对需求进行梳理
2. 如果生成的需求不符合预期，可以通过与 AI 对话继续完善需求
原型生成阶段
1. 利用 TRAE 完善需求文档
TRAE 会检索项目所用的技术栈，并据此完善需求文档。
2. 根据需求生成原型和页面
转码实现阶段
1. 点击编辑器中的 Figma 标签，登录到 Figma
2. 找到需要实现的页面，选择后点击添加到对话
3. 指定使用 6A 文档，执行 6A 工作流完成转码需求
