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

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

前言

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

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

需求捕获与澄清
规格化产物生成（PRD 片段、用户流程、状态矩阵）
原型自动化生成与同步
评审迭代与版本追踪

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

成果展示

环境配置

第一步：安装基础环境

bash 复制代码

# 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 工具

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

第四步：添加上下文

1. 为项目配置 6A 工作流

6A工作流介绍：

zhuanlan.zhihu.com/p/193825400...

以下为「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 文件管理

文档同步

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

测试策略

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

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

交互体验优化

进度反馈

显示当前执行阶段

提供详细的执行步骤

标示完成情况

突出需要关注的问题

异常处理机制

中断条件

遇到无法自主决策的问题

觉得需要询问用户的问题

技术实现出现阻塞

文档不一致需要确认修正

恢复策略

保存当前执行状态

记录问题详细信息

询问并等待人工干预

从中断点任务继续执行

2. 添加 Figma 设计规范指南

以下为「Figma设计规范指南」完整内容

概述

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

1. Figma文件组织结构

1.1 文件命名规范
复制代码
项目名称_模块名称_版本号_日期
例如：电商平台_用户中心_v2.1_20240101
1.2 页面组织结构

🎨 Design System - 设计系统页面

📱 Components - 组件库页面

🖼️ Templates - 模板页面

📄 Pages - 具体页面设计

🔍 Prototypes - 原型交互

📋 Documentation - 设计文档

1.3 图层命名规范
diff 复制代码
组件类型/状态_描述
例如：
- Button/Primary_登录按钮
- Input/Default_用户名输入框
- Card/Hover_产品卡片
- Icon/24px_搜索图标
2. Figma设计系统搭建

2.1 颜色样式 (Color Styles)

创建颜色样式步骤：

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

点击样式图标 → 创建样式

按照以下命名规范：
bash 复制代码
主色调：
Primary/100 - #E6F7FF
Primary/200 - #BAE7FF
Primary/300 - #91D5FF
Primary/400 - #69C0FF
Primary/500 - #40A9FF
Primary/600 - #1890FF (主色)
Primary/700 - #096DD9
Primary/800 - #0050B3
Primary/900 - #003A8C

中性色：
Neutral/White - #FFFFFF
Neutral/50 - #FAFAFA
Neutral/100 - #F5F5F5
Neutral/200 - #F0F0F0
Neutral/300 - #D9D9D9
Neutral/400 - #BFBFBF
Neutral/500 - #8C8C8C
Neutral/600 - #595959
Neutral/700 - #434343
Neutral/800 - #262626
Neutral/900 - #1F1F1F
Neutral/Black - #000000

功能色：
Success/Default - #52C41A
Warning/Default - #FA541C
Error/Default - #F5222D
Info/Default - #1890FF
2.2 文字样式 (Text Styles)

创建文字样式步骤：

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

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

点击样式图标 → 创建样式
css 复制代码
标题样式：
Heading/H1 - 36px/43px, Bold
Heading/H2 - 28px/34px, Bold
Heading/H3 - 24px/29px, Semibold
Heading/H4 - 20px/24px, Semibold
Heading/H5 - 18px/22px, Medium
Heading/H6 - 16px/19px, Medium

正文样式：
Body/Large - 18px/27px, Regular
Body/Default - 16px/24px, Regular
Body/Small - 14px/21px, Regular
Body/Caption - 12px/18px, Regular

特殊样式：
Button/Large - 16px/24px, Medium
Button/Default - 14px/21px, Medium
Button/Small - 12px/18px, Medium
2.3 效果样式 (Effect Styles)

阴影效果：
css 复制代码
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)
模糊效果：
yaml 复制代码
Blur/Light - Background Blur: 4px
Blur/Medium - Background Blur: 8px
Blur/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

组件结构：
scss 复制代码
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

组件结构：
scss 复制代码
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

组件结构：
scss 复制代码
Card (Main Component)
├── Background (Rectangle)
├── Content (Auto Layout)
│   ├── Header (Optional)
│   ├── Body (Auto Layout)
│   └── Footer (Optional)
└── Shadow (Effect Style)
3.2 复合组件 (Composite Components)

