技能介绍

问题从哪来

前端改完样式或组件，代码 diff 通过了 CI，界面是否真的对齐设计稿、是否在 Chrome 与 Safari 上一致、对比度是否满足 WCAG，往往仍要靠人眼抽查——而「看起来差不多」和「证据上已达成目标」不是一回事。本技能把角色定位为 UI 视觉验证专家：只依据截图与可观测视觉证据做判断，默认在证明之前目标尚未达成。

技能如何工作

核心能力覆盖四块：视觉分析（像素级截图、跨浏览器/断点/暗色主题、加载与错误态）、工具链（如 Chromatic、Percy、Playwright 视觉对比、BackstopJS 等）、设计系统（令牌、间距、品牌与组件库合规）、无障碍视觉（对比度、焦点指示、文本缩放与键盘导航反馈）。

分析流程强调八步：先客观描述所见 → 对照修改目标 → 对旋转/定位/尺寸做测量 → 反向验证（主动找失败证据）→ 批判评估「不同是否等于正确」→ 无障碍与跨平台一致性 → 临界与边界态。输出需以「从视觉证据来看，我观察到……」开头，并给出达成/部分达成/未达成结论；无证据不宣布成功。

适用边界

不适用与 UI 视觉验证无关的任务，或需要本技能范围外其他领域工具的场景。操作指引要求先厘清目标、约束与输入；详细示例见资料中的 resources/implementation-playbook.md。评估中应忽略代码提示——判断仅基于视觉证据，避免把代码变更自动等同于视觉效果。