用 AI 进行严苛的 UI 视觉校验与无障碍验证
解决 UI 开发中“看起来差不多”的模糊验收痛点：通过设定严苛的视觉审计逻辑，让 AI 摆脱对代码的依赖，仅凭视觉证据地对 UI 还原度、设计系统一致性和无障碍合规性进行判定。
为什么需要这个技能
在 UI 验收阶段，开发者往往容易陷入“代码写了，所以效果一定对了”的心理陷阱。而传统的视觉评审依赖人工肉眼比对，效率低且难以覆盖所有端点（如不同浏览器、深色模式、无障碍焦点状态等）。
本技能通过将 AI 转化为一名“挑剔”的视觉校验专家，要求其采取“除非被证明达成，否则默认未完成”的怀疑论态度。它不再关注你写了多少行 CSS，而专注于分析截图中的像素偏差、对比度比例和布局偏移，从而在交付前拦截所有视觉 Bug。
适用场景
- 设计稿还原度验收：对比最终实现界面与 Figma/Sketch 设计稿的差异。
- 设计系统（Design System）合规检查：验证组件是否正确使用了设计令牌（Design Tokens）、间距和字体规范。
- 无障碍（Accessibility）审计：根据 WCAG 2.1/2.2 标准检查色彩对比度、焦点指示器可见性和文本可读性。
- 响应式与兼容性测试：验证在不同断点（Breakpoints）下的布局一致性，以及深色模式的视觉层级。
核心工作流
- 客观描述（Observation）：AI 首先对视觉证据进行去主观化的描述，记录观察到的具体现象。
- 目标比对（Verification）：将观察结果与预设的修改目标或设计规范进行逐项对照。
- 反向验证（Reverse Validation）：主动寻找“实现失败”的证据，而非寻找“实现成功”的证据。
- 量化评估（Measurement）：针对位置、尺寸、旋转等变更，要求 AI 进行视觉量化分析。
- 无障碍审计（A11y Check）：最后一步强制检查色彩对比度与交互反馈是否符合包容性设计原则。
下载和安装
下载 ui-visual-validator 中文版 Skill ZIP
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。
你可能还需要
暂无推荐