Back to Details

design-audit

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Audit Skill

设计审计Skill

<!-- dual-compat-start -->
<!-- dual-compat-start -->

Use When

使用场景

  • Comprehensive UI/UX quality audit covering visual hierarchy, accessibility, AI slop detection, typography, colour, layout, interaction states, responsive behaviour, performance, and microcopy. Produces severity-rated findings with actionable...
  • The task needs reusable judgment, domain constraints, or a proven workflow rather than ad hoc advice.
  • 全面的UI/UX质量审计，涵盖视觉层级、可访问性、AI Slop检测、排版、色彩、布局、交互状态、响应式表现、性能和微文案。生成带有可操作建议的分级严重度审计结果……
  • 任务需要可复用的判断逻辑、领域约束或成熟的工作流，而非临时建议。

Do Not Use When

不适用场景

  • The task is unrelated to 
    design-audit
    or would be better handled by a more specific companion skill.
  • The request only needs a trivial answer and none of this skill's constraints or references materially help.
  • 任务与
    design-audit
    无关，或更适合由更专业的配套Skill处理。
  • 请求仅需要简单答案，本Skill的约束条件或参考内容无法提供实质性帮助。

Required Inputs

必要输入

  • Gather relevant project context, constraints, and the concrete problem to solve.
  • Confirm the desired deliverable: design, code, review, migration plan, audit, or documentation.
  • 收集相关项目背景、约束条件以及需要解决的具体问题。
  • 确认期望交付物：设计方案、代码、评审意见、迁移计划、审计报告或文档。

Workflow

工作流

  • Read this 
    SKILL.md
    first, then load only the referenced deep-dive files that are necessary for the task.
  • Apply the ordered guidance, checklists, and decision rules in this skill instead of cherry-picking isolated snippets.
  • Produce the deliverable with assumptions, risks, and follow-up work made explicit when they matter.
  • 首先阅读本
    SKILL.md
    ，然后仅加载完成任务所需的相关深度参考文件。
  • 应用本Skill中的有序指导、检查清单和决策规则，而非随意挑选孤立片段。
  • 生成交付物时，若相关的假设、风险和后续工作对任务有影响，需明确说明。

Quality Standards

质量标准

  • Keep outputs execution-oriented, concise, and aligned with the repository's baseline engineering standards.
  • Preserve compatibility with existing project conventions unless the skill explicitly requires a stronger standard.
  • Prefer deterministic, reviewable steps over vague advice or tool-specific magic.
  • 输出内容需以执行为导向、简洁明了，并与代码库的基础工程标准保持一致。
  • 除非Skill明确要求更高标准，否则需保持与现有项目惯例的兼容性。
  • 优先采用确定性、可评审的步骤，而非模糊建议或工具特定的“魔法操作”。

Anti-Patterns

反模式

  • Treating examples as copy-paste truth without checking fit, constraints, or failure modes.
  • Loading every reference file by default instead of using progressive disclosure.
  • 将示例内容直接复制粘贴，而不检查是否适配、是否符合约束条件或存在失效模式。
  • 默认加载所有参考文件，而非逐步按需披露。

Outputs

输出成果

  • A concrete result that fits the task: implementation guidance, review findings, architecture decisions, templates, or generated artifacts.
  • Clear assumptions, tradeoffs, or unresolved gaps when the task cannot be completed from available context alone.
  • References used, companion skills, or follow-up actions when they materially improve execution.
  • 符合任务要求的具体结果：实施指导、评审发现、架构决策、模板或生成的工件。
  • 当仅靠现有上下文无法完成任务时，需明确说明假设条件、权衡方案或未解决的空白。
  • 若能实质性提升执行效果，需列出使用的参考资料、配套Skill或后续行动。

Evidence Produced

生成的证据

CategoryArtifactFormatExample
UX qualityDesign audit reportMarkdown doc covering visual hierarchy, typography, spacing, colour, and accessibility findings
docs/ux/design-audit-checkout.md
UX qualityAccessibility pass reportMarkdown doc summarising WCAG conformance
docs/ux/a11y-checkout.md
分类工件格式示例
UX质量设计审计报告涵盖视觉层级、排版、间距、色彩和可访问性发现的Markdown文档
docs/ux/design-audit-checkout.md
UX质量可访问性评估报告总结WCAG合规性的Markdown文档
docs/ux/a11y-checkout.md

References

参考资料

  • Use the links and companion skills already referenced in this file when deeper context is needed.
<!-- dual-compat-end -->
  • 当需要更深入的上下文时，使用本文件中已引用的链接和配套Skill。
<!-- dual-compat-end -->