导航栏组件 (Navigation)

组件结构：
scss 复制代码
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)

组件结构：
scss 复制代码
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)
scss 复制代码
类型：Columns
列数：24
间距：24px
边距：48px
颜色：rgba(255, 0, 0, 0.1)
平板端网格 (Tablet 768px-1199px)
scss 复制代码
类型：Columns
列数：12
间距：16px
边距：32px
颜色：rgba(0, 255, 0, 0.1)
移动端网格 (Mobile <768px)
scss 复制代码
类型：Columns
列数：4
间距：16px
边距：16px
颜色：rgba(0, 0, 255, 0.1)
4.2 基线网格 (Baseline Grid)
scss 复制代码
间距：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)
diff 复制代码
用途：按钮组、导航菜单、标签页
设置：
- Direction: Horizontal
- Spacing: 16px
- Alignment: Center
- Padding: 16px
垂直排列 (Vertical)
diff 复制代码
用途：表单、卡片内容、列表
设置：
- Direction: Vertical
- Spacing: 24px
- Alignment: Top
- Padding: 24px
嵌套布局 (Nested)
diff 复制代码
用途：复杂组件、页面布局
设置：
- 外层：Vertical (页面结构)
- 内层：Horizontal (内容排列)
- 合理使用Fill和Hug
6. 约束和响应式设计

6.1 约束设置 (Constraints)

固定元素
css 复制代码
导航栏：Left & Right + Top
侧边栏：Left + Top & Bottom
底部栏：Left & Right + Bottom
自适应元素
scss 复制代码
主内容区：Left & Right + Top & Bottom
卡片：Left & Right + Top
按钮：Center + Top
6.2 响应式组件设计

断点设置
scss 复制代码
移动端：375px (iPhone)
平板端：768px (iPad)
桌面端：1200px (Desktop)
大屏幕：1600px (Large Desktop)
组件适配策略
erlang 复制代码
按钮：保持固定高度，宽度自适应
输入框：宽度100%，高度固定
卡片：宽度自适应，内容Hug
导航：移动端折叠，桌面端展开
7. 原型交互设计

7.1 交互类型

基础交互

On Click - 点击跳转

On Hover - 悬停效果

On Drag - 拖拽操作

While Pressing - 按压状态

高级交互

After Delay - 延时触发

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

Key/Gamepad - 键盘操作

7.2 动画设置

过渡动画
diff 复制代码
微交互：
- Duration: 150ms
- Easing: Ease Out
- 用途：按钮悬停、输入框聚焦

标准动画：
- Duration: 300ms
- Easing: Ease In Out
- 用途：页面切换、模态框

复杂动画：
- Duration: 500ms
- Easing: Spring
- 用途：列表展开、内容加载
Smart Animate
diff 复制代码
使用场景：
- 组件状态变化
- 页面间元素连续性
- 列表项动画

设置要点：
- 保持图层命名一致
- 使用相同组件实例
- 合理设置动画时长
8. 团队协作规范

8.1 权限管理

角色分配
diff 复制代码
Owner：项目负责人
- 完全访问权限
- 管理团队成员
- 发布组件库

Editor：设计师
- 编辑设计文件
- 创建和修改组件
- 添加评论

Viewer：开发者/产品经理
- 查看设计文件
- 添加评论
- 检查设计规范
8.2 版本控制

版本命名规范
复制代码
v主版本.次版本.修订版本
例如：v2.1.3

主版本：重大功能更新
次版本：新增功能或组件
修订版本：Bug修复或小调整
分支管理
css 复制代码
Main：主分支（稳定版本）
Develop：开发分支（新功能开发）
Feature：功能分支（具体功能开发）
Hotfix：修复分支（紧急修复）
8.3 评论和反馈

评论规范
diff 复制代码
设计评论：
- 明确指出问题位置
- 提供具体修改建议
- 使用@提及相关人员

开发评论：
- 标注技术实现难点
- 确认交互细节
- 询问设计意图
9. 设计交付规范

