# Lesson 17: WDS 概览：从用户心理到设计规范

## 本课目标

- 理解 WDS（Web Design System，网页设计系统）的定位：为什么在 CIS 和 BMM 之后还需要它
- 掌握 WDS 8 阶段流水线（Phase 0-8）的完整流程和每个阶段的产出
- 认识两位核心代理：Saga（分析师）和 Freya（设计师）
- 理解 WDS 和 BMM/CIS 的衔接关系

> **阶段概览**：打开 [stage3-overview.html](stage3-overview.html)，用可视化方式浏览阶段 3 的 WDS 全流程和代理关系。

## 核心内容

### WDS 缩写速查表

本课涉及多个新概念，先看这张表建立印象：

| 缩写 | 全称 | 中文 | 一句话说明 |
|------|------|------|-----------|
| WDS | Web Design System | 网页设计系统 | cc4pm 的第三大模块，从用户心理驱动设计 |
| TM | Trigger Map | 触发力地图 | 把商业目标映射到用户心理驱动力 |
| UX | User Experience | 用户体验 | 用户使用产品时的整体感受 |
| Phase | Phase | 阶段 | WDS 流水线中的每一步 |
| Saga | Saga | 萨迦（代理名） | WDS 分析师代理，负责前期研究 |
| Freya | Freya | 芙蕾雅（代理名） | WDS 设计师代理，负责设计和实现 |

### 为什么需要 WDS？

你已经用 CIS（Creative & Innovation Suite，创意创新套件）做了头脑风暴和创新策略，用 BMM（BMAD Method，BMAD 方法论）创建了 PRD（Product Requirements Document，产品需求文档）、做了需求拆解和冲刺规划。

但你有没有想过一个问题：**PRD 说了"做什么"，但谁来决定"怎么让用户喜欢用"？**

这就是 WDS 要解决的问题：

```
CIS  → "做什么产品？有什么创新点？"     → 创意和方向
BMM  → "需求是什么？怎么拆解执行？"     → 规格和计划
WDS  → "用户为什么想用？怎么设计体验？"  → 心理和设计
```

**传统做法的问题**：

```
产品主理人写完 PRD → 扔给设计师 → 设计师画 UI → 开发实现
                    ↑
              这里断裂了——设计师不知道用户的"为什么"
```

**WDS 的做法**：

```
PRD → Trigger Map（用户心理分析）→ UX 场景 → 视觉设计 → 开发

> **延伸阅读**：WDS 的产出最终会和工程工具链对接——**Lesson 22（阶段 4）**的 `/e2e` 会将 UX 场景的"阳光路径"转化为端到端测试用例，**Lesson 25（阶段 5）**展示了 CIS→BMM→WDS→Engineering 四阶段如何在 5 天内走完全流程。
      ↑
      从"用户为什么想做这件事"开始设计
```

### WDS 的 8 阶段流水线

WDS 是一个端到端的设计方法论，有 8 个阶段（Phase 0-8），每个阶段都有明确的输入、产出和负责的代理。

```
Phase 0: 对齐签核（Alignment Sign-off）
         ↓ 确认方向，获得团队共识
Phase 1: 产品简报（Product Brief）
         ↓ 建立项目上下文
Phase 2: 触发力映射（Trigger Mapping）
         ↓ 把商业目标映射到用户心理
Phase 3: UX 场景设计（UX Scenarios）
         ↓ 把心理洞察变成用户旅程
Phase 4: UX 设计（UX Design）
         ↓ 把场景变成界面规范
Phase 5: 代理驱动开发（Agentic Development）
         ↓ AI 辅助编码实现
Phase 6: 资产生成（Asset Generation）
         ↓ 生成图标、图片、视频等
Phase 7: 设计系统（Design System）
         ↓ 建立可复用的组件库
Phase 8: 产品演化（Product Evolution）
         ↓ 持续改进和迭代
```

### 每个阶段详解

#### Phase 0: 对齐签核（Alignment Sign-off）

**做什么**：在正式开始前，确保所有人对产品方向达成共识。

**为什么需要**：最昂贵的错误是方向错误。花一小时对齐方向，比花一周做错方向要划算。

**产出**：团队签核文档，包括产品愿景、目标用户、核心问题的共识。

**启动命令**：

```bash
/bmad-wds-alignment-signoff
```

#### Phase 1: 产品简报（Product Brief）