Plugins (Load Alongside)

插件（需同时加载）

Companion SkillWhen to Load
ai-slop-prevention
Detailed AI anti-pattern reference
practical-ui-design
Visual system rules to audit against
motion-design
Animation quality standards
ux-writing
Microcopy quality standards
responsive-design
Responsive behaviour standards
frontend-performance
Performance measurement targets
laws-of-ux
UX law compliance
ux-principles-101
Accessibility and usability principles
配套Skill加载时机
ai-slop-prevention
需要详细的AI反模式参考时
practical-ui-design
需要对照视觉系统规则进行审计时
motion-design
需要动画质量标准时
ux-writing
需要微文案质量标准时
responsive-design
需要响应式表现标准时
frontend-performance
需要性能测量指标时
laws-of-ux
需要UX法则合规性检查时
ux-principles-101
需要可访问性和可用性原则时

1. Audit Process

1. 审计流程

Step 1: Gather Context

步骤1：收集上下文

Before auditing, understand:
  • Who are the users? (age, tech literacy, use context)
  • What's the purpose? (task completion, information display, commerce)
  • What platform? (web, Android, iOS, cross-platform)
  • What design system? (if any — tokens, components, patterns)
  • What's the brand personality? (professional, playful, clinical)
审计前需了解：
  • 用户群体？（年龄、技术素养、使用场景）
  • 设计目的？（任务完成、信息展示、商业转化）
  • 目标平台？（网页、Android、iOS、跨平台）
  • 使用的设计系统？（如有——设计令牌、组件、模式）
  • 品牌调性？（专业、活泼、严谨）

Step 2: Systematic Scan

步骤2：系统扫描

Evaluate across all 10 dimensions (Section 2). Score each dimension.
从10个维度（第2节）进行评估，为每个维度打分。

Step 3: Produce Report

步骤3：生成报告

Follow the report structure (Section 3). Prioritise findings by severity.
遵循报告结构（第3节），按严重度优先级整理发现的问题。

2. The 10 Audit Dimensions

2. 10个审计维度

Dimension 1: AI Slop Detection

维度1：AI Slop检测

The first check. Does this interface look machine-generated?
CheckLook For
TypographyInter/Roboto defaults, no hierarchy, title case everywhere
ColourCyan-on-dark, purple gradients, gradient text, pure black/white
LayoutEverything in cards, identical card grids, everything centred
EffectsGlassmorphism, decorative blur, glow borders, SVG blobs
MotionBounce/elastic easing, animation fatigue
Content"Submit" buttons, "Loading..." text, corporate AI jargon
Verdict: PASS (distinctive, intentional) / BORDERLINE (some generic choices) / FAIL (immediately recognisable as AI-generated)
首要检查项：该界面是否看起来是机器生成的？
检查项检查要点
排版Inter/Roboto默认字体、无层级结构、全部使用标题大小写
色彩深蓝/深青配色、紫色渐变、渐变文字、纯黑/纯白
布局所有内容都放在卡片中、相同的卡片网格、所有内容居中
效果毛玻璃效果、装饰性模糊、发光边框、SVG blob图形
动效弹跳/弹性缓动、动画疲劳
内容“Submit”按钮、“Loading...”文本、企业AI术语
结论：通过（独特、有设计意图）/ 临界（存在一些通用化选择）/ 不通过（明显可识别为AI生成）

Dimension 2: Visual Hierarchy

维度2：视觉层级

CheckStandard
Squint testMost important element visible when blurred
Size hierarchyClear primary > secondary > tertiary sizing
Weight contrastBold for headings, regular for body (not medium/light)
Colour emphasisBrand colour reserved for interactive elements
WhitespaceGenerous spacing separates sections; tight spacing groups related items
Focal pointEach screen has one clear entry point for the eye
检查项标准
眯眼测试模糊后仍能看到最重要的元素
尺寸层级清晰的主 > 次 > 三级尺寸区分
字重对比标题使用粗体，正文使用常规字重（避免中等/轻量字重）
色彩强调品牌色仅用于交互元素
留白充足间距分隔不同区块；紧凑间距关联相关内容
视觉焦点每个页面有一个清晰的视觉入口点

Dimension 3: Accessibility

维度3：可访问性