9.1 设计稿交付

文件整理
复制代码
交付前检查：
□ 页面命名规范
□ 图层命名清晰
□ 组件使用正确
□ 样式应用一致
□ 原型交互完整
标注说明
diff 复制代码
必要标注：
- 尺寸标注（间距、大小）
- 颜色标注（色值、透明度）
- 字体标注（字号、行高、字重）
- 交互标注（状态、动画）
9.2 开发者模式 (Dev Mode)

使用指南
diff 复制代码
开发者功能：
- 自动生成CSS代码
- 获取精确尺寸数据
- 导出切图资源
- 查看组件属性
代码导出
diff 复制代码
CSS属性：
- 自动生成样式代码
- 支持多种单位（px, rem, %）
- 包含响应式断点

资源导出：
- SVG图标导出
- 图片资源导出
- 支持多倍图
10. 插件推荐

10.1 设计效率插件

必装插件
diff 复制代码
Content Reel：
- 快速填充文本内容
- 支持中文假数据
- 提高设计效率

Unsplash：
- 高质量图片素材
- 直接插入设计稿
- 免费商用

Iconify：
- 海量图标库
- 支持多种风格
- 一键插入
辅助插件
diff 复制代码
Figma to Code：
- 设计稿转代码
- 支持多种框架
- 提高开发效率

Contrast：
- 颜色对比度检查
- 无障碍设计辅助
- WCAG标准检测

Component Inspector：
- 组件使用情况分析
- 设计系统维护
- 组件优化建议
10.2 团队协作插件

沟通协作
diff 复制代码
FigJam：
- 在线白板协作
- 头脑风暴
- 流程图绘制

Miro：
- 项目规划
- 用户旅程图
- 团队协作
11. 质量检查清单

11.1 设计质量检查

视觉检查
复制代码
□ 颜色使用符合设计系统
□ 字体样式应用正确
□ 间距遵循8点网格
□ 组件状态完整
□ 阴影效果合理
□ 圆角使用一致
交互检查
复制代码
□ 原型流程完整
□ 动画时长合理
□ 交互反馈明确
□ 错误状态处理
□ 加载状态设计
11.2 技术检查

开发友好性
复制代码
□ 图层命名规范
□ 组件结构清晰
□ 约束设置正确
□ 样式可复用
□ 代码导出准确
性能优化
复制代码
□ 文件大小合理
□ 组件实例使用
□ 图片格式优化
□ 不必要元素清理
12. 常见问题解决

12.1 组件问题

组件不更新
markdown 复制代码
解决方案：
1. 检查组件实例是否被覆盖
2. 重置组件实例
3. 更新组件库
4. 重新链接组件
样式不生效
markdown 复制代码
解决方案：
1. 检查样式是否被覆盖
2. 确认样式应用层级
3. 重新应用样式
4. 清除本地样式
12.2 性能问题

文件加载慢
markdown 复制代码
优化方案：
1. 减少页面数量
2. 优化图片大小
3. 清理无用元素
4. 使用组件实例
操作卡顿
markdown 复制代码
解决方案：
1. 关闭不必要的插件
2. 清理浏览器缓存
3. 重启Figma应用
4. 检查网络连接
13. 更新日志

版本 1.0.0 (2024-01-01)

初始版本发布

建立Figma设计系统规范

定义组件库标准

制定团队协作流程

14. 参考资源

官方文档

Figma官方文档：

help.figma.com/hc/en-us

Figma设计系统指南：

www.figma.com/design-syst...

Figma最佳实践：

www.figma.com/best-practi...

社区资源

Figma Community：

www.figma.com/community

Design Systems Repo：

designsystemsrepo.com/

Figma插件市场：

www.figma.com/community/p...

学习资源

Figma Academy：

www.figma.com/academy/

YouTube Figma频道：

www.youtube.com/figmadesign

设计系统案例研究：

www.designsystems.com/

本指南将根据Figma功能更新和团队实践持续优化，确保与最新的设计趋势和工具功能保持同步。