Figma AI 设计辅助教程：从设计 Brief 到页面评审

工具简介

Figma 是主流界面设计工具。结合 AI 后，可以辅助生成设计 Brief、页面文案、组件建议和设计评审清单。

适合场景

生成设计 Brief
梳理页面信息层级
生成空状态和错误状态文案
做设计评审
提取组件规范

使用案例

设计一个内容站首页时，可以先让 AI 输出页面目标、用户路径、核心模块和 CTA，再进入 Figma 设计。

推荐工作流

Step 1：先生成设计 Brief

在进入 Figma 之前，先让 AI 帮你明确页面目标、用户和信息结构。

请根据以下产品目标生成设计 Brief。
请包含：目标用户、页面目标、核心模块、主 CTA、次 CTA、信任信息、移动端注意事项和不做范围。

产品目标：
[填写]

Step 2：拆解页面模块

拿到 Brief 后，不要直接让 AI “设计一个页面”，而是让它拆模块：

请把这个页面拆成模块清单。
每个模块包含：模块目标、主要内容、用户关心的问题、建议组件和文案方向。

Step 3：生成页面文案

对于首页、落地页或功能页，可以让 AI 生成各模块文案：

请为以下页面模块生成文案。
要求：标题清晰、说明具体、CTA 明确，不使用“赋能、革新、颠覆”等空泛词。

Step 4：进入 Figma 设计

把 AI 输出的模块结构放入 Figma，再由设计师处理视觉层级、组件规范、间距、对齐、响应式和交互状态。

Step 5：用 AI 做设计评审

设计稿完成后，可以上传截图或描述页面结构，让 AI 从目标、层级、CTA、文案和状态覆盖角度做评审。

Prompt 示例

你是一名 UX 设计顾问。请根据以下产品目标，生成首页设计 Brief。
请包含：目标用户、页面目标、核心模块、主 CTA、次 CTA、信任信息和移动端注意事项。

输出模板

## 页面目标
[这个页面希望用户完成什么]

## 目标用户
[用户类型和当前状态]

## 页面模块
| 模块 | 目标 | 内容 | CTA |
| --- | --- | --- | --- |
| Hero | 让用户理解价值 | 标题、说明、主按钮 | 查看工作流 |

## 状态设计
- 空状态：
- 加载状态：
- 错误状态：
- 移动端注意事项：

## 设计评审问题
- 页面目标是否清晰？
- 主 CTA 是否突出？
- 信息层级是否合理？

常见问题

AI 可以直接替我完成 Figma 设计吗？

AI 可以辅助生成 Brief、文案和评审清单，但视觉判断、组件规范和真实可用性仍需要设计师确认。

没有设计经验的人能用这个流程吗？

可以用于整理页面结构和评审问题，但不要把 AI 输出当作最终设计规范。至少需要检查移动端、间距、对比度和交互状态。

设计评审时应该上传截图还是文字描述？

如果可以上传截图，效果更好；如果不能上传截图，也可以用文字描述页面结构、模块顺序和当前担心的问题。

人工复核清单

页面目标是否能在首屏看懂？
主 CTA 是否只有一个明确重点？
文案是否具体而不是空泛？
空状态、错误状态、加载状态是否覆盖？
移动端信息顺序是否合理？
设计建议是否符合品牌和组件规范？

注意事项

AI 能帮助设计思考，但不能替代真实用户测试和视觉细节打磨。