6A 工作流实战｜TRAE + Figma 产品设计自动化解决方案

本文作者：代学超，TRAE 开发者用户

前言

TRAE + Figma 将 AI 能力深度集成到产品设计的每个环节：从自然语言需求描述到可验证的交互原型。通过 TRAE 的语义理解与约束生成能力，我们将业务目标、用户场景与交互规则进行结构化处理，自动映射为 Figma 的页面架构、组件库与设计令牌，确保设计的一致性与可复用性。

本文档旨在提供一套轻量且可落地的闭环解决方案：

• 需求捕获与澄清

• 规格化产物生成（PRD 片段、用户流程、状态矩阵）

• 原型自动化生成与同步

• 评审迭代与版本追踪

无论你是产品经理、设计师还是前端开发者，都能以更低的沟通成本快速达成共识，将模糊的想法迅速转化为可测试、可交付的原型。

成果展示

环境配置

第一步：安装基础环境

# 1. 克隆项目git clone https://github.com/grab/cursor-talk-to-figma-mcp.git
# 2. 进入项目目录cd cursor-talk-to-figma-mcp/
# 3. 安装 Bun（如已安装请跳过）curl -fsSL https://bun.sh/install | bash
# 4. 项目初始化bun setup
# 5. 启动服务bun socket

运行成功如下：

第二步：配置 TRAE

1. 打开 TRAE 应用

2. 选择 Solo 模式

3. 点击 Figma 选项

4. 启动 MCP 插件

5. 确认配置成功

第三步：配置 MCP 工具

选择手动添加，按照以下配置进行设置：

第四步：添加上下文

为项目配置 6A 工作流

6A 工作流介绍：

https://zhuanlan.zhihu.com/p/1938254002941846667

查看「6A 工作流规范」完整内容：

激活方式

用户输入以下 6A 开头的内容即可启动工作流。激活时立即响应：6A 工作流已激活

身份定义

你是一位资深的软件架构师和工程师，具备丰富的项目经验和系统思维能力。你的核心优势在于：

• 上下文工程专家：构建完整的任务上下文，而非简单的提示响应。

• 规范驱动思维：将模糊需求转化为精确、可执行的规范。

• 质量优先理念：每个阶段都确保高质量输出。

• 项目对齐能力：深度理解现有项目架构和约束。

6A 工作流执行规则

阶段 1: Align (对齐阶段)

目标: 模糊需求 → 精确规范

执行步骤

1. 项目上下文分析

• 分析现有项目结构、技术栈、架构模式、依赖关系

• 分析现有代码模式、现有文档和约定

• 理解业务域和数据模型

2. 需求理解确认

• 创建 docs/任务名/ALIGNMENT_[任务名].md

• 包含项目和任务特性规范

• 包含原始需求、边界确认(明确任务范围)、需求理解(对现有项目的理解)、疑问澄清(存在歧义的地方)

3. 智能决策策略

• 自动识别歧义和不确定性

• 生成结构化问题清单（按优先级排序）

• 优先基于现有项目内容和查找类似工程和行业知识进行决策和在文档中回答

• 有人员倾向或不确定的问题主动中断并询问关键决策点

• 基于回答更新理解和规范

4. 中断并询问关键决策点

• 主动中断询问，迭代执行智能决策策略

5. 最终共识

• 生成 docs/任务名/CONSENSUS_[任务名].md 包含:

• 明确的需求描述和验收标准

• 技术实现方案和技术约束和集成方案

• 任务边界限制和验收标准

• 确认所有不确定性已解决

质量门控

• 需求边界清晰无歧义

•  技术方案与现有架构对齐

•  验收标准具体可测试

•  所有关键假设已确认

•  项目特性规范已对齐

阶段 2: Architect (架构阶段)

目标: 共识文档 → 系统架构 → 模块设计 → 接口规范

执行步骤

1. 系统分层设计

基于 CONSENSUS、ALIGNMENT 文档设计架构生成 docs/任务名/DESIGN_[任务名].md 包含:

• 整体架构图(mermaid 绘制)

• 分层设计和核心组件

• 模块依赖关系图

• 接口契约定义

• 数据流向图

• 异常处理策略

2. 设计原则

• 严格按照任务范围，避免过度设计

• 确保与现有系统架构一致

• 复用现有组件和模式

质量门控

• 架构图清晰准确

• 接口定义完整

• 与现有系统无冲突

• 设计可行性验证

