Web UI 打磨审计
对浏览器渲染的 Web UI 做只读、证据驱动的打磨审计。判据基于 DOM/几何/样式向量的确定性比较,默认不看截图;破坏性路径不静默跳过,而是报给你拍板。
基础信息
- 名字/名称
- Web UI 打磨审计
- 描述说明
- 对浏览器最终渲染的 Web UI 做只读打磨审计,输出 DOM、可访问性、计算样式、布局几何和交互状态支持的可验证发现。用于用户要求 audit、review、critique、diagnose、产品感检查、完成度检查、真实产品感、good taste、not demo-like、refined,或明确要求先审查可见 UI bug 的场景。Do NOT trigger when 用户要求实现、修复、改代码、产出比对、大范围重新设计、纯后端/API/数据/CLI/基础设施、产品策略、UX 研究、信息架构或纯文案任务;若请求同时包含审查与实现,本 Skill 只执行审查阶段并把实现留给后续工作流。
Webapp 打磨审查
对浏览器最终渲染的 Web UI 做只读审查。不读项目源码、不改任何文件、不实施修复。
判据不看像素。 每条发现都由脚本采到的 DOM 结构、可访问性状态、可见文本、计算样式、布局几何或交互状态支持——要么是确定性数值比较(对比度 4.5、触摸目标 44px、末行/首行 0.6),要么是读文本做语义判断。这让结论可复核:报告给的是「容器 60px 装 99px 内容,被裁 39px」,而不是「看起来有点挤」。
什么时候用
- 审查一个点名的页面、路由或可见 UI bug。
- 从入口 URL 抽取代表性子页面族,检查跨页一致性。
- 检查响应式连续性、输入与感知可达性、表单信心、交互风险保护、动作文案清晰度。
- 用户明确要求「先审查、后修复」时,先完成只读审计。
不要用于实现、改代码、产出代码改动、大范围重新设计、后端/API/数据/CLI/基础设施、产品策略、UX 研究、信息架构或纯文案任务。
五条维度
| 维度 | 主责 |
|---|---|
03 |
动作风险与优先级、破坏性动作的提交保护 |
07 |
表单输入 / 校验 / 提交 / 错误 / 恢复的信心 |
10 |
键盘、触摸、缩放、对比度下关键任务会不会被阻断 |
11 |
视口变化后任务能否继续;内容装不下导致的截断与挤坏 |
13 |
关键 CTA 与高影响动作的文案是否表达真实后果 |
维度不是全选——由 page-inventory-probe.mjs 按页面实际形态触发:有破坏性按钮才选 03,有真表单才选 07(孤立搜索框不算),纯内容页可能一条都不选。每条选中都附具体证据信号。
三种「没查成」,不要混为一谈
这是本 skill 的一个核心设计:
| 类型 | 含义 | 你该做什么 |
|---|---|---|
blocker |
技术上做不到 | 通常无事可做 |
not_applicable |
本页确实没这形态 | 无事可做 |
pending_authorization |
技术上做得到,但需要你点头 | 拍板 |
破坏性动作、真实提交、写数据这些路径,skill 不会静默跳过。它会报上来:发现了什么、打算怎么验、不验的代价(哪一类悬着)、怎么授权。这不是遗漏,是等你确认——校验脚本强制这四项写全,只写「需要授权」而不给出可照做的指令会直接判失败。
交互边界
- 无副作用交互默认允许:打开弹层、切 tab、展开菜单、输入非法值触发前端校验。执行前先拦截
fetch/XHR/sendBeacon/WebSocket/location/beforeunload,拦到任何写请求立即停止并转成待授权项。 - 写数据类不做:提交、删除、发布、变更权限、上传——只报告不执行。
- 破坏性动作模拟需显式授权,且仅限
staging./.test./localhost主机名。
截图
默认不截图。五条维度没有一条判据以像素为依据,所以截图是逃生舱不是工具——这个 skill 历史上的主要失控模式,就是每页每状态例行来一张然后对着图找问题。
确需截图时门槛是:脚本判据已跑过并产出数据、说得出具体缺什么、由主代理执行、目标是确认已有嫌疑。全审计上限 3 张,每张必须留痕说明脚本为什么不够,且截图证据不能独立成立——必须并列同类的脚本证据。这三条都由校验脚本强制。
产物
polish-audit-report.json——发现、逐类覆盖、待授权路径、gaps、blockers 的唯一机读事实源。audit-state.json——阶段状态与脚本调用台账。- 各类的探查 JSON(
{page}__{维度}-{类}__probe.json)。 - 面向用户的摘要:可行动发现、待你确认的路径(单独成节)、gaps/blockers、审计视口、报告路径。
只在 /tmp/webapp-polish-audit/<RUN_ID>/ 下写文件,项目目录零写入。
可靠性机制
- 两条执行路径:全部为脚本直判时走快速通道(主代理自跑,不派子代理);含语义判断时派双判断者并行决胜——两个隔离上下文同时判,分歧则加派第三个,仍分歧记 blocked。
- 判断者不开浏览器:只读落盘 JSON。判不了就记 blocker 交回主代理,不许自己去页面上看——那会绕开采集与验收的全部约束。
- 机械终验:
validate-polish-audit-report.mjs校验 schema、枚举、引用完整性、判断者隔离、截图上限、待授权项完整性。这个脚本是规则的可执行实现,文档与它冲突时以它为准。
自带验证资产
node scripts/select-references.test.mjs # 维度选择:按证据选、不默认全选
node scripts/validate-polish-audit-report.test.mjs # 报告契约 13 个用例
node scripts/fit-check.mjs # 11.F 判据自检(7 用例对照页)
node scripts/fit-check.mjs <url> # 扫真实页面
node scripts/e2e-selection.mjs # 选维度端到端(内置 4 个边界页)node scripts/select-references.test.mjs # 维度选择:按证据选、不默认全选
node scripts/validate-polish-audit-report.test.mjs # 报告契约 13 个用例
node scripts/fit-check.mjs # 11.F 判据自检(7 用例对照页)
node scripts/fit-check.mjs <url> # 扫真实页面
node scripts/e2e-selection.mjs # 选维度端到端(内置 4 个边界页)后三个需要环境里有 playwright:PLAYWRIGHT_FROM=<装了 playwright 的 package.json 路径>。
改判据后跑这些能立刻发现退化——11.F 的判据就是被这套实测推翻过四次才定下来的(Range 行数拿成子元素数、无障碍隐藏文本误报、行内元素滚动宽度恒等、亚像素噪声)。
成熟度
- 已实测校准:维度选择逻辑、
11.F(内容装不下)、10.E(缩放遮挡)、报告契约与校验脚本。 - 未实测:
07的七类、03/13的判据、10与11其余类的操作卡。这些判据照文档写成,尚未在真实页面上逐条验证——按11.F的经验,未经实测的判据往往需要修正。用到这几类时留意结论合理性,发现偏差请反馈。
版本信息
本地 Skill catalog 公开快照,仅展示公开安全字段。
Skill 文件
(27)SKILL.md
SKILL.md · Markdown