ui-visual-validator

ui-visual-validator - UI视觉验证专家

技能概述

ui-visual-validator 是一位严谨的UI视觉验证专家，专注于通过系统化的视觉分析方法，验证UI修改是否达到预期目标、设计系统是否合规，以及可访问性标准是否得到正确实现。它精通多种现代视觉测试工具，能够进行像素级的截图对比和跨平台一致性验证。

适用场景

1. UI改动后的效果验证

当你修改了界面代码，需要确认改动是否真正达到了预期效果时，这个技能可以帮你进行严格的视觉分析。它不会根据代码变化推测结果，而是要求提供实际的视觉证据（截图、录屏等），通过客观的视觉对比来判断目标是否达成。无论是调整了组件位置、改变了尺寸，还是修改了颜色和样式，都能得到准确的验证结论。

2. 设计系统合规性验收

在实现设计系统或组件库时，需要验证开发实现是否符合设计规范。这个技能能够检查设计token的使用是否准确、组件样式是否一致、品牌规范是否得到遵守。它会从像素级精度验证typography、间距、颜色等设计元素的实现质量，确保你的设计系统落地时没有走样。

3. 可访问性和多端一致性验证

需要确认UI是否满足WCAG可访问性标准，以及在不同浏览器、设备、主题下是否保持一致时，这个技能可以提供全面的评估。它能检测颜色对比度、焦点指示器、文本缩放等可访问性要素，同时验证响应式断点、暗色模式、多浏览器等场景下的视觉一致性。

核心功能

1. 系统化视觉分析流程

这个技能采用严格的"零假设"分析方法——默认改动目标未达成，直到有明确的视觉证据证明成功。分析流程包括客观描述视觉内容、逐一对比验证目标、反向寻找失败证据、质疑"不同"是否等于"正确"。对于旋转、位置、尺寸等变化，会要求提供具体的视觉测量数据，确保验证结论有据可依。

2. 现代视觉测试工具指导

精通Chromatic、Percy、Applitools、BackstopJS、Playwright、Cypress等主流视觉测试工具，能够帮你选择合适的工具并配置使用。从组件级隔离测试到端到端视觉验证，从CI/CD集成到PR工作流自动化，都能提供专业指导。特别擅长处理视觉测试中的常见问题，如误报优化、动态内容处理、跨环境稳定性等。

3. 可访问性视觉合规评估

将可访问性标准融入每一次视觉评估中，不仅关注"看起来对不对"，更关注"能不能用"。能够验证颜色对比度是否符合WCAG标准、焦点指示器是否清晰可见、文本缩放是否保持可读性、键盘导航的视觉反馈是否完善等。这确保你的UI在视觉层面就考虑了包容性设计，而不仅仅是代码层面的语义标记。

常见问题

ui-visual-validator 和普通的人工测试有什么区别？

这个技能的核心特点是"证据驱动"的严谨方法论。它不会接受"看起来没问题"的主观判断，而是要求提供可测量的视觉证据。比如验证元素旋转时，会要求确认宽高比是否真的改变；验证位置移动时，会要求提供坐标差异。这种严格性能够捕捉到容易被忽略的细节问题，特别适合需要高质量UI的场景。

视觉测试误报太多怎么办？

这是视觉测试的常见痛点。这个技能会帮你分析误报的根本原因——是动态内容（时间戳、动画）、跨平台渲染差异，还是环境配置问题。然后提供针对性的解决方案，比如使用忽略区域、等待稳定状态、标准化测试环境、调整相似度阈值等。目标是让视觉测试既敏感又可靠，减少噪音信号。

我应该选择哪个视觉测试工具？

这取决于你的技术栈和需求。如果使用Storybook，Chromatic是很好的选择；如果需要跨浏览器验证，Percy或Playwright更合适；如果追求AI智能匹配，Applitools的Visual AI值得考虑。这个技能会根据你的具体场景（组件库vs全页测试、团队规模、CI/CD环境、预算）推荐最合适的工具组合，并提供配置和集成的最佳实践。

这个技能能帮我验证暗色模式吗？

可以。暗色模式验证是这个技能的强项之一，它会检查颜色映射是否正确、视觉层次是否保持、对比度是否达标、图标和图片在两种主题下是否都清晰可见。如果需要，还可以验证主题切换时的过渡动画是否流畅，以及用户偏好设置（ prefers-color-scheme ）是否得到正确响应。