UX Walkthrough Skill

UX Walkthrough Skill

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

核心能力

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

适用场景

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

使用方法

基础用法

"帮我做一次 UX 走查"
"检查一下这个产品的体验问题"

指定范围

"走查评测到课程的完整流程"
"检查仪表板页面的体验问题"

指定重点

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

实现流程

Step 1: 理解产品

1. 阅读 PRD（docs/PRD.md）

   • 理解产品目标和核心价值
   • 识别目标用户群体
   • 梳理核心用户流程

2. 阅读项目结构

   • 了解页面结构（app/ 目录）
   • 了解组件结构（components/ 目录）

3. 输出理解摘要

   产品目标：[一句话概述]
   目标用户：[用户画像]
   核心流程：[流程1] → [流程2] → [流程3]
   

Step 2: 定义走查范围

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

Step 3: 执行走查

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

3.1 页面加载体验

• 加载状态是否清晰？
• 加载失败是否有友好提示？
• 加载时间是否在合理范围？

3.2 视觉一致性

• 颜色使用是否一致？
• 字体大小层级是否清晰？
• 间距和对齐是否统一？
• 图标风格是否一致？

3.3 交互体验

• 按钮状态（hover/active/disabled）是否清晰？
• 表单输入是否有适当反馈？
• 点击区域是否足够大？
• 操作结果是否有反馈？

3.4 流程连贯性

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

3.5 错误处理

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

3.6 边界情况

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

Step 4: 汇总问题

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

## 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): 初始版本