sukilll/great-product-skills/ux-walkthrough

UX Walkthrough Skill

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

核心能力

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

适用场景

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

使用方法

基础用法

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

指定范围

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

指定重点

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

实现流程

Step 1: 理解产品

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

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

1. 阅读项目结构

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

1. 输出理解摘要

`` 产品目标：[一句话概述] 目标用户：[用户画像] 核心流程：[流程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. 评测流程

• 题目加载是否顺畅？
• 答题交互是否清晰？
• 提交后是否有明确反馈？
• 结果展示是否有价值？

1. 课程学习流程

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

1. 数据持久化

• 用户档案是否正确保存？
• 刷新后数据是否还在？
• 跨页面数据是否一致？

1. 错误恢复

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