Skip to main content

Web UI 打磨审计

@ aquarius-wing1112026.7.21webapp-polish-audit

对浏览器渲染的 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 个边界页)

后三个需要环境里有 playwright:PLAYWRIGHT_FROM=<装了 playwright 的 package.json 路径>

改判据后跑这些能立刻发现退化——11.F 的判据就是被这套实测推翻过四次才定下来的(Range 行数拿成子元素数、无障碍隐藏文本误报、行内元素滚动宽度恒等、亚像素噪声)。

成熟度

  • 已实测校准:维度选择逻辑、11.F(内容装不下)、10.E(缩放遮挡)、报告契约与校验脚本。
  • 未实测07 的七类、03 / 13 的判据、1011 其余类的操作卡。这些判据照文档写成,尚未在真实页面上逐条验证——按 11.F 的经验,未经实测的判据往往需要修正。用到这几类时留意结论合理性,发现偏差请反馈。

一起来搞事情

关注我们的社交媒体,加入社群获取最新动态

微信交流群

扫码加入微信群

微信二维码