**做什么**：建立项目的完整上下文——你在做什么、为谁做、技术栈是什么。

**和 BMM 的产品简报有什么不同**：BMM 的简报偏商业视角（市场机会、商业模式），WDS 的简报偏设计视角（用户群体、技术约束、设计目标）。如果你已经有 BMM 简报，可以直接复用。

**产出**：项目简报文档，包括项目类型、复杂度、技术栈、目标用户。

**启动命令**：

```bash
/bmad-wds-project-brief
```

#### Phase 2: 触发力映射（Trigger Mapping）

**这是 WDS 最核心、最独特的阶段**——没有任何其他设计方法论有这个步骤。

**做什么**：通过 4 个结构化研讨会（Workshop），把商业目标映射到用户的心理驱动力，再映射到具体功能。

**核心思想**：用户不是因为"功能好"才用你的产品，而是因为某种心理驱动力——恐惧、渴望、好奇、社交压力。理解这些驱动力，才能设计出真正打动人的产品。

**产出**：Trigger Map 文档，包含商业目标、目标用户群、正向/负向驱动力、功能优先级。

> Lesson 18 会深入讲解 Trigger Map 的完整流程。

**启动命令**：

```bash
/bmad-wds-trigger-mapping
```

#### Phase 3: UX 场景设计（UX Scenarios）

**做什么**：把 Trigger Map 中发现的心理驱动力，转化为具体的用户旅程——用户在什么情境下、因为什么动机、通过什么路径完成目标。

**和 BMM 的用户旅程有什么不同**：BMM 的用户旅程偏功能视角（"用户点击登录按钮"），WDS 的场景偏心理视角（"用户因为害怕错过优惠而打开 App"）。

**产出**：场景大纲文档，包含 8 个核心组成部分（交易、商业目标、用户与情境、驱动力、设备、入口、最佳结果、最短路径）。

> Lesson 19 会深入讲解 UX 场景的创建方法。

**启动命令**：

```bash
/bmad-wds-scenarios
```

#### Phase 4: UX 设计（UX Design）

**做什么**：把场景变成具体的界面设计规范——页面布局、组件选择、交互模式、内容策略。

**核心流程**：

```
场景大纲 → 讨论每个页面需要什么
         → 生成页面规范
         → 选择/创建组件
         → 线框图
         → 视觉设计
         → 原型验证
```

**产出**：页面规范文档（Page Spec），包含布局、组件、交互、内容的详细描述。

**启动命令**：

```bash
/bmad-wds-ux-design
```

#### Phase 5: 代理驱动开发（Agentic Development）

**做什么**：AI 代理根据设计规范自动生成代码、运行测试、修复问题。

**对 PM 意味着什么**：你不需要亲自写代码，但你需要理解——设计规范写得越清楚，AI 生成的代码质量越高。这就是前面 4 个阶段的价值所在。

**启动命令**：

```bash
/bmad-wds-development
```

#### Phase 6: 资产生成（Asset Generation）

**做什么**：根据设计规范生成各种视觉资产——图标、图片、插画、视频、动画。

**支持的资产类型**：

| 资产类型 | 命令 | 说明 |
|---------|------|------|
| 图标 | `/bmad-wds-icons` | 匹配设计系统风格的图标集 |
| 图片 | `/bmad-wds-images` | 照片、插画、背景图 |
| 视频 | `/bmad-wds-videos` | 动态内容和动画 |
| UI 组件 | `/bmad-wds-ui-elements` | 按钮、卡片、表单等 |

#### Phase 7: 设计系统（Design System）

**做什么**：建立一套可复用的设计系统——颜色、字体、间距、组件库——确保产品在视觉上一致。

**三个核心操作**：

```
创建设计系统：/bmad-wds-create-design-system
导入设计系统：/bmad-wds-import-design-system
浏览设计系统：/bmad-wds-browse-design-system
```

#### Phase 8: 产品演化（Product Evolution）

**做什么**：产品上线后的持续改进——分析用户反馈、找到改进点、设计优化方案。

**这是一个循环**：

```
分析现有产品 → 确定改进范围 → 设计解决方案 → 实现 → 部署 → 收集反馈 → 重新分析
```

**启动命令**：

```bash
/bmad-wds-product-evolution
```

### 认识两位核心代理

WDS 有两位主要代理，各有分工：

