SOTA Sync
返回 FEED
AGENT2026-05-29

AI 产品设计工作流：从 Brief 到 UI 的完整 pipeline

Avid 分享了一个完整的 AI 驱动产品设计工作流，从 brief 到可交付 UI，每个阶段都有明确的交付物和验证标准。

阶段 1：Brief

目标：用一句话定义产品要解决的问题。

格式：

[产品名] 帮助 [目标用户] 在 [场景] 中 [完成什么任务]，通过 [核心机制]。

示例：

"Day One 帮助忙碌的专业人士在碎片化时间中记录想法和反思，通过语音输入 + AI 自动分类 + 每日回顾。"

如果一句话说不清楚，产品还没想清楚。Brief 不是营销文案，是设计约束。

阶段 2：Design Library

目标：定义视觉语言，确保 AI 生成的 UI 有统一的美学。

交付物：design-library.md

包含：

  • 色彩系统（主色、辅色、语义色、深色模式映射）
  • 字体层级（Display / H1-H4 / Body / Caption，含字重和行高）
  • 组件规范（Button、Input、Card、Modal 等的状态和尺寸）
  • 间距和布局网格
  • 动效原则（缓动曲线、时长、触发条件）

关键洞察：不给 AI 设计库，它会每次都发明一套新的视觉语言。设计库是约束，也是质量底线。

工具：用 AI 生成初始设计库，然后人工调整。一次创建，多项目复用。

阶段 3：Flow（最重要且最容易被跳过）

目标：定义用户如何从一个状态移动到另一个状态。

交付物：flow.md

格式：

## Flow: [Flow 名称]

**触发条件**：用户做了什么进入这个 flow？
**前置状态**：用户从哪里来？
**步骤**：
1. [步骤名] → [目标状态]
2. [步骤名] → [目标状态]
**结束状态**：用户完成 flow 后在哪里？
**异常路径**：什么情况下会中断？

示例：

## Flow: Daily Check-In

**触发条件**：用户打开 App 或每日首次使用
**前置状态**：Home Screen
**步骤**：
1. 显示今日提示 → 用户选择「写」或「跳过」
2. 如果选择「写」→ 进入 Voice Input
3. Voice Input → AI 分类 → Journal Entry Created
**结束状态**：Journal 列表页，新条目置顶
**异常路径**：网络失败 → 本地保存草稿，提示稍后同步

核心规则：

  • 每个 flow 必须能用一句话命名。如果命名听起来 tedious，产品在画第一个矩形之前就是错的。
  • 回答所有 open questions 后再继续。AI 会暴露 brief 中模糊的地方——这些 open questions 是最高价值的输出。
  • 你不能设计一个屏幕，直到你知道哪些 flow 经过它。Dashboard 存在是因为三个 flow 汇聚。Command Palette 存在是因为两个 flow 通过跳过屏幕加速。

为什么大多数人跳过这个阶段：

因为 flow 不性感。它不产生视觉产出，不产生「看看这个多漂亮」的时刻。但跳过 flow 的后果是：AI 生成的 app 感觉像「美丽皮肤下的空骨架」——有界面，没有结构。

阶段 4：UI

目标：为每个 flow 中的每个状态设计屏幕。

输入：brief.md + design-library.md + flow.md

输出：每个屏幕的详细设计（布局、组件、交互、空状态、错误状态）

方法：

  1. 从 flow.md 中提取所有需要设计的屏幕
  2. 为每个屏幕写 prompt：「基于 flow X 的步骤 Y，设计 [屏幕名]，包含 [元素列表]」
  3. AI 生成初始设计
  4. 人工调整：修正幻觉、调整布局、确保一致性

关键洞察：

  • UI 是 flow 的几何表达。Flow 对了，UI 大部分是被迫的（forced）。
  • 先设计 happy path，再设计异常和边缘状态。
  • 空状态不是「没有数据时的占位符」，是 onboarding 和引导的机会。

完整 Pipeline

Brief (1句话)
  ↓
Design Library (视觉约束)
  ↓
Flow (状态机 + 路径)
  ↓
UI (屏幕几何)
  ↓
交付 (开发-ready 规格)

每个阶段都有明确的交付物和验证标准：

  • Brief：能一句话说清楚
  • Design Library：能一键导出给 AI 使用
  • Flow：零 open questions
  • UI：每个屏幕都能追溯到至少一个 flow

工具不是魔法，它们会 overshoot

Avid 强调：AI 工具会发明 brief 中没有的东西（比如凭空创造一个「team sharing」flow）。你需要纠正它们。

工具的价值不是替代设计思考，而是加速执行。Brief、Flow、设计决策——这些仍然需要人类判断。AI 做的是把判断后的决策快速转化为可交付物。

这个工作流的核心不是「用 AI 做设计」，而是「用 AI 加速已经想清楚的设计」。Flow 阶段是这个分水岭——想清楚了，AI 是加速器；没想清楚，AI 是幻觉生成器。

继续阅读