用途
该技能用于审计运行中的 Web 或移动端应用界面,只依据捕获的视觉截图进行判断,不检查源代码、DOM 树、CSS 类或设计令牌配置,以减少“全知偏见”,即因读取组件源码而忽略实际渲染缺陷的问题。它适合发布前视觉 QA、用户流程与复杂界面的可用性审查,以及基于真实视觉输出的 WCAG 2.2 对比度和触控目标合规验证。不适合功能端到端测试、无头断言套件、源码静态分析或后端 API 等非视觉任务。
主要能力
- 双透镜并行评估:UI 透镜检查间距与内边距、颜色与对比度、排版比例、层级与圆角等设计精度;UX 透镜依据 Nielsen 十大可用性启发式和经科学依据的 30 条 UX 定律评估认知负荷与交互流程。
- 严格视觉隔离:评估子代理禁止读取源码或 AST 文件、搜索截图中的文本、查询 DOM 或计算样式、读取设计令牌文件,仅以像素截图和视觉空间定位点描述发现。
- 双引擎截图捕获:Web 端通过 ego-browser 驱动捕获,移动端需预先具备 test-by-maestro 技能,支持 iOS 模拟器和 Android 模拟器/设备;远程服务器场景可自动同步截图到本地工作区。
- 截图门禁校验:在评估前运行校验脚本,检查 PNG 魔数、非零文件大小,并确认每个屏幕都有 default.png。
- 标准化审计报告:输出包含执行仪表盘、屏幕清单、优先级行动矩阵和可机器解析的 finding 规范,发现按严重程度和优先级分类,并提供确定性视觉修复建议。
使用方式
- 启动目标应用(Web 开发服务器或移动应用)。
- 按屏幕和状态将截图存入
audit-artifacts/<YYYY-MM-DD>/<screen-slug>/目录,至少包含default.png,可选状态包括 hover、active、empty-state、error-state、loading、modal-open。 - 运行捕获门禁脚本:
bash skills/audit-ui-ux/scripts/validate-capture-gate.sh audit-artifacts/<YYYY-MM-DD>/。 - 选择执行模式:
both(默认,并行运行 UI 与 UX 透镜)、ui(仅 UI 透镜)、ux(仅 UX 透镜)。 - 等待评估透镜完成,汇总并写入
audit-artifacts/<YYYY-MM-DD>/AUDIT-REPORT.md。
适用场景
- 审查运行中 Web 或移动应用的视觉缺陷、对齐问题和设计令牌不一致。
- 依据认知负荷和可用性启发式评估用户流程、引导旅程和复杂界面。
- 发布前对桌面和移动视口进行视觉 QA。
- 从真实视觉输出验证 WCAG 2.2 对比度和触控目标合规性。
限制
- 不用于功能端到端集成测试、无头断言套件、源码 linting 或 AST 静态分析、后端 API 或非视觉数据层任务。
- 移动端审计需要预先安装 test-by-maestro 技能。
- Web 捕获必须通过 ego-browser,禁止使用无头爬虫或原始 Playwright。
- 评估代理不得读取源码、DOM、计算样式或设计令牌文件。
- 远程服务器截图需通过 scp 同步到本地工作区。