阶段 3: Atomize (原子化阶段)

目标: 架构设计 → 拆分任务 → 明确接口 → 依赖关系

执行步骤

1. 子任务拆分

基于 DESIGN 文档生成 docs/任务名/TASK_[任务名].md

每个原子任务包含:

• 输入契约(前置依赖、输入数据、环境依赖)

• 输出契约(输出数据、交付物、验收标准)

• 实现约束(技术栈、接口规范、质量要求)

• 依赖关系(后置任务、并行任务)

2. 拆分原则

• 复杂度可控，便于 AI 高成功率交付

• 按功能模块分解，确保任务原子性和独立性

• 有明确的验收标准，尽量可以独立编译和测试

• 依赖关系清晰

3. 生成任务依赖图(使用 mermaid )

质量门控

• 任务覆盖完整需求

• 依赖关系无循环

• 每个任务都可独立验证

• 复杂度评估合理

阶段 4: Approve (审批阶段)

目标: 原子任务 → 人工审查 → 迭代修改 → 按文档执行

执行步骤

1. 执行检查清单

• 完整性：任务计划覆盖所有需求

• 一致性：与前期文档保持一致

• 可行性：技术方案确实可行

• 可控性：风险在可接受范围，复杂度是否可控

• 可测性：验收标准明确可执行

2. 最终确认清单

• 明确的实现需求(无歧义)

• 明确的子任务定义

• 明确的边界和限制

• 明确的验收标准

• 代码、测试、文档质量标准

阶段 5: Automate (自动化执行)

目标: 按节点执行 → 编写测试 → 实现代码 → 文档同步

执行步骤

1. 逐步实施子任务

• 创建 docs/任务名/ACCEPTANCE_[任务名].md 记录完成情况

2. 代码质量要求

• 严格遵循项目现有代码规范

• 保持与现有代码风格一致

• 使用项目现有的工具和库

• 复用项目现有组件

• 代码尽量精简易读

• API KEY 放到 .env 文件中并且不要提交 git

3. 异常处理

• 遇到不确定问题立刻中断执行

• 在 TASK 文档中记录问题详细信息和位置

• 寻求人工澄清后继续

4. 逐步实施流程（按任务依赖顺序执行，对每个子任务执行）:

• 执行前检查(验证输入契约、环境准备、依赖满足)

• 实现核心逻辑(按设计文档编写代码)

• 编写单元测试(边界条件、异常情况)

• 运行验证测试

• 更新相关文档

• 每完成一个任务立即验证

阶段 6: Assess (评估阶段)

目标: 执行结果 → 质量评估 → 文档更新 → 交付确认

执行步骤

1. 验证执行结果

更新 docs/任务名/ACCEPTANCE_[任务名].md

整体验收检查:

• 所有需求已实现

• 验收标准全部满足

• 项目编译通过

• 所有测试通过

• 功能完整性验证

• 实现与设计文档一致

2. 质量评估指标

• 代码质量(规范、可读性、复杂度)

• 测试质量(覆盖率、用例有效性)

• 文档质量(完整性、准确性、一致性)

• 现有系统集成良好

• 未引入技术债务

3. 最终交付物

• 生成 docs/任务名/FINAL_[任务名].md(项目总结报告)

• 生成 docs/任务名/TODO_[任务名].md(精简明确哪些待办的事宜和哪些缺少的配置等，我方便直接寻找支持)

4. TODO 询问 

• 询问用户 TODO 的解决方式，精简明确哪些待办的事宜和哪些缺少的配置等，同时提供有用的操作指引

技术执行规范

安全规范

• API 密钥等敏感信息使用 .env 文件管理

文档同步

• 代码变更同时更新相关文档

测试策略

• 测试优先：先写测试，后写实现

• 边界覆盖：覆盖正常流程、边界条件、异常情况

交互体验优化

进度反馈

• 显示当前执行阶段

• 提供详细的执行步骤

• 标示完成情况

• 突出需要关注的问题

异常处理机制

中断条件

• 遇到无法自主决策的问题

• 觉得需要询问用户的问题

• 技术实现出现阻塞

• 文档不一致需要确认修正

恢复策略

• 保存当前执行状态

• 记录问题详细信息

• 询问并等待人工干预

• 从中断点任务继续执行

添加 Figma 设计规范指南

概述

本文档专门为 Figma 设计软件制定，基于 UI 界面设置指南和规范，提供在 Figma 中实施设计系统的具体方法和最佳实践。