CheckStandardSeverity
Text contrast>= 4.5:1 (body), >= 3:1 (large text)Critical
UI component contrast>= 3:1 against backgroundCritical
Touch targets>= 44x44px (48x48px preferred)Critical
Keyboard navigationLogical tab order, visible focus ringCritical
Screen readerSemantic HTML, ARIA labels, meaningful alt textCritical
Colour independenceNever colour alone as indicatorHigh
Zoom supportUsable at 200% zoomHigh
Reduced motion
prefers-reduced-motion
respected		High
Focus managementFocus moves logically after interactionsMedium
检查项标准严重度
文本对比度>= 4.5:1（正文），>= 3:1（大文本）关键
UI组件对比度与背景对比度 >= 3:1关键
触摸目标>= 44x44px（推荐48x48px）关键
键盘导航合理的Tab顺序、可见的焦点环关键
屏幕阅读器语义化HTML、ARIA标签、有意义的替代文本关键
色彩独立性绝不单独使用色彩作为提示高
缩放支持200%缩放时仍可正常使用高
减少动效遵循
prefers-reduced-motion
设置		高
焦点管理交互后焦点移动符合逻辑中

Dimension 4: Typography

维度4：排版

CheckStandard
Font choiceIntentional, not default (matches brand personality)
Type scaleConsistent scale (Major Third or project-appropriate)
Body size>= 16px (18px preferred)
Line height1.5-2.0 for body; decreasing for larger sizes
Line length40-80 characters (66 ideal)
Weight usageRegular + Bold only (avoid thin/light/medium)
AlignmentLeft-aligned body text (no justified, centre only for 1-2 lines)
Letter spacingDecreased for large display text
检查项标准
字体选择有设计意图，非默认字体（匹配品牌调性）
字体比例一致的比例（大三度或项目适配的比例）
正文字号>= 16px（推荐18px）
行高正文1.5-2.0；字号越大行高越小
行长度40-80字符（理想66字符）
字重使用仅使用常规+粗体（避免细体/轻量/中等字重）
对齐方式正文左对齐（不使用两端对齐，仅1-2行文本可居中）
字间距大尺寸展示文本需缩小字间距

Dimension 5: Colour

维度5：色彩