#### Saga（萨迦）—— 分析师代理

**定位**：WDS 的"洞察者"，负责 Phase 1-2 的分析工作。

**性格**：严谨、数据驱动、善于提问、喜欢追根究底。

**核心能力**：

| 能力 | 说明 | 对应阶段 |
|------|------|---------|
| 产品分析 | 分析现有产品，找到改进点 | Phase 1 |
| Trigger Mapping | 引导 4 个心理分析研讨会 | Phase 2 |
| 用户心理洞察 | 识别正向/负向驱动力 | Phase 2 |
| 竞品设计分析 | 逆向工程竞品的设计模式 | Phase 1 |

**启动 Saga**：

```bash
/bmad-agent-wds-saga-analyst
```

#### Freya（芙蕾雅）—— 设计师代理

**定位**：WDS 的"创造者"，负责 Phase 4-8 的设计和实现工作。

**性格**：创造力强、注重细节、追求美感、同时兼顾实用性。

**核心能力**：

| 能力 | 说明 | 对应阶段 |
|------|------|---------|
| UX 设计 | 创建页面规范和交互设计 | Phase 4 |
| 视觉设计 | 线框图、原型、视觉稿 | Phase 4 |
| 资产生成 | 图标、图片、动画等 | Phase 6 |
| 设计系统 | 建立和维护组件库 | Phase 7 |
| 代码生成 | 从设计规范生成前端代码 | Phase 5 |

**启动 Freya**：

```bash
/bmad-agent-wds-freya-ux
```

#### Saga 和 Freya 的协作

```
Saga（Phase 1-2）          Freya（Phase 4-8）
    ↓                           ↓
分析产品 → Trigger Map   →  UX 场景 → 设计 → 开发 → 资产 → 设计系统
    ↑                           ↑
 "用户为什么需要这个？"    "用户会怎么使用这个？"

Phase 3（UX 场景）是两者的衔接点
——Saga 的心理分析 + Freya 的设计思维
```

### WDS 在完整流程中的位置

回顾 cc4pm 的四大模块，看 WDS 在整个流程中处于什么位置：

```
┌──────────────────────────────────────────────────────┐
│              CIS（创意创新套件）                       │
│                                                      │
│  头脑风暴 → 创新策略 → 选定方向                       │
│  (L11)      (L12)                                    │
└────────────────────┬─────────────────────────────────┘
                     │ "做什么产品？"
                     ▼
┌──────────────────────────────────────────────────────┐
│              BMM（BMAD 方法论）                        │
│                                                      │
│  市场研究 → PRD → 架构 → Epics → 冲刺规划            │
│  (L13)     (L14)        (L15)   (L16)                │
└────────────────────┬─────────────────────────────────┘
                     │ "需求是什么？"
                     ▼
┌──────────────────────────────────────────────────────┐
│              WDS（网页设计系统）← 你在这里              │
│                                                      │
│  Trigger Map → 场景 → UX 设计 → 开发 → 设计系统      │
│  (L18)        (L19)  (L20 相关)                      │
└────────────────────┬─────────────────────────────────┘
                     │ "用户体验怎么设计？"
                     ▼
┌──────────────────────────────────────────────────────┐
│              工程协作与质量保障                         │
│                                                      │
│  /plan → /tdd → /e2e → /code-review                 │
│  (L21)   (L22)  (L22)  (L22)                        │
└──────────────────────────────────────────────────────┘
```

### WDS 的 52 个技能

WDS 是 cc4pm 中技能数量最多的模块，有 **52 个技能**分布在 8 个阶段。你不需要记住所有技能——理解流水线结构后，按阶段找到需要的技能即可。

**按阶段分类**：

| 阶段 | 技能数 | 代表性技能 |
|------|--------|-----------|
| Phase 0: 对齐 | 2 | alignment-signoff, project-setup |
| Phase 1: 简报 | 3 | project-brief, analyze-product, reverse-engineering |
| Phase 2: Trigger | 3 | trigger-mapping, trigger-mapping-validate, scope-improvement |
| Phase 3: 场景 | 2 | scenarios, scenarios-validate |
| Phase 4: 设计 | 14 | ux-design, wireframes, page-designs, prototyping... |
| Phase 5: 开发 | 6 | development, agentic-development, bugfixing... |
| Phase 6: 资产 | 6 | icons, images, videos, ui-elements, content-creation... |
| Phase 7: 设计系统 | 8 | create-design-system, import-design-system, browse-design-system... |
| Phase 8: 演化 | 8 | product-evolution, evolution, deploy, acceptance-test... |

