---
name: ux-walkthrough-skill
description: >
  以资深 UX 专家身份走查产品体验问题。阅读 PRD 理解产品目标，
  系统性检查用户流程、UI 一致性、错误处理等体验问题并汇总报告。
  Triggers on "UX走查", "体验问题", "用户体验检查", "walkthrough"。
---

# UX Walkthrough Skill

以资深用户体验专家的视角，系统性走查产品中的体验问题，并生成详细的问题报告。

## 核心能力

- 阅读 PRD 理解产品目标和核心用户流程
- 以用户视角模拟完整的使用流程
- 识别 UI/UX 问题（一致性、可用性、可访问性）
- 识别功能流程中断点和错误处理问题
- 生成结构化的问题报告

## 适用场景

- 产品上线前的体验质量检查
- 新功能开发后的走查验收
- 定期的产品体验审计
- 用户反馈问题的系统性排查

---

## 使用方法

### 基础用法
```
"帮我做一次 UX 走查"
"检查一下这个产品的体验问题"
```

### 指定范围
```
"走查评测到课程的完整流程"
"检查仪表板页面的体验问题"
```

### 指定重点
```
"重点检查错误处理和边界情况"
"关注移动端的体验问题"
```

---

## 实现流程

### Step 1: 理解产品

1. **阅读 PRD**（`docs/PRD.md`）
   - 理解产品目标和核心价值
   - 识别目标用户群体
   - 梳理核心用户流程

2. **阅读项目结构**
   - 了解页面结构（`app/` 目录）
   - 了解组件结构（`components/` 目录）

3. **输出理解摘要**
   ```
   产品目标：[一句话概述]
   目标用户：[用户画像]
   核心流程：[流程1] → [流程2] → [流程3]
   ```

### Step 2: 定义走查范围

根据产品结构，确定走查的页面和流程：

| 流程 | 涉及页面 | 优先级 |
|------|----------|--------|
| 新用户引导 | 首页 → 评测 → 结果 | P0 |
| 日常学习 | 仪表板 → 课程 → 完成 | P0 |
| 进度查看 | 仪表板 | P1 |

### Step 3: 执行走查

按以下维度检查每个页面/流程：

#### 3.1 页面加载体验
- [ ] 加载状态是否清晰？
- [ ] 加载失败是否有友好提示？
- [ ] 加载时间是否在合理范围？

#### 3.2 视觉一致性
- [ ] 颜色使用是否一致？
- [ ] 字体大小层级是否清晰？
- [ ] 间距和对齐是否统一？
- [ ] 图标风格是否一致？

#### 3.3 交互体验
- [ ] 按钮状态（hover/active/disabled）是否清晰？
- [ ] 表单输入是否有适当反馈？
- [ ] 点击区域是否足够大？
- [ ] 操作结果是否有反馈？

#### 3.4 流程连贯性
- [ ] 流程中断时是否有挽回机制？
- [ ] 步骤之间的衔接是否自然？
- [ ] 用户是否知道当前在哪里、接下来做什么？
- [ ] 是否有不必要的步骤可以省略？

#### 3.5 错误处理
- [ ] 错误信息是否清晰易懂？
- [ ] 错误发生后是否有恢复路径？
- [ ] 网络错误是否有重试机制？
- [ ] 是否有防止用户犯错的设计？

#### 3.6 边界情况
- [ ] 空状态是否有引导？
- [ ] 数据过多时是否有分页/加载更多？
- [ ] 极端数据（很长的文字等）显示是否正常？
- [ ] 首次使用和重复使用体验是否都顺畅？

### Step 4: 汇总问题

按以下格式整理发现的问题：

```markdown
## UX 走查报告

### 📊 概览
- 走查范围：[范围描述]
- 发现问题：共 X 个（P0: X / P1: X / P2: X）
- 走查日期：[日期]

### 🔴 P0 严重问题（必须修复）
影响用户完成核心任务的问题

#### 问题 1: [问题标题]
- **位置**: [页面/组件]
- **现象**: [问题描述]
- **影响**: [对用户的影响]
- **建议**: [修复建议]
- **截图/代码**: [如有]

### 🟠 P1 重要问题（应该修复）
影响用户体验但不阻塞任务的问题

#### 问题 X: [问题标题]
...

### 🟡 P2 建议优化（可以改进）
体验优化建议

#### 建议 X: [建议标题]
...

### ✅ 做得好的地方
- [好的设计1]
- [好的设计2]

### 📝 后续建议
- [建议1]
- [建议2]
```

### Step 5: 验证修复

如果用户修复了问题，可以帮助验证：

1. 检查修复是否解决了原问题
2. 检查修复是否引入了新问题
3. 更新问题状态

---

## 本项目走查指南

### 核心用户流程

根据 PRD，本产品的核心流程是：

```
首页 → 评测 → 结果/仪表板 → 课程学习 → 完成
```

### 需要重点关注的体验点

1. **评测流程**
   - 题目加载是否顺畅？
   - 答题交互是否清晰？
   - 提交后是否有明确反馈？
   - 结果展示是否有价值？

2. **课程学习流程**
   - 课程生成等待体验？
   - 词汇/句型练习交互？
   - 进度感知是否清晰？
   - 完成后的成就感？

3. **数据持久化**
   - 用户档案是否正确保存？
   - 刷新后数据是否还在？
   - 跨页面数据是否一致？

4. **错误恢复**
   - API 失败时的处理？
   - 用户数据丢失时的处理？
   - 网络断开时的体验？

---

## 能力边界

### ✅ 此 Skill 擅长

- 基于代码阅读识别潜在的 UX 问题
- 系统性的体验检查清单
- 结构化的问题报告
- 提供修复建议

### ⚠️ 限制

- 无法实际操作页面（需要浏览器工具配合）
- 无法测试真实的加载性能
- 无法测试真实的移动端体验

### ❌ 不支持

- 视觉设计评审（颜色搭配、美感等主观判断）
- 用户研究（需要真实用户参与）
- A/B 测试分析

---

## Skill 协作

### 配合使用

- **浏览器工具**（如有）：实际访问页面进行验证
- **AGENTS.md**：参考开发规范确保修复质量

### 工作流示例

```
用户请求走查 → [ux-walkthrough-skill] 分析代码
             → 生成问题报告
             → 用户修复
             → [ux-walkthrough-skill] 验证修复
```

---

## 测试用例

### 测试场景1: 完整走查

**触发条件**: "帮我做一次完整的 UX 走查"

**预期输出**: 
- 阅读 PRD 并输出理解摘要
- 按流程逐步检查
- 生成结构化问题报告

**验证点**:
- [ ] 报告包含问题分级
- [ ] 每个问题有位置、描述、建议
- [ ] 包含正面反馈

### 测试场景2: 指定范围走查

**触发条件**: "走查评测页面"

**预期输出**: 仅针对评测页面的问题报告

**验证点**:
- [ ] 只检查相关页面
- [ ] 问题聚焦

---

## 元信息

**版本**: v1.0
**作者**: AI Agent
**创建日期**: 2026-01-28
**最后更新**: 2026-01-28
**依赖**: 
- docs/PRD.md（产品需求文档）
- AGENTS.md（开发规范）

**更新日志**:
- v1.0 (2026-01-28): 初始版本