Impeccable 新手教程

第五章 · 审查与体检

三道关卡:critique 管「好不好用、打不打动人」,audit 管「技术是否合格」,detect 管确定性硬指标——相互独立,各查各的。

1三件套分工

先分清谁管什么,再决定什么时候叫谁。

命令性质查什么典型时机
/impeccable critiqueAI 主观评审信息层次、清晰度、情感共鸣版本成型后、上线前
/impeccable auditAI + 引擎协作无障碍、性能、响应式等技术质量功能冻结前
/impeccable polishAI 收尾动作对齐设计系统、发布就绪度合码前的最后一遍
npx impeccable detect纯确定性61 条硬规则(字体 / 渐变 / 触摸目标 / 行宽…)随手、CI、不看 AI 的场合

2critique:一场结构化的设计评审

在 Cursor CLI 里指向某个页面即可;报告会落盘,团队其他人也能看。

你:/impeccable critique src/pages/quickstart/

Agent:评完。三个发现(按影响排序):
       1) 首屏价值主张弱——「快速记账」没有具体到
          「三分钟记完今天的账」,情感共鸣缺一口。
       2) 三步流程的视觉重量相同,用户视线没有落点,
          建议给第二步「拍照识别票据」加视觉强调。
       3) 尾屏安心话术字号过小(13px),信任信息
          不该是页面里最小的字。
       完整报告已写入 .impeccable/critique/quickstart.md。
       要我按 1→3 依次修吗?

critique 的价值在于有共同语言:层次、清晰度、共鸣三个维度是命令词汇的一部分,团队里谁跑一遍,结论都长一个样,还能进 git 被追溯。

3audit 与 polish:技术体检 + 发布收尾

audit 盯硬伤,polish 盯一致性。两者常常背靠背出现在上线前。

你:/impeccable audit checkout

Agent:技术体检结果:
       · a11y:优惠券输入框无 label 关联(WCAG 失败)
       · 响应式:380px 以下支付按钮被截断
       · 性能:首页 Hero 图未做懒加载,LCP 预估超标
       以上为 AI 评审 + 引擎规则交叉确认。要我修吗?

你:修。然后跑一遍 polish。

Agent:三处已修。polish 完成:
       · 8 个组件的间距对齐 DESIGN.md 字阶与间隔体系
       · 2 处游离色彩并入主色板
       · 生成发布就绪清单(见 .impeccable/critique/)
       建议:npx impeccable detect src/ 做最终确认。

4detect CLI:不接 AI 的确定性体检

它和设计 hook 用的是同一个检测器引擎,可以扫目录、扫文件、甚至扫线上 URL。

# 扫目录 / 单文件
npx impeccable detect src/
npx impeccable detect index.html

# 扫线上页面(本机需有 Chrome / Chromium / Edge)
npx impeccable detect https://example.com

# CI 友好:JSON 走 stdout,人读结果走 stderr
npx impeccable detect --json src/ 2> findings.txt

# 忽略项目配置的「原始扫描」(排查配置问题用)
npx impeccable detect --no-config src/

退出码是给机器看的:0 无主要发现;2 有主要发现;1 至少一个目标没扫成(多目标时运维失败优先)。CI 里 if npx impeccable detect src/; then … 就能当质量门禁。

61 条都抓什么

两类:AI 套路类(侧边栏边框、紫色渐变、弹跳缓动、暗光晕、滥用字体…)与通用质量类(行宽、拥挤内边距、过小触摸目标…)。规则在持续更新,以 ENGINE_VERSION 固定。

5误报怎么办:忽略机制

品牌真用了 Inter、文案真的需要小字——有三种正规豁免姿势,别硬扛也别裸奔改规则。

# 1) 看当前忽略了什么
npx impeccable ignores list

# 2) 按文件模式忽略(遗留目录整体豁免)
npx impeccable ignores add-file "src/legacy/**"

# 3) 按规则 + 值忽略,写明理由(理由会留在配置里)
npx impeccable ignores add-value overused-font Inter --reason "Brand font"

还有行内豁免——在源码里就地标注,只对这一处生效:

<!-- impeccable-disable overused-font: exported brand doc -->

想强制查看「未经豁免」的真实状态?加 --no-inline-ignores 绕过行内豁免、--no-config 绕过项目配置。反过来提醒一句官方原话:「A clean detector run is evidence, not proof」——全绿之后,仍然要人眼在不同视口看渲染效果。

下一步

命令背熟了?第六章把 23 个命令整理成一张速查表,当工具书用。

Impeccable 新手教程