### PM 在 WDS 中的角色

作为产品主理人，你在 WDS 流程中的核心参与点是：

| 阶段 | PM 的参与 | 做什么 |
|------|----------|--------|
| Phase 0 | **主导** | 确认产品方向，获得团队签核 |
| Phase 1 | **主导** | 提供产品上下文和目标 |
| Phase 2 | **深度参与** | 参与 Trigger Map 研讨会，贡献用户洞察 |
| Phase 3 | **审核** | 验证场景是否符合产品需求 |
| Phase 4 | **审核** | 验收设计方案是否满足需求 |
| Phase 5-7 | **跟进** | 关注进度，验收关键节点 |
| Phase 8 | **主导** | 驱动产品改进方向 |

## 🛠️ 实操练习

> **⚠️ 实操须知**：命令需在新 Claude Code session 中执行。详见 [practice-notice.md](../shared/practice-notice.md)

完成以下练习，了解 WDS 模块的核心工具。

### 练习 1：启动 Saga 并了解 WDS 流程

```bash
# 启动 Saga 故事女神
/bmad-agent-wds-saga-analyst
```

**任务**：
1. 与 Saga 对话，了解 WDS 的 8 阶段流程
2. 询问 Saga 关于 Trigger Mapping 的基本概念

### 练习 2：尝试项目设置

```bash
# WDS 项目设置
/bmad-wds-project-setup
```

**任务**：
- 运行项目设置，了解 WDS 如何初始化一个设计项目
- 查看生成的项目结构

### 练习 3：探索 WDS 的其他技能

尝试以下命令，了解 WDS 模块的能力范围：

```bash
# 对齐签核
/bmad-wds-alignment-signoff

# 产品简报
/bmad-wds-project-brief

# 分析现有产品
/bmad-wds-analyze-product

# 逆向工程（分析竞品）
/bmad-wds-reverse-engineering
```

**检查清单**：
- [ ] 成功启动 Saga 代理
- [ ] 了解了 WDS 的 8 阶段流程
- [ ] 尝试了项目设置
- [ ] 探索了至少 2 个 WDS 技能

---

## 常见问题

**Q: WDS 只能做网页设计吗？**

A: 虽然名字叫"Web Design System"，但 WDS 的方法论（特别是 Trigger Mapping 和 UX 场景）适用于任何数字产品——Web App、Mobile App、桌面应用甚至 API 设计。核心是"从用户心理驱动设计"这个思想，不限于网页。

**Q: 如果我已经有设计师了，还需要 WDS 吗？**

A: 需要。WDS 不是替代设计师，而是提供一套结构化的设计流程。特别是 Trigger Map——大多数设计师都是从"界面长什么样"开始设计，而不是从"用户为什么想用"开始。WDS 帮你补上这个关键的"为什么"环节。

**Q: Phase 0-8 必须全部做完吗？**

A: 不必。你可以根据项目需要选择阶段。最推荐的最小集合是 Phase 2（Trigger Mapping）→ Phase 3（UX Scenarios）→ Phase 4（UX Design）。这三个阶段覆盖了"用户心理→用户旅程→界面设计"的核心链路。

**Q: WDS 和传统 UX 设计流程有什么本质区别？**

A: 传统 UX 流程通常是：用户研究→竞品分析→信息架构→线框图→视觉设计。WDS 在"用户研究"和"信息架构"之间插入了 Trigger Mapping——系统地分析用户的心理驱动力。这个步骤让后续的设计决策有了心理学依据，而不仅仅是设计师的直觉。

## 下一步

请调用 `AskUserQuestion` 展示以下选项，让学习者点击选择；从每条中提炼 1-5 个词作为 label，其余写入 description，不要要求输入数字：

- 进入下一课：Lesson 17.1 - UI 设计词典：108 个界面模式速查
- 跳到核心课：Lesson 18 - Trigger Map：用户心理→功能映射
- 返回主菜单
- 退出学习

---
*阶段 3 | Lesson 17/26 (阶段内 1/4) | 上一课: Lesson 16.1 - 路线纠正与回顾（阶段 2） | 下一课: Lesson 17.1 - UI 设计词典*