用途
Design Audit 是一个用于对 UI/UX 质量进行综合审查的技能。它适用于需要对界面做系统性设计审查、可访问性检查、发布前质量把关,或需要可复用判断标准与成熟工作流的任务。当任务与设计审查无关,或只需简单回答、无需该技能的约束与参考时,则不建议使用。
主要能力
该技能围绕十个审查维度展开:
- AI 生成痕迹检测:检查排版、色彩、布局、效果、动效与内容是否呈现机器生成特征,给出 PASS / BORDERLINE / FAIL 判定。
- 视觉层级:通过眯眼测试、尺寸层级、字重对比、色彩强调、留白与焦点等标准评估。
- 无障碍:检查文本对比度、UI 组件对比度、触控目标尺寸、键盘导航、屏幕阅读器、颜色独立性、缩放支持、减少动效与焦点管理。
- 排版:字体选择、字号比例、正文字号、行高、行长、字重使用、对齐与字距。
- 色彩:中性色着色、调色板结构、60-30-10 规则、语义色、深色模式、品牌色使用与系统色配对。
- 布局与间距:间距系统、间距变化、对齐一致性、内容最大宽度、网格使用、响应式与容器查询。
- 交互状态:默认、悬停、聚焦、按下、禁用、加载、错误与成功状态。
- 动效与动画:目的、时长、缓动、GPU 属性、减少动效、性能与克制。
- 内容与微文案:按钮标签、错误信息、空状态、加载文案、链接文本、术语一致性与语气。
- 性能:LCP、INP、CLS、初始加载体积、图片与字体优化。
使用方式
工作流要求先阅读 SKILL.md,再按需加载引用的深入文件;应用有序的指导、检查清单与决策规则,而非零散摘取片段;产出交付物时明确假设、风险与后续工作。对于高级产品,还需增加高级就绪度检查,包括买家证明、服务线索、定价信心、高管清晰度、支持可见性、SEO/内容权威与产品包装。
审查过程分三步:收集上下文(用户、目的、平台、设计系统、品牌个性);按十个维度系统扫描并评分;按报告结构产出报告,按严重程度排序。报告包含 AI 生成痕迹判定、执行摘要、按严重程度分级的发现、严重程度定义、正面发现与优先建议。评分指南给出 90-100 生产就绪、75-89 基础良好、60-74 需集中修复、40-59 需重大重设计、低于 40 存在根本问题。维度权重为无障碍 20%、视觉层级 15%、交互状态 12%、内容与微文案 12%、排版 10%、色彩 8%、布局与间距 8%、性能 6%、动效 5%、AI 生成痕迹 4%。
还提供 10 分钟快速审查清单,用于不需要完整审查时的快速检查。
适用场景
适用于需要对界面进行系统性设计审查、可访问性检查、发布前质量把关,或需要可复用判断标准与成熟工作流的任务。可配合的配套技能包括:ai-slop-prevention、practical-ui-design、motion-design、ux-writing、responsive-design、frontend-performance、laws-of-ux、ux-principles-101、premium-software-product-execution。当怀疑屏幕、组件或标签之间存在不一致时,可使用 references/consistency-audit.md。
限制
当任务与设计审查无关,或只需简单回答、无需该技能的约束与参考时,不建议使用。该技能强调不应将示例视为可直接复制的真理,也不应默认加载所有参考文件,而应使用渐进式披露。产出需保持面向执行、简洁,并与仓库基线工程标准一致;除非技能明确要求更高标准,否则应保持与现有项目约定兼容。