“页面功能都能点，但大家还是会问发布的是哪个项目。请检查桌面和手机，不要整页重设计。”
界面状态审查系统 / 表达与质量
ui-state-auditor
用用户心智模型和真实几何数据，定位会造成犹豫、误解或误操作的界面问题。
适合谁
产品已经可用，但状态混乱与响应式细节正在消耗用户信任的团队
这个 Skill 怎样工作
一句“看着不对”，要落成能定位、能排序的修复项。
关键区别
不泛泛评价高级感；每个结论都必须说明对象、证据、影响和修法。
前面的原理先放到这里
让我们上手试试。
下面只用一个任务，看用户怎样提出要求、Agent 怎样判断，以及最后到底交付了什么。
演示案例 / Northstar / Release dashboard
找出并修复发布页中，三个会让用户认错对象的问题。
任务背景
Northstar 是一个多项目发布后台。功能可以正常使用，但当前对象、发布按钮和手机布局都在传递错误信号。
收到什么
发布后台的桌面与手机页面，以及 current、hover、focus 状态
具体做什么
确认当前对象和按钮归属，测量错位，逐项验证修复前后
交付什么
3 项分级问题、桌面与手机证据、可验证修复版
我会先写出当前对象和操作归属，再核对 current、hover、focus 与按钮状态，并用几何数据检查对齐和溢出。只报告有证据的问题。
- 当前项目
- Northstar Web
- 主要操作
- 发布 4 项变更
- 检查视口
- 1440 + 390
Before / After
差别不靠形容词，直接看交付怎么变。
- 当前对象
- BeforeOverview 和 Activity 同时高亮
- AfterNorthstar Web 是唯一 current
- 主要操作
- Before只写“发布变更”
- After写明项目和 4 项变更
- 手机布局
- Before按钮压住版本信息
- After对象信息与操作分行
实际产成品 / 可操作预览
三个问题都能在同一张修复版页面上验证。
预览内容
切换 Before 和 After，可以直接观察 current、操作归属和手机操作栏的变化；旁边的审查单保留严重度、证据和修法。
CASE OUTPUTui-state-auditor
RELEASE / WEB
v2.4.0Northstar Web
4待发布变更
12检查通过
0阻塞项
HomepageReady
CheckoutReady
AccountReady
同级导航出现两个 current
证据：Overview 和 Activity 使用相同高亮。影响：用户无法判断当前页面。修复：current 只属于 Overview。
发布按钮没有操作对象
证据：按钮只写“发布变更”。影响：用户需要回看标题确认项目。修复：写明 Northstar Web 和 4 项变更。
手机操作栏会遮挡版本信息
证据：390px 视口中按钮和版本占用同一行。修复：对象信息与操作改为两行。
RELEASE / WEB
v2.4.0Northstar Web
4待发布变更
12检查通过
0阻塞项
HomepageReady
CheckoutReady
AccountReady
如何调用
提供页面与实际用户路径
示例任务
检查这个页面在桌面和手机上的 current、hover、focus、文字溢出与浮层位置。
调用方式
查看公开源码 $ui-state-auditor