ux-specification

UX 规范

将产品需求转化为具体的流程、界面和交互，供编码 Agent 实现。

存在的意义

通过定义产品的外观和行为，弥合产品需求与实现之间的差距。

输入要求

此技能需要：

• PRD（来自 prd-generation 或由用户提供）
• 任何现有草图、线框图或参考资料（可选）
• 设计偏好或约束（可选）

工作流

第 1 步：导入 PRD

从 PRD 中提取：

• 用户故事（尤其是 Must Have）
• 功能和验收标准
• 目标用户特征
• 技术约束

第 2 步：绘制用户流程

为每个核心用户故事定义流程：

需要回答的问题：

• 用户从哪里开始？
• 顺利完成的路径是什么？
• 有哪些决策点？
• 用户最终会到达哪里？
• 可能出现什么问题？

第 3 步：定义界面

针对流程中的每个界面：

• 用途是什么？
• 需要哪些组件？
• 显示哪些数据？
• 提供哪些操作？
• 有哪些状态？

第 4 步：指定交互

针对关键交互：

• 什么会触发此操作？
• 用户会收到什么反馈？
• 屏幕上会发生什么变化？
• 需要多长时间？

第 5 步：澄清缺漏

必要时提出有针对性的问题：

• “这应该是模态框还是新页面？”
• “列表为空时会怎样？”
• “用户如何知道内容正在加载？”
• “对布局有什么偏好——侧边栏、标签页还是单页？”

输出格式

使用 Write 工具自动将输出保存到 design/06-ux-spec.md，同时向用户展示。

# UX Spec: [Project Name]

## Overview
[Brief summary of the product and primary user goal]

---

## Information Architecture

### Navigation Structure

[应用名称] ├── [主导航项 1] │ ├── [子项] │ └── [子项] ├── [主导航项 2] └── [主导航项 3]

### Key User Paths
1. **[Path Name]:** [Start] → [Step] → [Step] → [End]
2. **[Path Name]:** [Start] → [Step] → [End]

---

## User Flows

### Flow 1: [Flow Name]
**Trigger:** [What initiates this flow]
**User goal:** [What they're trying to accomplish]

[起始状态] ↓ [操作/决策] ↓ [界面/状态] ──→ [适用时的替代路径] ↓ [结束状态]

**Steps:**
1. User [action]
2. System [response]
3. User [action]
4. System [response]
5. User reaches [end state]

**Error paths:**
- If [condition]: [what happens]
- If [condition]: [what happens]

### Flow 2: [Flow Name]
[Same structure]

---

## Screens

### Screen: [Screen Name]
**URL/Route:** `/path`
**Purpose:** [What the user accomplishes here]
**Entry points:** [How users get here]

#### Layout

┌─────────────────────────────────┐ │ [页眉/导航] │ ├─────────────────────────────────┤ │ │ │ [主要内容区域] │ │ │ │ [组件] [组件] │ │ │ ├─────────────────────────────────┤ │ [页脚/操作] │ └─────────────────────────────────┘

#### Components
| Component | Description | Behavior |
|-----------|-------------|----------|
| [Name] | [What it displays] | [How it behaves] |
| [Name] | [What it displays] | [How it behaves] |

#### States
| State | Appearance | Trigger |
|-------|------------|---------|
| Default | [Description] | Initial load |
| Loading | [Description] | Data fetching |
| Empty | [Description] | No data exists |
| Error | [Description] | Request failed |
| Success | [Description] | Action completed |

#### Actions
| Action | Trigger | Result |
|--------|---------|--------|
| [Action] | [Click/tap/etc.] | [What happens] |
| [Action] | [Trigger] | [Result] |

### Screen: [Screen Name]
[Same structure]

---

## Components

### Component: [Component Name]
**Used in:** [List of screens]
**Purpose:** [What it does]

#### Props/Inputs
| Prop | Type | Description |
|------|------|-------------|
| [name] | [type] | [what it controls] |

#### Variants
- **[Variant 1]:** [Description]
- **[Variant 2]:** [Description]

#### States
- Default: [Description]
- Hover: [Description]
- Active: [Description]
- Disabled: [Description]

### Component: [Component Name]
[Same structure]

---

## Interactions

### Interaction: [Name]
**Trigger:** [User action]
**Response:** [System behavior]
**Duration:** [Instant / 200ms / async]
**Feedback:** [What user sees/feels]

### Interaction: [Name]
[Same structure]

---

## Responsive Behavior
**Breakpoints:**
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px

**Key adaptations:**
- [Component/layout]: [How it changes]
- [Component/layout]: [How it changes]

---

## Design Notes
[Optional — any specific visual direction, references, or constraints]

- **Style:** [Minimal / Dense / Playful / etc.]
- **Reference:** [Any inspiration or similar products]
- **Constraints:** [Accessibility, brand, etc.]

适配指南

简单项目（1-3 个界面）：

• 跳过信息架构
• 合并流程和界面
• 组件部分尽量精简
• 跳过响应式行为

中型项目（4-8 个界面）：

• 采用上文所示的完整结构
• 聚焦核心流程，而非边缘情况

复杂项目（10 个以上界面）：

• 添加逐屏详情
• 记录所有组件变体
• 纳入边缘情况流程
• 添加设计备注部分

写作指南

• ASCII 布局已足够——不要过度复杂化，只需展示结构
• 状态至关重要——加载、空和错误状态可避免 Agent 自行猜测
• 明确说明触发方式——“点击”与“悬停”或“聚焦”有所不同
• 保持命名一致——在不同界面中使用相同的组件名称

移交

展示 UX 规范后，询问：

“准备好使用 /prompt-export 生成 prompts.md 了吗？还是想先完善某些界面？”

**注意：**文件会自动保存到 design/06-ux-spec.md。此文件将用于生成开发提示词。