用途
Reviewing Interface Quality 用于当用户被要求审查、批判、审计或改进一个现有用户界面时，例如“review this UI”“why does this look generic”“make this more polished”。它的核心原则是：每一条发现都必须指明位置、原因和具体的替换值；“间距感觉不对”不算发现，而“.card 使用 padding: 14px，而其他一切使用 8px 刻度——改为 var(--space-s)”才算。
核心法则与证据要求
该技能规定“NO FINDING WITHOUT EVIDENCE YOU ACTUALLY GATHERED”。审查界面意味着要实际查看它；阅读源码并推断渲染效果不算审查，因为这会恰好漏掉审查本应捕获的缺陷类别：溢出、布局塌陷、不可见文字、布局偏移、损坏状态。写任何一条发现之前的最低证据是：1440px 的截图、390px 的截图，以及你即将称为不一致的任何内容的计算值。
主要能力与审查流程
技能包含一个检查清单：收集证据（在两种宽度渲染、捕获 DOM 与计算样式）、第一印象（分析前 5 秒）、系统一致性、排版、布局与响应式、状态与行为、无障碍、动效与性能，最后按严重程度分级撰写报告。
证据收集步骤提供了一段 Playwright 示例代码，用于在 1440×900 下截图、检查水平溢出、统计每种属性的不同值数量（如 font-size、font-family、border-radius、box-shadow、padding、color），然后在 390×844 下再截图并打印控制台错误。若界面确实无法渲染（没有运行时、只是一个片段、孤立组件），必须在报告中明确说明，并将每条视觉发现标记为 PLAUSIBLE 而非 CONFIRMED。
系统一致性
这是产出最高的一步。多数“看起来不精致”的问题都源于此处，且每条发现都是客观的。检查项与阈值包括：不同 font-size 值 > 8（原因：临时选大小，没有比例刻度）；不同 font-family 值 > 3；不同 border-radius 值 > 2（混合圆角是最明显的业余信号）；不同 box-shadow 值 > 3；内边距偏离空间刻度任何值；灰色种类 > 5；强调色表面积 > 10%。还提供 grep 静态检查命令，并提醒检查声明了设计令牌却未使用的情况。
排版
检查项包括：尺寸遵循同一比例而非目测；展示字体不是 Inter / Roboto / system-ui；最多三种字重；正文行宽 60-75ch；行高随字号反向变化（正文约 1.6，展示型约 1.0）；大号展示字体使用负字距；正文不添加 letter-spacing；没有居中段落、没有全大写句子；数字列使用 tabular-nums；标题使用 text-wrap: balance；标题末行没有孤立的单个词。
布局与响应式
检查项包括：任何宽度下都没有水平页面滚动；没有内容无意中触碰视口边缘；相关元素明显比不相关元素更近（内外比 4:1）；章节间距随重要性变化而非全页统一；对齐一致，没有近似误差（如 12px 与 16px 左边缘）；390px 下没有重叠、文字裁切、固定元素遮挡内容；表格和代码块在各自容器内滚动而非页面滚动；图片有 width/height 或 aspect-ratio；使用 100dvh/100svh 而非 100vh；网格至少被有意打破一次——或者设计就是统一的居中列。
状态与行为
检查项包括：空状态（首次使用）、空状态（无结果）、空状态（已清空）彼此不同；加载不使已可见内容变空白；骨架屏匹配真实内容形状并延迟约 200ms；错误说明该做什么并提供相应控件；不向用户暴露原始状态码或堆栈；表单在出错时保留输入；验证在失焦时而非按键时；输入具有正确的 type、inputmode、autocomplete；按钮标签命名其动作且脱离上下文可读；破坏性操作有撤销或具体确认；五种交互状态都存在：rest、hover、active、focus-visible、disabled；筛选/标签/模态状态在 URL 中；触控目标 ≥ 44px，没有仅悬停可用的内容。
无障碍
运行自动化扫描，再进行键盘走查。检查项包括：零 axe 违规，或每条剩余违规都有书面理由；正文对比度 4.5:1、大号文字 3:1，且在明暗两种模式下均满足；焦点处处可见，outline: none 绝不出现且无替代；Tab 顺序匹配视觉顺序；模态框把焦点移入并在关闭时返回；每张图片都有 alt（装饰性为空）；每个纯图标按钮都有可访问名称；一个 <h1>，没有跳级标题；存在 <main>、<nav>、<header> 地标；没有仅靠颜色传达的状态；异步更新有 live region 且先于内容存在。
动效与性能
检查项包括：存在 prefers-reduced-motion 块；只动画 transform/opacity/filter，不动画 width/height/top/left；没有 transition: all；用户触发动效时长 80-450ms；进入缓出、退出缓入且更快；低于 100ms 的操作不显示 spinner；零控制台错误；字体有 font-display: swap 和度量匹配的回退；加载时无布局偏移。
报告格式与严重程度
发现按严重程度排序，每条都包含位置、原因和修复。报告结构为：第一印象（步骤 2 的 5 个答案逐字记录）、证据（渲染宽度、不同值数量、控制台错误数、溢出数）、Critical（对某些用户破坏界面）、Important（明显降低质量）、Minor（打磨）、Strengths（具体而非奉承）、Verdict（Ship / 修复 Critical 后 Ship / 需要返工，附一句理由）。
严重程度定义：Critical 指对某些用户不可用或数据丢失，如键盘陷阱、移除焦点、正文对比度失败、表单出错时清空、移动端水平溢出；Important 指明显降低质量或阻碍真实任务，如系统值不一致、缺失状态、行宽不可读、缺少错误恢复；Minor 指打磨，如孤立词、时长略偏、阴影可更紧凑。技能强调不要填充报告，五条真实发现胜过二十条，因为填充会埋没键盘陷阱这类问题。
常见错误
审查代码而非界面；给出“感觉不对”的发现而不指明原因；只做桌面端；重新设计而非审查；严重程度膨胀；只列违规不给修复；跳过第一印象。