audit

audit 技能概览

audit 能做什么

audit 技能会针对某个页面、功能或组件执行结构化的技术型 UI 审查，返回的是一份带评分的报告，而不是零散的观察意见。它重点检查可衡量的实现质量，包括 accessibility、performance、theming、responsive behavior，以及前端 anti-patterns，并按 P0 到 P3 的严重级别对问题排序，同时给出行动计划。

谁适合安装 audit 技能

如果你的团队希望建立一套可重复执行的 UX Audit 工作流，而不想每次都手动设计评估标准，那么这个 audit 技能非常适合前端团队、design engineer、UX engineer 和产品构建者。尤其是在你需要的是“理解代码实现的审查”，而不是主观设计点评时，它会更有价值。

它真正解决的是什么问题

大多数用户真正需要的并不只是“给点反馈”。他们通常想回答的是：这个页面能不能上线？最先坏掉的是什么？哪些问题属于 accessibility 阻塞，哪些只是清理项？下一步应该让另一个 agent 或工程师先修什么？audit 就是为这种分诊式判断而设计的。

为什么它不同于普通提示词

普通 prompt 往往只能给出比较宽泛的建议。audit 更适合做决策，原因在于它：

• 强制执行跨多个维度的诊断扫描
• 在五个维度上使用明确评分
• 将“发现问题”和“修复问题”拆开
• 输出带 P0-P3 严重级别的优先级排序
• 强调基于实现证据，而不是基于审美偏好的评论

采用前必须知道的重要依赖

这个技能最大的采用门槛是上下文：它要求你先完成设计上下文收集。它自己的说明里就写明了要先调用 /frontend-design；如果当前还没有设计上下文，则要先运行 /teach-impeccable 再做 audit。跳过这一步，输出质量和一致性都会明显下降。

如何使用 audit 技能

audit 的安装方式

仓库里的 SKILL.md 没有提供单独的安装命令，因此请使用你平时安装 GitHub 托管 Claude skills 的流程。例如：

npx skills add https://github.com/pbakaus/impeccable --skill audit

安装后，确认技能可用名称为 audit，并注意它被标记为 user-invocable: true，也就是说你可以直接调用。

先读这个文件

从 .claude/skills/audit/SKILL.md 开始读。在这个仓库里，几乎所有真正可用的逻辑都写在这个文件中：前置条件、适用范围、评估维度、评分模型，以及输出要求。这里没有额外的 rules/、resources/ 或辅助脚本可依赖，所以能否用好这个技能，很大程度取决于你是否认真读懂了这个 skill 文件。

先理解 audit 的前置工作流

在使用 audit 技能之前，请按以下顺序执行：

1. 先通过 /frontend-design 收集设计和产品上下文。
2. 如果这些上下文还不存在，先运行 /teach-impeccable。
3. 之后再对目标页面、功能或组件运行 audit。

这一步很关键。虽然 audit 是技术审查，但它仍然需要上下文，才能更准确地判断 anti-patterns、主题一致性和实现质量。

输入给 audit 的内容要怎么写

这个技能暴露的参数提示是：

[area (feature, page, component...)]

比较好的输入应该是明确的审查目标，例如：

• checkout page
• mobile navigation drawer
• pricing cards component
• settings form validation flow

像 the app 或 the UI 这种过于宽泛的输入，通常只会得到比较浅的输出，因为 audit 的范围会变得太大。

audit 技能会检查什么

audit 工作流会扫描五个维度：

• accessibility
• performance
• theming
• responsive design
• anti-patterns

随后它会对每个维度按 0-4 打分，并汇总成报告。如果你是为了做 UX Audit 而使用 audit，这种结构特别有帮助，因为它能把宽泛的 UX 质量问题，转化成有实现依据的结论。

audit 技能不做什么

