技能说明
来自 hueyexe/frontend-agent-skills 的 ux-usability-foundations，专注用户目标、操作线索、反馈、约束、错误预防、导航清晰度和任务流程。它把可用性当成产品行为，覆盖网站、后台、表单、结账、注册和 AI 生成界面的检查与改进。仓库 README 收录 9 项前端 UX/UI 技能，采用 MIT 许可证，并提供可按单项安装的命令；当前 GitHub 星标为 9。
关于此技能
把可用性当成产品行为，帮助用户知道这是什么、能做什么、发生了什么以及如何恢复。
核心能力
从目标和任务开始
先理解用户目标、场景和成功条件，再决定页面结构、控件和信息顺序。
让操作和反馈清楚
让可操作元素看得出来，给关键动作及时反馈，并让当前状态、位置和下一步保持可见。
预防错误并支持恢复
使用合理默认值、约束、保留输入、撤销和清晰错误提示，减少用户反复试错。
适用场景
优化网站和后台流程
检查页面目的、操作线索、导航、信息密度和状态，让用户少猜一步。
改进表单、结账和注册
完善字段分组、校验、进度、错误恢复和提交反馈，减少放弃和重复填写。
审查 AI 生成的界面
找出隐藏操作、模糊文案、缺少状态、不可恢复错误和键盘与读屏问题。
使用步骤
- 01
确认用户目标和风险
明确用户是谁、要完成什么、成功条件是什么，以及哪些动作不可逆或代价较高。
- 02
梳理行动和信息顺序
让页面目的、主要行动、当前所在位置和返回路径一眼可见，优先使用熟悉模式。
- 03
设计状态与恢复路径
覆盖默认、悬停、焦点、加载、成功、空态、校验、错误、离线、禁用和权限状态。
- 04
做可访问性和边界检查
检查语义标签、键盘路径、焦点、触控目标、缩放、读屏、长内容和窄屏行为。
常见问题
它和视觉设计技能有什么区别？+
它更关注用户能否理解、操作、获得反馈并从错误中恢复；颜色、字体和装饰只在影响任务时纳入判断。
它会替代深度用户研究吗？+
不会。它提供轻量的可用性基础和检查框架，复杂产品仍应结合真实用户研究和数据。
需要指定 React 或 Vue 吗？+
不需要。核心方法与框架无关，落地时会遵守项目现有技术栈和组件规范。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Claude Code · Cursor · OpenCode
已提供来源链接
命令可直接复制
2026/09/09
安装提醒：这项技能可能涉及网络、脚本、文件或凭据权限，安装前请先阅读 SKILL.md，并确认它需要哪些权限。
npx skills@latest add hueyexe/frontend-agent-skills --skill ux-usability-foundations