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

Figma 是主流界面设计工具。结合 AI 后，它可以辅助生成设计 Brief、页面模块、文案、状态清单和评审问题。但 AI 不应该直接替代设计判断：视觉层级、组件规范、响应式布局、可访问性和品牌一致性仍然需要设计师或产品负责人复核。

这篇教程介绍如何在进入 Figma 前用 AI 梳理设计目标，在设计过程中生成模块和文案，并在设计稿完成后用 AI 做结构化评审。

工具简介

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

适合：

• 生成设计 Brief
• 梳理页面信息层级
• 生成空状态和错误状态文案
• 做设计评审
• 提取组件规范
• 准备交互说明
• 检查移动端页面顺序

不适合：

• 直接替代品牌视觉规范
• 不看用户场景就生成页面
• 只根据审美词判断设计好坏
• 关键转化页面不做数据和用户反馈验证

推荐工作流

graph TD
  A[产品目标 / 用户场景] --> B[AI 生成设计 Brief]
  B --> C[拆解页面模块和信息层级]
  C --> D[进入 Figma 设计组件和布局]
  D --> E[导出截图或描述页面结构]
  E --> F[AI 结构化设计评审]
  F --> G[人工检查品牌、可访问性和移动端]
  G --> H[标记修改项并进入下一轮设计]

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、文案和状态覆盖角度做评审。

使用案例：内容站首页设计 Brief

场景

你要设计一个 AI 生产力内容站首页，希望用户快速理解网站提供 Prompt、Workflow、Tool、Agent 和 Guide，并继续进入专题页阅读。

输入给 AI

产品目标：设计一个 AI 生产力内容站首页。
目标用户：想用 AI 提升工作效率的内容创作者、产品经理、运营和开发者。
页面目标：让用户理解网站价值，并进入 Prompt、Workflow、Tool、Agent 或 Guide 栏目。
限制：不要做强广告弹窗，优先保证阅读和导航体验。

AI 输出示例

## 页面目标
让首次访问用户在首屏理解：这是一个提供 AI 生产力教程、模板和工作流的网站，并选择一个入口继续阅读。

## 核心模块
1. Hero：一句话定位 + 主 CTA「查看工作流」+ 次 CTA「浏览 Prompt」
2. 分类入口：Prompt / Workflow / Tool / Agent / Guide
3. 推荐阅读路径：从写作、自动化、内容站三个主题进入
4. 最新内容：展示更新频率和内容活跃度
5. 信任信息：维护者说明、编辑政策、反馈入口

## 移动端注意事项
- 分类入口不要一行挤太多
- CTA 保持可点击尺寸
- 推荐阅读路径优先于长列表

设计师再把这些模块放入 Figma，处理卡片、间距、颜色和响应式。

页面结构草图

┌────────────────────────────────────┐
│ Hero：一句话定位 + 主 CTA           │
│ 说明：AI Prompt / Workflow / Tool   │
├────────────────────────────────────┤
│ 场景入口：写作 / 产品 / 编程 / SEO   │
├────────────────────────────────────┤
│ 推荐阅读路径：从新手到实战           │
├────────────────────────────────────┤
│ 精选内容：高质量 Guide / Workflow    │
├────────────────────────────────────┤
│ 信任信息：作者、编辑原则、反馈入口    │
└────────────────────────────────────┘

这个草图不是最终视觉稿，而是让设计师、产品和 AI 评审先对页面信息层级达成一致。进入 Figma 后再处理组件、栅格、间距、颜色和响应式。

Prompt 示例

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

要求：
- 不要只给视觉风格词
- 每个模块说明用户为什么需要它
- 标记需要产品确认的问题

输出模板

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

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

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

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

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

设计评审 Prompt

请作为 UX 设计评审专家，评审下面的页面设计。

页面目标：
[填写]

目标用户：
[填写]

设计稿说明或截图：
[填写]

请检查：
1. 首屏是否能说明页面价值
2. 主 CTA 是否突出
3. 信息层级是否合理
4. 文案是否具体
5. 空状态、错误状态、加载状态是否缺失
6. 移动端是否可能出现阅读或点击问题
7. 需要用户测试验证的问题

请按高 / 中 / 低优先级输出。

常见问题

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

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

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

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

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

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

常见失败案例

失败 1：只输出风格词

页面应该简洁、高级、有科技感。

这类反馈不可执行。应该转成具体模块和视觉层级建议。

失败 2：忽略状态设计

设计稿只展示理想状态，缺少空状态、错误状态、加载状态和移动端状态。AI 评审时要明确检查这些状态。

失败 3：CTA 太多

一个页面首屏同时出现多个同等权重按钮，会让用户不知道点哪里。需要区分主行动和次行动。

人工复核清单

• 页面目标是否能在首屏看懂？
• 主 CTA 是否只有一个明确重点？
• 文案是否具体而不是空泛？
• 空状态、错误状态、加载状态是否覆盖？
• 移动端信息顺序是否合理？
• 设计建议是否符合品牌和组件规范？
• 对比度、字号和点击区域是否可用？
• 是否需要真实用户或数据验证？

注意事项

AI 能帮助设计思考，但不能替代真实用户测试和视觉细节打磨。把 AI 当作设计前的结构助手和设计后的评审助手，比让它直接输出最终设计更可靠。

延伸阅读

• AI 设计评审专题：Figma、设计 Brief、页面评审和用户体验
• 设计评审 Skill：用 AI 检查页面目标、层级和可用性
• 用 AI 做设计评审的工作流