SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场ui-audit

ui-audit

前端与建站

查看项目

更新于 10-15 14:15

技能介绍

用途

UI Audit 是一个针对已构建前端的审查技能，面向正在开 PR 的开发者，回答“这些改动里哪些会在生产环境伤害用户，哪些只是锦上添花”。它同时推理代码行为（React/Next 源码）与渲染质量（无障碍、布局、性能、字体、动效），在功能层面（结账、引导、仪表盘等）进行审计。

它是什么：一个 diff 感知的审查器，能检测每个改动文件实现的功能，针对该功能运行行为、渲染质量与 UX 定律规则，输出带 file:line 证据和修复建议的三级发布结论。

它不是什么：不负责“应该存在什么”的产品决策（正确的交互、动作命名、可达状态 → product-design），不做智能体应用审查（工具对等、信任线索、审批门 → ax-audit），不做深度排版或动效专项（→ typography-audit 或 ui-animation），也不重新实现 Lighthouse/axe/Chromatic。

主要能力

  • 功能识别：通过语义、文件名和路由匹配功能，例如带 email + password 的 <form> 是登录，role="dialog" 是弹窗，/checkout 是结账。
  • 分层规则：四层规则按需加载——功能 playbook（12 个）、现代失败模式（行为，28 条）、渲染质量（表面，33 条）、UX 定律（21 条，其中 19 条程序化、2 条评分表）。
  • 发布结论：每个发现分配 release-blocker | fix-this-sprint | backlog，表面上下文可调整默认层级（登录/结账上调，营销/内部管理下调）。
  • 输出适配器：终端表格、PR 评论、CI JSON 三种格式从同一 JSON 文档渲染。
  • 抑制机制：通过内联注释按规则 slug 抑制发现，被抑制的发现仍出现在 summary.suppressed 中。

使用方式

审计工作流（可复制跟踪的清单）：

  1. 确定范围（通过 git diff --name-only main 获取 PR diff，或显式指定文件/文件夹）
  2. 检测范围内的功能（登录 / 结账 / 表单 / 弹窗 / 列表 / 仪表盘 / ...）
  3. 对每个功能，按顺序运行 references/feature-playbooks.md 中的 playbook
  4. 对每项检查，加载指定的规则文件（rules-modern/、rules-surface/ 或 rules/）并运行其检测
  5. 按 references/ship-readiness.md 为每个发现分配发布层级（表面可调整层级）
  6. 构建 JSON 文档，然后用选定的输出适配器渲染
  7. 运行审计自检；若失败则报告 INCOMPLETE

默认范围是 diff 感知：

git diff --name-only main -- '*.tsx' '*.jsx' '*.ts' '*.js' '*.css' '*.module.css'

仅审计这些文件，并在输出中显示基准：Auditing: 8 files changed vs main.

单组件：git diff --name-only HEAD -- src/Component.tsx

全量扫描：仅在显式请求时（--full src/），例如向代码库引入该技能时。默认全量扫描会把 3 个重要发现埋在 60 个不重要的发现之下。

发布结论计算：✅ READY（0 阻断，≤3 本迭代）· ⚠️ READY WITH FOLLOW-UP（0 阻断，≥4 本迭代）· ❌ NOT READY（≥1 阻断）· 🚫 INCOMPLETE（自检失败）。

适用场景

  • 有 PR 打开、需要判断改动是否可发布的开发者
  • 需要按功能审查状态覆盖、无障碍、渲染与行为正确性的前端团队
  • 希望在 CI 中设置合并门禁（jq -e '.summary.releaseBlockers == 0'）的流水线
  • 与 product-design 配合：product-design 决定必须存在的状态，ui-audit 验证已构建代码是否实现它们

限制

  • 静态推理，不测量运行时指标，不替代一致性扫描器。它做表面级无障碍与性能检查（alt 文本、标签、对比度线索、图片尺寸、字体加载），但全面测量交给其他工具。
  • 测量 Core Web Vitals（LCP、CLS、INP）→ Lighthouse + web-vitals
  • 完整 WCAG 一致性扫描 → axe-core / eslint-plugin-jsx-a11y
  • 视觉回归 → Chromatic / Percy
  • 包体积预算 → size-limit / bundle-analyzer
  • 通用正确性 bug → CodeRabbit / Vercel Agent / pr-reviewer
  • 不引用 lawsofux.com 原文（CC BY-NC-SA），所有 UX 定律规则均为转述。
  • 无 grep/Read 证据时结果为 unknown，绝不伪造检测；自检会标记 unknown 超过 30% 的审计。

自检标准

若以下任一为真，则自标记审计为 INCOMPLETE：

  • 运行的规则少于计划（rulesRun < rulesPlanned）
  • 超过 30% 的执行规则返回 unknown
  • 任何 fail/warn 发现缺少 file:line 引用
  • 任何 fail/warn 发现缺少修复（机械性修复还需 fixSnippet）
  • 发现之间没有 Read 或 Grep 工具调用（审计是猜测而非运行）
  • 所有发现落在同一层级（疑似一刀切分配）