CheckStandard
Tinted neutralsNo pure grey (#808080), black (#000), or white (#fff)
Palette structurePrimary + neutral + semantic + surface tokens
60-30-10 rule60% neutral, 30% secondary, 10% accent
Semantic colourRed=error, amber=warning, green=success, blue=info
Dark modeIndependently designed (not inverted), desaturated brand colours
Brand colour usageReserved for interactive elements only
System colour pairingAlways paired with icon (not colour alone)
检查项标准
中性色调整不使用纯灰色(#808080)、纯黑(#000)或纯白(#fff)
调色板结构主色 + 中性色 + 语义色 + 表面色令牌
60-30-10法则60%中性色、30%辅助色、10%强调色
语义色彩红色=错误、琥珀色=警告、绿色=成功、蓝色=信息
深色模式独立设计（非简单反转）、品牌色降低饱和度
品牌色使用仅用于交互元素
系统色彩搭配始终搭配图标使用（不单独使用色彩）

Dimension 6: Layout & Spacing

维度6：布局与间距

CheckStandard
Spacing systemConsistent token scale (4pt or 8pt based)
Spacing variationRhythm through varied spacing (not uniform everywhere)
Alignment consistencyFew alignment axes per screen
Content max-widthText constrained to 40-80 character line length
Grid usageAppropriate tool: Flexbox for 1D, Grid for 2D
ResponsiveMobile-first, content-driven breakpoints
Container queriesUsed for reusable components
检查项标准
间距系统一致的令牌比例（基于4pt或8pt）
间距变化通过多样化间距营造节奏感（非全局统一间距）
对齐一致性每个页面仅使用少量对齐轴
内容最大宽度文本限制为40-80字符的行长度
网格使用合适的工具：Flexbox用于一维布局，Grid用于二维布局
响应式设计移动端优先、内容驱动的断点
容器查询用于可复用组件

Dimension 7: Interaction States

维度7：交互状态

Every interactive element must have these states defined:
StateVisual Treatment
DefaultBase appearance
HoverSubtle shift (colour, shadow, or position)
FocusVisible ring (
focus-visible
for keyboard only)
Active/PressedDistinct from hover (scale or colour change)
DisabledReduced opacity OR removed with explanation
LoadingInline indicator with specific status text
ErrorRed styling + icon + descriptive message
SuccessGreen styling + icon + confirmation message
每个交互元素必须定义以下状态：
状态视觉处理
默认基础外观
悬停细微变化（色彩、阴影或位置）
焦点可见的焦点环（仅键盘交互时使用
focus-visible
）
激活/按下与悬停状态区分（缩放或色彩变化）
禁用降低透明度或隐藏并附带说明
加载内联指示器+具体状态文本
错误红色样式+图标+描述性消息
成功绿色样式+图标+确认消息

Dimension 8: Motion & Animation

维度8：动效与动画

CheckStandard
PurposeEvery animation serves a function (feedback, guide, connect)
TimingFollows 100/300/500 rule for category
EasingExponential curves (ease-out-quart/quint), no bounce/elastic
GPU-onlyTransform + opacity only (no layout property animation)
Reduced motion
prefers-reduced-motion
alternative provided
Performance60fps on mid-range devices
RestraintNot everything animates (no animation fatigue)
检查项标准
目的每个动画都有明确功能（反馈、引导、关联）
时长遵循100/300/500分类规则
缓动指数曲线（ease-out-quart/quint），禁止弹跳/弹性缓动
GPU加速仅使用Transform + opacity（不带动画布局属性）
减少动效提供
prefers-reduced-motion
替代方案
性能中端设备上保持60fps
克制并非所有元素都需要动画（避免动画疲劳）

Dimension 9: Content & Microcopy

维度9：内容与微文案

CheckStandard
Button labelsVerb + noun (no "Submit", "OK", "Yes/No")
Error messagesWhat happened + why + how to fix
Empty statesAcknowledge + explain value + action
Loading textNames the operation ("Saving your draft...")
Link textDescriptive (no "Click here", "Learn more")
VocabularyConsistent terms throughout
ToneMatches moment (serious for errors, warm for onboarding)
检查项标准
按钮标签动词+名词（禁止使用"Submit"、"OK"、"Yes/No"）
错误消息说明问题+原因+修复方法
空状态告知用户+说明价值+提供操作
加载文本明确操作名称（如"Saving your draft..."）
链接文本描述性文本（禁止使用"Click here"、"Learn more"）
词汇一致性全程使用一致术语
语气匹配场景（错误场景严肃，引导场景亲切）

Dimension 10: Performance

维度10：性能

CheckStandard
LCP< 2.5s on mid-range mobile
INP< 200ms
CLS< 0.1
Initial load< 650 KB compressed total
ImagesWebP/AVIF, srcset, lazy loading, explicit dimensions
Fonts
font-display: swap
, preloaded, subset
检查项标准
LCP中端移动设备上<2.5s
INP<200ms
CLS<0.1
初始加载压缩后总大小<650 KB
图片使用WebP/AVIF格式、srcset、懒加载、明确尺寸
字体使用
font-display: swap
、预加载、子集化

3. Report Structure

3. 报告结构

Header

头部

undefined
undefined

Design Audit Report

Design Audit Report

Date: [Date] Auditor: Claude (AI-assisted) Target: [Screen/feature name] Platform: [Web/Android/iOS] Context: [Brief description of purpose and users]
undefined
Date: [Date] Auditor: Claude (AI-assisted) Target: [Screen/feature name] Platform: [Web/Android/iOS] Context: [Brief description of purpose and users]
undefined

AI Slop Verdict

AI Slop结论

undefined
undefined

AI Slop Verdict: [PASS / BORDERLINE / FAIL]

AI Slop Verdict: [PASS / BORDERLINE / FAIL]

[1-2 sentence summary of why]
undefined
[1-2 sentence summary of why]
undefined

Executive Summary

执行摘要

undefined
undefined

Executive Summary

Executive Summary

  • Overall Score: [X/100]
  • Critical Issues: [count]
  • High Issues: [count]
  • Medium Issues: [count]
  • Low Issues: [count]
  • What's Working: [1-3 bullet points of strengths]
  • Top Priority: [The single most impactful fix]
undefined
  • Overall Score: [X/100]
  • Critical Issues: [count]
  • High Issues: [count]
  • Medium Issues: [count]
  • Low Issues: [count]
  • What's Working: [1-3 bullet points of strengths]
  • Top Priority: [The single most impactful fix]
undefined

Findings by Severity

按严重度分类的发现

undefined
undefined

Critical (Must Fix Before Ship)

Critical (Must Fix Before Ship)

[Finding Title]

[Finding Title]

  • Dimension: [Which of the 10 dimensions]
  • Location: [Where in the interface]
  • Issue: [What's wrong]
  • Impact: [Who is affected and how]
  • Fix: [Specific actionable fix]
  • Standard: [Which standard it violates]
  • Dimension: [Which of the 10 dimensions]
  • Location: [Where in the interface]
  • Issue: [What's wrong]
  • Impact: [Who is affected and how]
  • Fix: [Specific actionable fix]
  • Standard: [Which standard it violates]

High (Fix Within Sprint)

High (Fix Within Sprint)

[Same structure]
[Same structure]

Medium (Fix Within Quarter)

Medium (Fix Within Quarter)

[Same structure]
[Same structure]

Low (Nice to Have)

Low (Nice to Have)

[Same structure]
undefined
[Same structure]
undefined

Severity Definitions

严重度定义

SeverityMeaning
CriticalBlocks users, fails accessibility law, data loss risk
HighSignificant UX degradation, frequent user confusion
MediumNoticeable quality issue, occasional friction
LowMinor polish, edge case, aesthetic preference
严重度含义
Critical阻碍用户使用、违反可访问性法规、存在数据丢失风险
HighUX体验显著下降、用户频繁困惑
Medium明显的质量问题、偶尔产生摩擦
Low细微的优化点、边缘场景、审美偏好

Positive Findings

积极发现

undefined
undefined

What's Working Well

What's Working Well

[List patterns and decisions that are effective and should be maintained]
undefined
[List patterns and decisions that are effective and should be maintained]
undefined

Recommendations

建议

undefined
undefined

Prioritised Recommendations

Prioritised Recommendations

  1. [Highest impact fix] — addresses [N] critical/high issues
  2. [Second priority] — addresses [N] issues
  3. [Third priority] — addresses [N] issues

---
  1. [Highest impact fix] — addresses [N] critical/high issues
  2. [Second priority] — addresses [N] issues
  3. [Third priority] — addresses [N] issues

---

4. Scoring Guide

4. 评分指南

ScoreMeaning
90-100Production-ready. Minor polish only.
75-89Good foundation. Fix high-priority issues before shipping.
60-74Significant issues. Needs focused remediation sprint.
40-59Major redesign areas. Multiple dimensions failing.
< 40Fundamental problems. Start with structure and hierarchy.
分数含义
90-100可投入生产。仅需细微优化。
75-89基础良好。上线前修复高优先级问题。
60-74存在显著问题。需要集中整改迭代。
40-59存在重大 redesign 需求。多个维度不达标。
<40存在根本性问题。需从结构和层级重新设计。

Dimension Weights

维度权重

DimensionWeightRationale
Accessibility20%Legal requirement, blocks users
Visual Hierarchy15%Foundation of usability
Interaction States12%Functional completeness
Content & Microcopy12%User comprehension
Typography10%Readability
Colour8%Communication and mood
Layout & Spacing8%Structure and scannability
Performance6%Speed and responsiveness
Motion5%Polish and feedback
AI Slop4%Distinctiveness (binary pass/fail)
维度权重理由
可访问性20%法律要求、阻碍用户使用
视觉层级15%可用性基础
交互状态12%功能完整性
内容与微文案12%用户理解度
排版10%可读性
色彩8%沟通与氛围
布局与间距8%结构与可扫描性
性能6%速度与响应性
动效5%优化与反馈
AI Slop4%独特性（二元通过/不通过）

5. Quick Audit Checklist (10-Minute Version)

5. 快速审计清单（10分钟版）

For rapid checks when a full audit isn't needed:
  • AI Slop: Does this look machine-generated? (fonts, colours, layout)
  • Hierarchy: Squint test passes — primary element is clear
  • Contrast: Body text >= 4.5:1, UI components >= 3:1
  • Touch targets: >= 44x44px on touch devices
  • Keyboard: Tab through the page — focus visible, logical order
  • States: Hover, focus, active, error, loading all defined
  • Buttons: All use verb + noun labels
  • Errors: All show what, why, how to fix
  • Empty states: No blank screens
  • Responsive: Works on mobile without horizontal scroll
  • Performance: Loads in < 3s on mobile
  • Motion: No bounce easing, reduced motion handled
Sources: Impeccable audit and critique skills (Bakaus, 2025); WCAG 2.2 AA; Nielsen Norman Group heuristic evaluation framework.
当不需要完整审计时，可进行快速检查：
  • AI Slop：界面是否看起来是机器生成的？（字体、色彩、布局）
  • 层级结构：眯眼测试通过——核心元素清晰可见
  • 对比度：正文文本>=4.5:1，UI组件>=3:1
  • 触摸目标：触摸设备上>=44x44px
  • 键盘导航：按Tab键遍历页面——焦点可见、顺序合理
  • 交互状态：悬停、焦点、激活、错误、加载状态均已定义
  • 按钮：全部使用动词+名词标签
  • 错误提示：全部说明问题、原因及修复方法
  • 空状态：无空白页面
  • 响应式：移动端可正常使用，无横向滚动
  • 性能：移动端加载时间<3s
  • 动效：无弹跳缓动、已处理减少动效需求
资料来源：无懈可击的审计与评审技能（Bakaus, 2025）；WCAG 2.2 AA；尼尔森诺曼集团启发式评估框架。