audit

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

MANDATORY PREPARATION

必备准备步骤

Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.

Run systematic technical quality checks and generate a comprehensive report. Don't fix issues — document them for other commands to address.
This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation.
调用 /impeccable 命令——该命令包含设计原则、反模式及上下文收集协议。在执行后续操作前必须遵循该协议——如果尚未建立设计上下文,必须先运行 /impeccable teach 命令。

开展系统性的技术质量检查并生成全面报告。无需修复问题,只需记录问题以便其他命令处理。
这是代码层面的审计,而非设计评审。检查实现中可衡量、可验证的内容。

Diagnostic Scan

诊断扫描

Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below.
从5个维度开展全面检查。根据以下标准为每个维度评分(0-4分)。

1. Accessibility (A11y)

1. 可访问性(A11y)

Check for:
  • Contrast issues: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
  • Missing ARIA: Interactive elements without proper roles, labels, or states
  • Keyboard navigation: Missing focus indicators, illogical tab order, keyboard traps
  • Semantic HTML: Improper heading hierarchy, missing landmarks, divs instead of buttons
  • Alt text: Missing or poor image descriptions
  • Form issues: Inputs without labels, poor error messaging, missing required indicators
Score 0-4: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA)
检查内容:
  • 对比度问题: 文本对比度比值 < 4.5:1(AAA标准为7:1)
  • 缺失ARIA: 交互元素缺少合适的角色、标签或状态
  • 键盘导航: 缺少焦点指示器、标签顺序不合理、键盘陷阱
  • 语义化HTML: 标题层级不当、缺少地标元素、用div替代button
  • 替代文本: 图片缺少或描述不佳
  • 表单问题: 输入框无标签、错误提示不完善、缺少必填标识
评分标准(0-4分): 0=完全不可访问(未通过WCAG A级标准),1=存在重大缺陷(缺少ARIA标签、无键盘导航),2=部分达标(有一定可访问性优化,但仍有显著缺陷),3=良好(基本符合WCAG AA级标准,仅存在细微不足),4=优秀(完全符合WCAG AA级标准,接近AAA级)

2. Performance

2. 性能

Check for:
  • Layout thrashing: Reading/writing layout properties in loops
  • Expensive animations: Animating layout properties (width, height, top, left) instead of transform/opacity
  • Missing optimization: Images without lazy loading, unoptimized assets, missing will-change
  • Bundle size: Unnecessary imports, unused dependencies
  • Render performance: Unnecessary re-renders, missing memoization
Score 0-4: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized)
检查内容:
  • 布局抖动: 在循环中读取/写入布局属性
  • 高开销动画: 对布局属性(width、height、top、left)执行动画,而非transform/opacity
  • 缺失优化: 图片未启用懒加载、资源未优化、缺少will-change属性
  • 包体积: 不必要的导入、未使用的依赖
  • 渲染性能: 不必要的重渲染、缺少memoization优化
评分标准(0-4分): 0=严重问题(布局抖动、所有资源均未优化),1=重大问题(无懒加载、高开销动画),2=部分优化(有一定优化,但仍存在缺陷),3=良好(大部分已优化,仅需细微改进),4=优秀(快速、精简、优化到位)

3. Theming

3. 主题设计

Check for:
  • Hard-coded colors: Colors not using design tokens
  • Broken dark mode: Missing dark mode variants, poor contrast in dark theme
  • Inconsistent tokens: Using wrong tokens, mixing token types
  • Theme switching issues: Values that don't update on theme change
Score 0-4: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly)
检查内容:
  • 硬编码颜色: 未使用design tokens定义颜色
  • 暗黑模式失效: 缺少暗黑模式变体、暗黑主题下对比度不佳
  • Token使用不一致: 使用错误的token、混合不同类型的token
  • 主题切换问题: 主题切换时未更新对应值
评分标准(0-4分): 0=无主题设计(所有内容均硬编码),1=仅使用少量token(大部分为硬编码),2=部分使用(存在token,但使用不一致),3=良好(主要使用token,仅少量硬编码值),4=优秀(完整的token系统,暗黑模式运行完美)

4. Responsive Design

4. 响应式设计

Check for:
  • Fixed widths: Hard-coded widths that break on mobile
  • Touch targets: Interactive elements < 44x44px
  • Horizontal scroll: Content overflow on narrow viewports
  • Text scaling: Layouts that break when text size increases
  • Missing breakpoints: No mobile/tablet variants
Score 0-4: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
检查内容:
  • 固定宽度: 硬编码宽度导致移动端布局破裂
  • 触摸目标: 交互元素尺寸 < 44x44px
  • 横向滚动: 窄视口下内容溢出
  • 文本缩放: 文本尺寸增大时布局破裂
  • 缺失断点: 无移动端/平板端变体
评分标准(0-4分): 0=仅支持桌面端(移动端布局破裂),1=重大问题(有部分断点,但存在大量失效情况),2=部分适配(可在移动端运行,但存在瑕疵),3=良好(响应式布局,仅存在少量触摸目标或溢出问题),4=优秀(流畅适配所有视口,触摸目标设置合理)

5. Anti-Patterns (CRITICAL)

5. 反模式(CRITICAL)

Check against ALL the DON'T guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).
Score 0-4: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design)
对照impeccable技能中的所有禁止准则进行检查。查找AI生成内容特征(AI调色板、渐变文本、玻璃拟态、hero metrics、卡片网格、通用字体)及通用设计反模式(彩色背景上的灰色文本、嵌套卡片、弹跳缓动、冗余文案)。
评分标准(0-4分): 0=AI生成特征集合(5个及以上特征),1=重度AI风格(3-4个特征),2=存在部分特征(1-2个明显特征),3=基本整洁(仅存在细微问题),4=无AI生成特征(设计独特、具有目的性)

