audit
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMANDATORY PREPARATION
必备准备工作
Users start this workflow with . Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.
/auditRun 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.
Consult the hierarchy checklist when reviewing grayscale hierarchy, action priority, section-title restraint, and label/value treatment.
Consult the ai slop detection when checking for generic trend-driven anti-patterns.
Consult the action hierarchy when reviewing primary, secondary, tertiary, and destructive actions.
Consult the semantic color when checking whether color is communicating state or just decoration.
Consult the surface separation when checking whether borders, shadows, cards, overlap, and background shifts are being used intentionally.
Consult the image treatment when screenshots, icons, or media handling affect usability or polish.
Consult the accessibility testing when integrating automated checks (axe, WAVE, Pa11y) into the audit workflow or CI pipeline.
Still, when the implementation clearly violates the shared design system or obvious Refactoring UI principles — weak hierarchy, arbitrary spacing, gray text on color, every button styled as primary — call it out as an implementation issue, not a matter of taste.
用户通过 启动此工作流。激活该技能后，加载 $frontend-design —— 其中包含设计原则、反模式以及上下文收集协议。在继续操作前需遵循该协议——如果尚无设计上下文，必须先加载 $setup。
/audit开展系统性的技术质量检查并生成全面报告。不要直接修复问题——将问题记录下来，以便通过其他命令处理。
这是代码层面的审计，而非设计评审。检查实现中可量化、可验证的内容。
审查灰度层级、操作优先级、标题克制性以及标签/值处理方式时，参考 层级检查清单。
检查通用趋势驱动的反模式时，参考 AI冗余设计检测。
审查主要、次要、三级及破坏性操作时，参考 操作层级。
检查颜色是用于传达状态还是仅作为装饰时，参考 语义化颜色。
检查边框、阴影、卡片、重叠及背景偏移是否被有意使用时，参考 界面层级区分。
检查截图、图标或媒体处理是否影响可用性或精致度时，参考 图片处理规范。
将自动化检查（axe、WAVE、Pa11y）集成到审计工作流或CI流水线时，参考 可访问性测试。
此外，若实现明显违反共享设计系统或Refactoring UI的基本原则——如层级薄弱、间距随意、彩色背景上的灰色文本、所有按钮都设为主要样式等——需将其标记为实现问题，而非个人品味问题。
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)
Automated testing integration:
- run axe-core, WAVE, or Pa11y against critical pages before manual review
- treat automated results as a fast warning system, not a pass/fail verdict
- verify that automated contrast failures are real (sometimes anti-aliasing or overlay layers cause false positives)
- use automated tools to catch missing labels, incorrect ARIA, and focus issues that are easy to miss in manual inspection
- document which automated rules are enabled and which are intentionally disabled with justification
检查内容:
- 对比度问题: 文本对比度比值 < 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级）
自动化测试集成:
- 在人工评审前，针对关键页面运行axe-core、WAVE或Pa11y
- 将自动化结果视为快速预警系统，而非通过/不通过的最终判定
- 验证自动化检测出的对比度失败是否真实存在（有时抗锯齿或覆盖层会导致误报）
- 使用自动化工具捕捉人工检查易遗漏的缺失标签、错误ARIA及焦点问题
- 记录启用的自动化规则，以及有意禁用的规则及理由
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
- Interaction latency: Common actions provide no immediate feedback, rely on blank waits, or miss obvious optimistic/prefetch/progressive-loading opportunities
- 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属性
- 包体积: 不必要的导入、未使用的依赖
- 渲染性能: 不必要的重渲染、缺少缓存优化
评分标准（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
- Missing color ramps: Ad-hoc one-off shades instead of a defined palette
- Too many shades without system: Slightly different blues/greys everywhere with no clear ramp
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)
检查内容:
- 硬编码颜色: 未使用设计令牌定义颜色
- 暗黑模式失效: 缺少暗黑模式变体、暗黑主题下对比度不佳
- 令牌使用不一致: 使用错误令牌、混合不同类型令牌
- 主题切换问题: 主题切换时未更新对应值
- 缺少颜色渐变: 临时自定义色调，未使用已定义的调色板
- 无系统的过多色调: 到处存在细微差异的蓝色/灰色，无清晰渐变体系
评分标准（0-4分）: 0=无主题设计（全部硬编码），1=极少使用令牌（大部分为硬编码），2=部分使用（存在令牌，但使用不一致），3=良好（已使用令牌，仅存在少量硬编码值），4=优秀（完整令牌系统，暗黑模式完美运行）
4. Responsive Design
4. 响应式设计
Check for:
- Fixed widths: Hard-coded widths that break on narrow viewports
- Touch targets: Interactive elements < 44x44px
- Horizontal scroll: Content overflow on narrow viewports
- Text scaling: Layouts that break when text size increases
- Missing breakpoints: No narrow/medium viewport variants
Score 0-4: 0=Wide-layout-only (breaks on narrow viewports), 1=Major issues (some breakpoints, many failures), 2=Partial (works across viewports, rough edges), 3=Good (responsive, minor target or overflow issues), 4=Excellent (fluid, all viewports, proper target sizing)
检查内容:
- 固定宽度: 硬编码宽度在窄视口下失效
- 触摸目标: 交互元素尺寸 < 44x44px
- 水平滚动: 窄视口下内容溢出
- 文本缩放: 文本尺寸增大时布局失效
- 缺失断点: 无窄/中等视口变体
评分标准（0-4分）: 0=仅支持宽布局（窄视口下完全失效），1=重大问题（有部分断点，但存在大量失效情况），2=部分适配（可在各视口运行，但存在粗糙边缘），3=良好（响应式适配，仅存在微小目标或溢出问题），4=优秀（流畅适配所有视口，触摸目标尺寸合规）
5. Anti-Patterns (CRITICAL)
5. 反模式（CRITICAL）
Check against ALL the DON'T guidelines in the frontend-design skill and the ai slop detection reference. 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).
Also run these implementation-level hierarchy checks:
- Hierarchy check: Can a user identify primary, secondary, and tertiary elements within about 2 seconds?
- System check: Do spacing, type, color, radius, and elevation appear to come from systems rather than arbitrary values?
- Action check: Is there one obvious primary action, with quieter secondary and tertiary actions?
- Border check: Are borders doing work that spacing, contrast, or background shifts should handle instead?
- Label:value anti-pattern test: Is data forced into rigid label/value formatting even when values or context already explain themselves?
- Unnecessary colored-link emphasis test: Are links colored so loudly that they compete with higher-priority actions or content?
- Grey-on-color fail test: Is secondary text on colored surfaces washed out because it uses generic grey instead of a related shade?
- Ambiguous grouping test: Are groups separated less clearly than the items inside them?
- Too-many-font-sizes test: Has typography drifted into a pile of near-identical sizes without a clear scale?
- Section title semantic/visual mismatch test: Are headings visually oversized just because their semantic level sounds important?
- Right-aligned-numbers test: Are numeric columns left-aligned where comparison would benefit from right alignment?
- Section title too loud test: Are section headings stealing attention from the content they label?
- Line-length / line-height test: Are paragraphs too wide for their line-height, or too tightly spaced for comfortable reading?
- Action hierarchy flattening test: Are multiple actions styled with the same urgency when only one should lead?
- Scaled-down screenshot legibility test: Are screenshots too small to communicate useful detail or structure?
- Scaled-up icon chunkiness test: Are tiny icons enlarged far past their intended size?
- Surface separation test: Are borders, shadows, cards, and background shifts stacked redundantly instead of chosen intentionally?
- Overlap clash test: Are overlapping images/cards colliding without clean separation or readable layering?
- Dark-pattern check: Are there misleading labels, preselected exploitative options, obstructed cancellation/consent flows, fake urgency, or hierarchy that pressures the wrong choice?
- Guardrail check: Do bulk/destructive/admin/powerful actions lack confirmations, undo, permission boundaries, or other proportional safeguards?
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)
对照frontend-design技能中的所有禁止准则及 AI冗余设计检测 参考文档进行检查。查找AI冗余设计特征（AI生成调色板、渐变文本、毛玻璃效果、英雄指标、卡片网格、通用字体）及通用设计反模式（彩色背景上的灰色文本、嵌套卡片、弹跳缓动、冗余文案）。
同时执行以下实现层面的层级检查:
- 层级检查: 用户能否在约2秒内识别主要、次要及三级元素？
- 系统一致性检查: 间距、字体、颜色、圆角及阴影是否来自统一体系，而非随意取值？
- 操作检查: 是否有一个明确的主要操作，次要及三级操作样式更低调？
- 边框检查: 边框是否承担了应由间距、对比度或背景偏移完成的工作？
- 标签:值反模式测试: 是否将数据强行放入僵化的标签/值格式，即便值或上下文已能自我说明？
- 不必要的彩色链接强调测试: 链接颜色是否过于醒目，以至于与更高优先级的操作或内容产生竞争？
- 彩色背景上灰色文本失效测试: 彩色背景上的次要文本是否因使用通用灰色而显得模糊，未使用相关色调？
- 分组模糊测试: 组与组之间的区分是否比组内元素的区分更模糊？
- 字体尺寸过多测试: 排版是否演变为一堆近乎相同的尺寸，无清晰层级？
- 标题语义/视觉不匹配测试: 是否仅因为语义层级听起来重要，就将标题视觉尺寸设得过大？
- 数字右对齐测试: 数值列是否采用左对齐，而右对齐更利于比较？
- 标题过于醒目测试: 章节标题是否抢走了其标注内容的注意力？
- 行宽/行高测试: 段落行宽是否与行高不匹配，或行间距过密影响阅读舒适度？
- 操作层级扁平化测试: 是否多个操作被设计为相同紧急程度，而实际上应仅有一个主导操作？
- 缩小截图可读性测试: 截图是否过小，无法传达有用细节或结构？
- 放大图标粗糙感测试: 小图标是否被放大远超其预期尺寸？
- 界面层级区分测试: 边框、阴影、卡片及背景偏移是否被冗余叠加，而非按需选择？
- 重叠冲突测试: 重叠的图片/卡片是否未做清晰区分或可读分层，导致冲突？
- 暗黑模式检查: 是否存在误导性标签、预选中的剥削性选项、受阻的取消/同意流程、虚假紧迫感或迫使用户做出错误选择的层级设计？
- 防护机制检查: 批量/破坏性/管理员/高权限操作是否缺少确认、撤销、权限边界或其他相应防护措施？
评分标准（0-4分）: 0=AI冗余设计集合（5个以上特征），1=重度AI风格（3-4个特征），2=存在部分特征（1-2个明显特征），3=基本整洁（仅存在细微问题），4=无AI冗余特征（设计独特、意图明确）
Generate Report
生成报告
Audit Health Score
审计健康评分
| # | Dimension | Score | Key Finding |
|---|---|---|---|
| 1 | Accessibility | ? | [most critical a11y issue or none] |
| 2 | Performance | ? | |
| 3 | Responsive Design | ? | |
| 4 | Theming | ? | |
| 5 | Anti-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.
Include a one-line hierarchy verdict as part of this section: either the screen has clear hierarchy, or the main ambiguity you observed.
从此处开始。 通过/不通过：设计是否看起来由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, /arrange, /critique, /extract, /polish, /optimize, /audit, /typeset, /bolder, /clarify, /delight, /adapt, /colorize, /quieter, /harden, /distill, /onboard, /normalize, /showcase)
为每个问题标记 P0-P3严重等级:
- P0 阻塞: 阻碍任务完成——立即修复
- P1 重大: 造成显著困难或违反WCAG AA级标准——发布前修复
- P2 次要: 造成困扰，但存在替代方案——下次迭代修复
- P3 优化: 值得修复，但无实际用户影响——如有时间再修复
每个问题需记录:
- [P?] 问题名称
- 位置: 组件、文件、行号
- 类别: 可访问性 / 性能 / 主题设计 / 响应式 / 反模式
- 影响: 对用户的影响
- WCAG/标准: 违反的标准（如适用）
- 建议: 修复方案
- 推荐命令: 使用的命令（优先选择：/animate, /arrange, /critique, /extract, /polish, /optimize, /audit, /typeset, /bolder, /clarify, /delight, /adapt, /colorize, /quieter, /harden, /distill, /onboard, /normalize, /showcase）
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"
- "Interactive targets consistently too small (<44px) throughout narrow-layout flows"
- "Spacing values appear arbitrary; groups and sections don't use a recognizable rhythm"
- "Multiple actions are styled as primary, flattening decision-making"
- "Section titles are consistently louder than the content they introduce"
- "Paragraph widths and line-heights are mismatched across text-heavy screens"
识别反复出现的问题，这些问题表明存在系统性缺陷而非一次性错误:
- "15个以上组件存在硬编码颜色，应使用设计令牌"
- "窄布局流程中的交互目标尺寸持续过小(<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):
- [P?] — Brief description (specific context from audit findings)
/command-name - [P?] — Brief description (specific context)
/command-name
Rules: Only recommend commands from: /animate, /arrange, /critique, /extract, /polish, /optimize, /audit, /typeset, /bolder, /clarify, /delight, /adapt, /colorize, /quieter, /harden, /distill, /onboard, /normalize, /showcase. Map findings to the most appropriate command. End with as the final step if any fixes were recommended.
/polishAfter 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-runafter fixes to see your score improve./audit
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
- Treat a clear hierarchy failure as subjective fluff — if users can't tell what matters, that is an implementation problem
Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement.
按优先级列出推荐命令（先P0，再P1，最后P2）:
- [P?] —— 简要描述（来自审计发现的具体上下文）
/command-name - [P?] —— 简要描述（具体上下文）
/command-name
规则: 仅推荐以下命令：/animate, /arrange, /critique, /extract, /polish, /optimize, /audit, /typeset, /bolder, /clarify, /delight, /adapt, /colorize, /quieter, /harden, /distill, /onboard, /normalize, /showcase。将发现映射到最合适的命令。如果推荐了任何修复操作，最后一步需为 。
/polish展示摘要后，告知用户:
你可以要求我逐个运行、一次性全部运行，或按任意顺序运行这些命令。修复完成后重新运行，查看评分提升情况。/audit
重要提示: 务必全面且具备可操作性。过多P3问题会产生干扰。聚焦真正重要的内容。
禁止:
- 报告问题但不说明影响（为什么这很重要？）
- 提供通用建议（需具体且可操作）
- 遗漏正面发现（认可做得好的地方）
- 不区分优先级（不能所有问题都是P0）
- 未经验证就报告误报
- 将明显的层级失败视为主观问题——如果用户无法分辨重点，这就是实现问题
记住：你是技术质量审计员。需系统记录、严格区分优先级、引用具体代码位置，并提供清晰的改进路径。",