audit 用于诊断，不用于修复。它的设计目标很明确：记录和归纳问题，而不是直接修正问题。如果你需要的是一套可重复执行的质量审查流程，可以安装它；但如果你期待它在同一步里自动改代码、做重构或给出视觉重设计方案，那它并不适合。

把模糊请求改成高质量的 audit 提示

一个较弱的 prompt：

• Run audit on my homepage

一个更强的 prompt：

• Run audit on the homepage hero and signup flow. Focus on keyboard access, semantic structure, responsive layout between 320px and 1440px, theme token consistency, and obvious performance risks. Return scores by dimension plus P0-P3 findings and a fix order.

为什么后者更好：

• 明确了范围
• 指出了用户旅程
• 点明了高风险区域
• 要求使用该技能原生的输出格式

audit 的最佳使用流程

一个实用的 audit 使用流程如下：

1. 只选一个页面或组件
2. 先提供产品和设计上下文
3. 运行 audit
4. 查看评分和严重级别
5. 将 P0/P1 问题转成实现任务
6. 修复后重新运行 audit

这样用，audit 技能就能成为 QA、上线评审或 design system 清理过程中的一个有效关卡。

什么样的 audit 输出才算好

一份有用的 audit 结果通常应该包含：

• 各维度评分
• 具体的实现层问题
• 从 P0 到 P3 的严重级别排序
• 可执行的下一步建议
• 与代码或 UI 行为相关联的证据

如果输出大多只是泛泛而谈的最佳实践，几乎没有优先级排序，问题通常不在技能本身，而是在于上下文太弱或范围太大。

评估是否安装 audit 时，建议这样读仓库

如果你正在判断这个 audit 技能值不值得安装，最快的阅读路径是：

1. 先看 SKILL.md 顶部 frontmatter，了解调用方式和用途
2. 再读 MANDATORY PREPARATION
3. 然后看 Diagnostic Scan
4. 接着看每个评分部分
5. 最后看最终报告结构

按这条路径读，你能很快判断它是否比通用 audit prompt 更适合你的工作流。

提升 audit 质量的实用技巧

• 一次只 audit 一个区域
• 明确指出关键设备区间或布局状态
• 说明 UI 是否使用 design system 或 theme tokens
• 指定关键流程，例如 sign-in、checkout 或 forms
• 要求只输出有证据支撑的问题
• 如果你只想先做分诊，就明确不要修复建议；如果需要，再单独加后续 remediation 步骤

audit 技能 FAQ

audit 适合用于 UX Audit 吗？

适合，前提是你的 UX Audit 需要实现层证据。audit for UX Audit 在以下场景最强：你关注 accessibility 缺口、responsive 断裂、theme 不一致，以及会影响用户体验的前端质量问题。相对来说，它不擅长品牌策略、信息架构或定性可用性研究。

它和直接让 AI 审查页面有什么不同？

通用页面审查很容易把审美判断、产品建议和对代码的猜测混在一起。audit 技能更聚焦，也更稳定，因为它基于明确维度、评分和严重级别来做技术质量审查。这种结构也让结果更容易直接交接给工程团队。

这个 audit 技能对新手友好吗？

中等友好。工作流本身并不复杂，但前置的上下文步骤很容易被忽略。新手也能用，不过如果你对一些基础前端概念更熟悉，比如 WCAG 问题、semantic HTML、responsive behavior 和 design tokens，那么结果通常会更好。

哪些情况下不该用 audit？

如果你需要的是以下内容，就不应该使用 audit：

• 用户研究归纳
• 视觉品牌点评
• 转化文案评审
• 在同一步里直接修复代码
• 没有明确目标的整站级审查

这些场景下，通常应该换另一个技能，或者用更聚焦的 prompt。

audit 一定需要访问代码吗？

如果 agent 能检查实现代码，效果会最好，因为这个技能本质上是按代码层审查来设计的。它也可以基于已渲染的 UI 描述进行推理，但输出的置信度和具体程度都会更低。

只靠 audit 就够做上线签核吗？