Generate Report

生成报告

Audit Health Score

审计健康评分

#DimensionScoreKey Finding
1Accessibility?[most critical a11y issue or "--"]
2Performance?
3Responsive Design?
4Theming?
5Anti-Patterns?
Total??/20[Rating band]
Rating bands: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues)
#维度评分关键发现
1可访问性?[最严重的可访问性问题或“--”]
2性能?
3响应式设计?
4主题设计?
5反模式?
总分??/20[评级区间]
评级区间: 18-20分 优秀(仅需细微优化),14-17分 良好(需针对薄弱维度改进),10-13分 合格(需大量改进工作),6-9分 较差(需重大重构),0-5分 危急(存在根本性问题)

Anti-Patterns Verdict

反模式判定

Start here. Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest.
首先开展此项。 通过/不通过:是否看起来是AI生成的?列出具体特征。请坦诚直言。

Executive Summary

执行摘要

  • Audit Health Score: ??/20 ([rating band])
  • Total issues found (count by severity: P0/P1/P2/P3)
  • Top 3-5 critical issues
  • Recommended next steps
  • 审计健康评分:??/20 ([评级区间])
  • 发现问题总数(按严重等级统计:P0/P1/P2/P3)
  • 前3-5个关键问题
  • 建议后续步骤

Detailed Findings by Severity

按严重等级分类的详细发现

Tag every issue with P0-P3 severity:
  • P0 Blocking: Prevents task completion — fix immediately
  • P1 Major: Significant difficulty or WCAG AA violation — fix before release
  • P2 Minor: Annoyance, workaround exists — fix in next pass
  • P3 Polish: Nice-to-fix, no real user impact — fix if time permits
For each issue, document:
  • [P?] Issue name
  • Location: Component, file, line
  • Category: Accessibility / Performance / Theming / Responsive / Anti-Pattern
  • Impact: How it affects users
  • WCAG/Standard: Which standard it violates (if applicable)
  • Recommendation: How to fix it
  • Suggested command: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive)
为每个问题标记P0-P3严重等级:
  • P0 阻塞级: 阻碍任务完成——需立即修复
  • P1 严重级: 造成显著使用困难或违反WCAG AA级标准——发布前必须修复
  • P2 次要级: 造成不便,但存在替代方案——可在下次迭代中修复
  • P3 优化级: 锦上添花,无实际用户影响——如有时间可修复
每个问题需记录:
  • [P?] 问题名称
  • 位置: 组件、文件、行号
  • 类别: 可访问性 / 性能 / 主题设计 / 响应式设计 / 反模式
  • 影响: 对用户的影响
  • WCAG/标准: 违反的标准(如适用)
  • 建议: 修复方案
  • 推荐命令: 使用的命令(优先选择:/animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive)

Patterns & Systemic Issues

模式与系统性问题

Identify recurring problems that indicate systemic gaps rather than one-off mistakes:
  • "Hard-coded colors appear in 15+ components, should use design tokens"
  • "Touch targets consistently too small (<44px) throughout mobile experience"
识别反复出现的问题,这些问题表明存在系统性缺陷而非单次失误:
  • "15个以上组件中存在硬编码颜色,应使用design tokens"
  • "移动端体验中触摸目标始终过小(<44px)"

Positive Findings

正向发现

Note what's working well — good practices to maintain and replicate.
记录运行良好的内容——值得保持和复制的最佳实践。

Recommended Actions

推荐操作

List recommended commands in priority order (P0 first, then P1, then P2):
  1. [P?]
    /command-name
    — Brief description (specific context from audit findings)
  2. [P?]
    /command-name
    — Brief description (specific context)
Rules: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with
/polish
as the final step if any fixes were recommended.
After presenting the summary, tell the user:
You can ask me to run these one at a time, all at once, or in any order you prefer.
Re-run
/audit
after fixes to see your score improve.
IMPORTANT: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters.
NEVER:
  • Report issues without explaining impact (why does this matter?)
  • Provide generic recommendations (be specific and actionable)
  • Skip positive findings (celebrate what works)
  • Forget to prioritize (everything can't be P0)
  • Report false positives without verification
Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement.
按优先级列出推荐命令(先P0,再P1,最后P2):
  1. [P?]
    /command-name
    — 简要描述(来自审计发现的具体上下文)
  2. [P?]
    /command-name
    — 简要描述(具体上下文)
规则: 仅推荐以下命令:/animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive。将发现的问题映射到最合适的命令。如果推荐了任何修复操作,最后需以
/polish
作为收尾步骤。
在展示摘要后,告知用户:
您可以要求我逐个运行这些命令、一次性全部运行,或按任意顺序运行。
修复完成后重新运行
/audit
查看评分提升情况。
重要提示: 需全面但具备可操作性。过多的P3问题会产生干扰。聚焦真正重要的内容。
禁止:
  • 报告问题但不说明影响(为什么这个问题重要?)
  • 提供通用建议(需具体且可操作)
  • 忽略正向发现(认可运行良好的内容)
  • 未进行优先级排序(不能所有问题都定为P0)
  • 在未验证的情况下报告误报
请记住:您是技术质量审计师。需系统化记录问题、严格划分优先级、引用具体代码位置,并提供清晰的改进路径。",