1. Figma 文件组织结构

1.1 文件命名规范

项目名称_模块名称_版本号_日期例如：电商平台_用户中心_v2.1_20240101

1.2 页面组织结构

• 🎨 Design System - 设计系统页面

• 📱 Components - 组件库页面

• 🖼️ Templates - 模板页面

• 📄 Pages - 具体页面设计

• 🔍 Prototypes - 原型交互

• 📋 Documentation - 设计文档

1.3 图层命名规范

组件类型/状态_描述例如：- Button/Primary_登录按钮- Input/Default_用户名输入框- Card/Hover_产品卡片- Icon/24px_搜索图标

2. Figma 设计系统搭建

2.1 颜色样式 (Color Styles)

创建颜色样式步骤：

• 选择颜色 → 右侧面板 → 颜色选择器

• 点击样式图标 → 创建样式

• 按照以下命名规范：

主色调：Primary/100 - #E6F7FFPrimary/200 - #BAE7FFPrimary/300 - #91D5FFPrimary/400 - #69C0FFPrimary/500 - #40A9FFPrimary/600 - #1890FF (主色)Primary/700 - #096DD9Primary/800 - #0050B3Primary/900 - #003A8C
中性色：Neutral/White - #FFFFFFNeutral/50 - #FAFAFANeutral/100 - #F5F5F5Neutral/200 - #F0F0F0Neutral/300 - #D9D9D9Neutral/400 - #BFBFBFNeutral/500 - #8C8C8CNeutral/600 - #595959Neutral/700 - #434343Neutral/800 - #262626Neutral/900 - #1F1F1FNeutral/Black - #000000
功能色：Success/Default - #52C41AWarning/Default - #FA541CError/Default - #F5222DInfo/Default - #1890FF

2.2 文字样式 (Text Styles)

创建文字样式步骤：

• 选择文本 → 右侧面板 → 文字属性

• 设置字体、大小、行高、字重

• 点击样式图标 → 创建样式

标题样式：Heading/H1 - 36px/43px, BoldHeading/H2 - 28px/34px, BoldHeading/H3 - 24px/29px, SemiboldHeading/H4 - 20px/24px, SemiboldHeading/H5 - 18px/22px, MediumHeading/H6 - 16px/19px, Medium
正文样式：Body/Large - 18px/27px, RegularBody/Default - 16px/24px, RegularBody/Small - 14px/21px, RegularBody/Caption - 12px/18px, Regular
特殊样式：Button/Large - 16px/24px, MediumButton/Default - 14px/21px, MediumButton/Small - 12px/18px, Medium

2.3 效果样式 (Effect Styles)

阴影效果：

Shadow/Level1 - Drop Shadow: 0px 1px 3px rgba(0,0,0,0.1)Shadow/Level2 - Drop Shadow: 0px 2px 8px rgba(0,0,0,0.1)Shadow/Level3 - Drop Shadow: 0px 4px 16px rgba(0,0,0,0.15)Shadow/Level4 - Drop Shadow: 0px 8px 32px rgba(0,0,0,0.2)

模糊效果：

Blur/Light - Background Blur: 4pxBlur/Medium - Background Blur: 8pxBlur/Heavy - Background Blur: 16px

3. 组件库构建

3.1 基础组件 (Base Components)

按钮组件 (Button)

变体属性设置：

• Type: Primary, Secondary, Text, Danger

• Size: Large(48px), Default(40px), Small(32px)

• State: Default, Hover, Active, Disabled

组件结构：

Button (Main Component)├── Background (Rectangle)├── Content (Auto Layout)│   ├── Icon (Optional)│   └── Label (Text)└── States (Variants)

Auto Layout 设置：

• Direction: Horizontal

• Spacing: 8px

• Padding: 水平 16px, 垂直 8px

• Alignment: Center

输入框组件 (Input)

变体属性设置：

• Size: Large(48px), Default(40px), Small(32px)

• State: Default, Focus, Error, Disabled

• Type: Text, Password, Search

组件结构：

Input (Main Component)├── Container (Rectangle)├── Content (Auto Layout)│   ├── Prefix Icon (Optional)│   ├── Placeholder/Value (Text)│   └── Suffix Icon (Optional)└── Helper Text (Text)

卡片组件 (Card)

变体属性设置：

• Elevation: Level1, Level2, Level3

• State: Default, Hover

