用途
design-audit 用于对前端实现进行系统性的技术质量检查,并生成一份带评分的报告。它的定位是代码层面的审计,而不是设计评论:只检查实现中可测量、可验证的内容。该技能明确不负责修复问题,而是把问题记录下来,交给其他命令去处理。
主要能力
审计覆盖五个维度,每个维度按 0-4 分评分,评分依据 minoan-frontend-design 技能中的 heuristics-scoring.md 标准。
-
可访问性(Accessibility):检查对比度是否低于 4.5:1(AAA 为 7:1)、交互元素是否缺少正确的 ARIA 角色/标签/状态、键盘焦点指示与 Tab 顺序、语义化 HTML(标题层级、landmark、用 div 充当按钮)、表单问题(输入无标签、错误提示不佳)。评分:0=不可访问,1=重大缺口,2=部分努力,3=基本满足 WCAG AA,4=完全满足 WCAG AA。
-
性能(Performance):检查布局抖动(在循环中读写布局属性)、昂贵动画(随意动画布局属性、无限制的 blur/filter/shadow 效果、明显掉帧的效果)、缺少优化(无懒加载、资源未优化、缺少 will-change)、包体积(不必要导入、未使用依赖)、渲染性能(不必要重渲染、缺少 memoization)。评分:0=严重问题,1=重大问题,2=部分优化,3=基本优化,4=快速精简。
-
响应式设计(Responsive Design):检查在移动端断裂的固定宽度、小于 44x44px 的触摸目标、窄视口下的横向滚动、缺失断点或移动端变体。评分:0=仅桌面,1=重大失败,2=移动端可用但有粗糙边缘,3=响应式但有次要问题,4=全视口流畅。
-
主题化(Theming):检查未使用设计 token 的硬编码颜色、暗色模式损坏或缺失暗色变体、token 使用不一致或混用 token 类型、纯黑(#000)或无色调的纯灰。评分:0=无主题化,1=极少 token,2=token 不一致,3=良好但有次要缺口,4=完整 token 系统。
-
反模式(Anti-Patterns):对照 minoan 技能中的拒绝准则与 anti-patterns.md 完整清单,查找 AI 生成痕迹、侧边标签边框、渐变文字、通用字体等所有迹象。评分:0=AI 垃圾画廊(5+ 迹象),1=重度 AI 审美(3-4),2=有一些迹象(1-2),3=基本干净,4=独特且有意图。
使用方式
准备阶段:读取 ~/.claude/skills/minoan-frontend-design/SKILL.md 获取反模式指南;如果存在 .design-context.md,读取项目上下文;如果存在 .design-critique/ignore.md 忽略列表,则匹配忽略条目(不区分大小写的子串匹配)的发现会被静默丢弃——用户已将其视为延期的权衡或接受的偏差。
随后执行诊断扫描,对上述五个维度逐一评分。
报告包含以下部分:
- 审计健康评分表:列出五个维度、各自得分与关键发现,并给出总分(满分 20)。评级区间:18-20 优秀,14-17 良好,10-13 可接受,6-9 较差,0-5 严重。
- 反模式判定:通过/失败——看起来是否像 AI 生成的?列出具体迹象。
- 按严重级别分类的发现:每个问题标注 P0-P3,并包含问题名称、位置(组件、文件、行号)、类别(可访问性/性能/主题化/响应式/反模式)、影响(如何影响用户)、建议(如何修复)。
- 系统性问题:反复出现的问题,表明是缺口而非一次性错误。
- 正面发现:哪些做法良好、值得保持。
- 建议操作:按优先级列出命令(P0 优先),如果建议了修复,以 /design-polish 结尾。
对于 UX 层面的问题(层级、情感共鸣、认知负荷),应运行 /design-critique。修复后重新运行 /design-audit 可看到分数提升。
适用场景
适用于需要对前端代码做技术质量把关、量化评估可访问性/性能/响应式/主题化/反模式水平,并希望获得可追踪评分与优先级修复清单的场景。
限制
该技能只记录问题、不修复问题;它是代码层面的审计,不做设计评论;UX 层面的问题需改用 /design-critique。评分依赖 minoan-frontend-design 技能中的参考文件,忽略列表中的发现会被静默丢弃。