通常不够。它是很强的一层技术审查，但不能替代 runtime testing、浏览器/设备检查、analytics review 或人工 QA。更合适的定位是：把它当成结构化 audit 环节，而不是唯一的质量门。

如何改进 audit 技能的使用效果

缩小 audit 范围，结果会更好

最常见的失败模式就是范围过大。要求对整个产品做一次 audit，往往会导致优先级被摊平、证据质量下降。更好的做法是：一次只审一个流程、一个页面，或一组组件。

在运行 audit 前先补齐上下文

因为这个技能依赖 /frontend-design，有时还依赖 /teach-impeccable，所以最容易提升结果质量的方法，就是把这部分依赖完整补齐。建议提前提供：

• 目标用户
• 页面上的核心任务
• 预期的 responsive 断点
• design system 规则
• 已知限制或有意为之的 tradeoff

让 audit 输出证据，而不是观点

如果第一次输出显得太泛，可以在下一次 prompt 里进一步收紧要求：

• Cite the element or pattern causing each issue
• Separate verified implementation issues from inferred risks
• Do not include subjective visual preferences

这样能让 audit 更扎根于证据，也更值得信任。

让严重级别排序更有用

并不是所有问题都值得同等优先级。要让 P0-P3 真正发挥作用，你需要告诉技能：在你的业务场景里，什么才算严重。例如：

• 法务或 WCAG 风险暴露
• 阻碍任务完成的问题
• 只在 mobile 上出现的断裂
• 共享组件中的回归
• 影响 checkout 或 auth 流程的问题

使用两轮 audit 工作流

一个高质量的使用模式是：

1. 第一轮：做宽范围的诊断扫描
2. 第二轮：针对评分最低的维度深入复审

例如，如果 accessibility 得分最差，就重新运行 audit，但只聚焦 keyboard flow、semantics、forms 和 contrast。相比做一次大而全的扫描，这通常更利于制定可执行的修复计划。

把 audit 和后续修复步骤串起来

由于 audit 本身不会修问题，想要真正提升效果，通常需要把多个工作流串联起来：

• 运行 audit
• 提取 P0/P1 问题
• 把每个问题分配给修复 prompt、工程师或代码编辑 agent
• 改完后重新运行 audit

这样一来，audit 技能就不只是一个报告工具，而是能形成闭环的质量流程。

强化 responsive 和 theming 检查的输入

如果你很在意 responsive 或 theming 质量，就要在请求里明确写出来。比较好的补充方式包括：

• Check behavior at 320px, 768px, and 1440px
• Check dark mode and token consistency
• Flag hard-coded colors, spacing drift, and component state inconsistencies

没有这些具体约束时，audit 可能会提到这些方面，但不会查得足够深。

为交接场景校准 audit 输出格式

如果这份报告最终是给工程师接手处理，建议明确要求输出包含：

• issue title
• severity
• affected area
• why it matters
• suggested fix direction
• validation method after fix

这种格式更容易被采纳，因为 audit 输出会更像可直接进入 backlog 的条目，而不只是信息性报告。

常见迹象：第一次 audit 结果偏弱

如果你看到以下情况，建议重新运行 audit：

• 只有高层建议，没有具体例子
• 没有按维度评分
• 没有 P0-P3 优先级
• 问题看起来像设计评论，而不是技术审查
• 没有提到你提供的目标区域

这些通常说明 prompt 或上下文有问题，不代表这个技能本身不好。

第一次报告出来后，最佳迭代方式是什么

做完第一次 audit 后，不要只是追问 anything else?。更好的做法是从下面这些方向里选一个继续：

• Expand only the P0 and P1 issues
• Re-audit the form flow for accessibility only
• Convert findings into an engineering checklist
• Challenge the performance score with stronger evidence
• Rerun audit after fixes and compare score changes

这种迭代方式，通常比重复同样的宽泛请求，更能把 audit 技能的价值挖出来。