• Border: True, False

组件结构：

Card (Main Component)├── Background (Rectangle)├── Content (Auto Layout)│   ├── Header (Optional)│   ├── Body (Auto Layout)│   └── Footer (Optional)└── Shadow (Effect Style)

3.2 复合组件 (Composite Components)

导航栏组件 (Navigation）

组件结构：

Navigation (Main Component)├── Container (Auto Layout)├── Logo Area (Auto Layout)├── Menu Items (Auto Layout)│   └── Menu Item (Component Instance)└── Actions (Auto Layout)    └── Button (Component Instance)

表单组件 (Form)

组件结构：

Form (Main Component)├── Form Container (Auto Layout)├── Form Group (Auto Layout)│   ├── Label (Text Style)│   ├── Input (Component Instance)│   └── Helper Text (Text Style)└── Actions (Auto Layout)    └── Button (Component Instance)

4. 网格系统设置

4.1 布局网格 (Layout Grid)

桌面端网格 (Desktop ≥1200px)

类型：Columns列数：24间距：24px边距：48px颜色：rgba(255, 0, 0, 0.1)

平板端网格 (Tablet 768px-1199px)

类型：Columns列数：12间距：16px边距：32px颜色：rgba(0, 255, 0, 0.1)

移动端网格 (Mobile <768px)

类型：Columns列数：4间距：16px边距：16px颜色：rgba(0, 0, 255, 0.1)

4.2 基线网格 (Baseline Grid)

间距：8px颜色：rgba(0, 0, 0, 0.05)

5. Auto Layout 最佳实践

5.1 Auto Layout 设置原则

• 方向选择：根据内容排列选择 Horizontal 或 Vertical

• 间距设置：使用 8 的倍数（8px, 16px, 24px, 32px）

• 对齐方式：合理选择主轴和交叉轴对齐

• 尺寸调整：使用 Hug contents 或 Fill container

5.2 常用 Auto Layout 模式

水平排列 (Horizontal)

用途：按钮组、导航菜单、标签页设置：- Direction: Horizontal- Spacing: 16px- Alignment: Center- Padding: 16px

垂直排列 (Vertical)

用途：表单、卡片内容、列表设置：- Direction: Vertical- Spacing: 24px- Alignment: Top- Padding: 24px

嵌套布局 (Nested)

用途：复杂组件、页面布局设置：- 外层：Vertical (页面结构)- 内层：Horizontal (内容排列)- 合理使用Fill和Hug

6. 约束和响应式设计

6.1 约束设置 (Constraints)

固定元素

导航栏：Left & Right + Top侧边栏：Left + Top & Bottom底部栏：Left & Right + Bottom

自适应元素

主内容区：Left & Right + Top & Bottom卡片：Left & Right + Top按钮：Center + Top

6.2 响应式组件设计

断点设置

移动端：375px (iPhone)平板端：768px (iPad)桌面端：1200px (Desktop)大屏幕：1600px (Large Desktop)

组件适配策略

按钮：保持固定高度，宽度自适应输入框：宽度100%，高度固定卡片：宽度自适应，内容Hug导航：移动端折叠，桌面端展开

7. 原型交互设计

7.1 交互类型

基础交互

• On Click - 点击跳转

• On Hover - 悬停效果

• On Drag - 拖拽操作

• While Pressing - 按压状态

高级交互

• After Delay - 延时触发

• Mouse Enter/Leave - 鼠标进入/离开

• Key/Gamepad - 键盘操作

7.2 动画设置

过渡动画

微交互：- Duration: 150ms- Easing: Ease Out- 用途：按钮悬停、输入框聚焦
标准动画：- Duration: 300ms- Easing: Ease In Out- 用途：页面切换、模态框
复杂动画：- Duration: 500ms- Easing: Spring- 用途：列表展开、内容加载

Smart Animate

使用场景：- 组件状态变化- 页面间元素连续性- 列表项动画
设置要点：- 保持图层命名一致- 使用相同组件实例- 合理设置动画时长

8. 团队协作规范

8.1 权限管理

角色分配

Owner：项目负责人- 完全访问权限- 管理团队成员- 发布组件库
Editor：设计师- 编辑设计文件- 创建和修改组件- 添加评论
Viewer：开发者/产品经理- 查看设计文件- 添加评论- 检查设计规范

8.2 版本控制

版本命名规范

v主版本.次版本.修订版本例如：v2.1.3
主版本：重大功能更新次版本：新增功能或组件修订版本：Bug修复或小调整

分支管理

Main：主分支（稳定版本）Develop：开发分支（新功能开发）Feature：功能分支（具体功能开发）Hotfix：修复分支（紧急修复）

8.3 评论和反馈

评论规范

设计评论：- 明确指出问题位置- 提供具体修改建议- 使用@提及相关人员
开发评论：- 标注技术实现难点- 确认交互细节- 询问设计意图

9. 设计交付规范

9.1 设计稿交付

文件整理

交付前检查：□ 页面命名规范□ 图层命名清晰□ 组件使用正确□ 样式应用一致□ 原型交互完整

标注说明

必要标注：- 尺寸标注（间距、大小）- 颜色标注（色值、透明度）- 字体标注（字号、行高、字重）- 交互标注（状态、动画）

9.2 开发者模式 (Dev Mode)

使用指南

开发者功能：- 自动生成CSS代码- 获取精确尺寸数据- 导出切图资源- 查看组件属性

代码导出

CSS属性：- 自动生成样式代码- 支持多种单位（px, rem, %）- 包含响应式断点
资源导出：- SVG图标导出- 图片资源导出- 支持多倍图

10. 插件推荐

10.1 设计效率插件

必装插件

Content Reel：- 快速填充文本内容- 支持中文假数据- 提高设计效率
Unsplash：- 高质量图片素材- 直接插入设计稿- 免费商用
Iconify：- 海量图标库- 支持多种风格- 一键插入

辅助插件

Figma to Code：- 设计稿转代码- 支持多种框架- 提高开发效率
Contrast：- 颜色对比度检查- 无障碍设计辅助- WCAG标准检测
Component Inspector：- 组件使用情况分析- 设计系统维护- 组件优化建议

10.2 团队协作插件

沟通协作

FigJam：- 在线白板协作- 头脑风暴- 流程图绘制
Miro：- 项目规划- 用户旅程图- 团队协作

11. 质量检查清单

11.1 设计质量检查

视觉检查

□ 颜色使用符合设计系统□ 字体样式应用正确□ 间距遵循8点网格□ 组件状态完整□ 阴影效果合理□ 圆角使用一致

交互检查

□ 原型流程完整□ 动画时长合理□ 交互反馈明确□ 错误状态处理□ 加载状态设计

11.2 技术检查

开发友好性

□ 图层命名规范□ 组件结构清晰□ 约束设置正确□ 样式可复用□ 代码导出准确

性能优化

□ 文件大小合理□ 组件实例使用□ 图片格式优化□ 不必要元素清理

12. 常见问题解决

12.1 组件问题

组件不更新

解决方案：1. 检查组件实例是否被覆盖2. 重置组件实例3. 更新组件库4. 重新链接组件

样式不生效

解决方案：1. 检查样式是否被覆盖2. 确认样式应用层级3. 重新应用样式4. 清除本地样式

12.2 性能问题

文件加载慢

优化方案：1. 减少页面数量2. 优化图片大小3. 清理无用元素4. 使用组件实例

操作卡顿

解决方案：1. 关闭不必要的插件2. 清理浏览器缓存3. 重启Figma应用4. 检查网络连接

13. 更新日志

版本 1.0.0 (2024-01-01)

• 初始版本发布

• 建立 Figma 设计系统规范

• 定义组件库标准

• 制定团队协作流程

14. 参考资源

官方文档

• Figma 官方文档：https://help.figma.com/hc/en-us
  

• Figma 设计系统指南：https://www.figma.com/design-systems/
  

• Figma 最佳实践：https://www.figma.com/best-practices/
  

社区资源

• Figma Community：https://www.figma.com/community
  

• Design Systems Repo：https://designsystemsrepo.com/
  

• Figma 插件市场：https://www.figma.com/community/plugins
  

学习资源

• Figma Academy：https://www.figma.com/academy/
  

• YouTube Figma 频道：https://www.youtube.com/figmadesign
  

• 设计系统案例研究：https://www.designsystems.com/
  

本指南将根据 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 工作流完成转码需求

通过以上流程，你可以实现从需求描述到可交付原型的完整自动化设计流程，大幅提升产品设计效率。

• 奖品激励+官方认证！TRAE 最佳实践征文大赛来了：https://mp.weixin.qq.com/s/mdsfX8XZrg-xTQkYl4mm0g?scene=25#wechat_redirect