i-audit
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMANDATORY 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缺失: 交互元素缺少正确的角色、标签或状态定义
- 键盘导航问题: 缺少焦点指示器、Tab键跳转顺序不符合逻辑、存在键盘陷阱
- 语义化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)
检查项:
- 布局抖动: 在循环中反复读写布局属性
- 高成本动画: 对布局属性(宽度、高度、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
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)
检查项:
- 硬编码颜色: 未使用设计token,直接写死颜色值
- 深色模式异常: 缺少深色模式适配、深色主题下对比度不足
- 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. 反模式(关键项)
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风格配色、渐变文字、玻璃拟态、夸张的核心数据展示、卡片网格、通用字体)和通用设计反模式(彩色背景上用灰色文字、嵌套卡片、弹跳缓动效果、冗余文案)。
评分标准(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 "--"] |
| 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.
从此处开始。判定通过/不通过:该设计看起来是否是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)
- Top 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, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
给每个问题标记P0-P3严重等级:
- P0 阻塞级: 阻碍任务完成,必须立即修复
- P1 严重级: 导致严重使用困难或违反WCAG AA标准,发布前必须修复
- P2 次要级: 仅影响使用体验,存在临时解决方案,下个迭代修复即可
- P3 打磨级: 优化项,对用户无实际影响,时间充裕时可修复
每个问题需要记录:
- [P?] 问题名称
- 位置: 组件、文件、行号
- 分类: 可访问性 / 性能 / 主题系统 / 响应式 / 反模式
- 影响: 对用户的具体影响
- WCAG/标准: 违反的对应标准(如果适用)
- 修复建议: 具体修复方案
- 推荐命令: 使用的对应命令(优先选择:/animate, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /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个以上组件存在颜色硬编码问题,应当使用设计token"
- "移动端全链路触控目标普遍过小(<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, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. 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
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, /quieter, /shape, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive。将发现的问题匹配到最合适的命令。如果推荐了任何修复操作,最后以作为收尾步骤。
/polish给出摘要后,告知用户:
你可以要求我逐个执行这些命令、一次性全部执行,或者按照你偏好的顺序执行。修复完成后重新运行即可查看评分提升情况。/audit
重要提示: 内容要全面但具备可执行性,过多的P3问题会产生噪声,重点关注真正有影响的问题。
禁止行为:
- 上报问题时不说明影响(为什么这个问题重要?)
- 给出通用的修复建议(要具体、可执行)
- 省略亮点发现(肯定做得好的部分)
- 不做优先级区分(不可能所有问题都是P0)
- 未经验证就上报误报问题
记住:你是一名技术质量审计师。要系统化记录问题、严格划分优先级、标注具体代码位置,并提供清晰的改进路径。