Back to Details

design-audit

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

description: Audit current design system for consistency and debt

description: 审计当前设计系统的一致性与设计债务

DESIGN-AUDIT

设计审计

Analyze the current design system for violations, gaps, and inconsistencies.
分析当前设计系统的违规情况、缺口和不一致性。

What This Does

功能说明

  1. Inventory tokens — Colors, typography, spacing, shadows
  2. Check consistency — Are tokens used consistently?
  3. Find violations — Hardcoded values, magic numbers
  4. Assess accessibility — WCAG compliance
  5. Report debt — Design debt that's accumulated
  1. 令牌盘点 — 颜色、排版、间距、阴影
  2. 一致性检查 — 令牌是否得到一致使用？
  3. 违规排查 — 硬编码值、魔术数字
  4. 可访问性评估 — WCAG合规性
  5. 债务报告 — 累积的设计债务

Process

流程

1. Load Design Skills

1. 加载设计技能

Skill("design-tokens")        # Token patterns
Skill("ui-skills")            # Implementation constraints
Skill("web-interface-guidelines")  # Vercel standards
Skill("design-tokens")        # 令牌模式
Skill("ui-skills")            # 实现约束
Skill("web-interface-guidelines")  # Vercel 标准

2. Extract Current Tokens

2. 提取当前令牌

Scan for design token definitions:
  • Tailwind config (
    tailwind.config.ts
    , 
    globals.css
    )
  • CSS variables
  • Theme files
  • Component defaults
扫描设计令牌定义：
  • Tailwind 配置文件（
    tailwind.config.ts
    、
    globals.css
    ）
  • CSS 变量
  • 主题文件
  • 组件默认值

3. Audit Token Usage

3. 审计令牌使用情况

For each token category:
Colors:
  • Are colors from the palette? Or hardcoded hex?
  • Is there semantic naming (primary, error, success)?
  • Dark mode support?
Typography:
  • Font scales defined?
  • Consistent heading hierarchy?
  • Line heights appropriate?
Spacing:
  • Spacing scale in use?
  • Magic numbers in margins/padding?
Components:
  • Consistent component patterns?
  • Reusable primitives?
  • Duplicated styles?
针对每个令牌类别：
颜色:
  • 颜色是否来自调色板？还是硬编码的十六进制值？
  • 是否使用了语义化命名（primary、error、success）？
  • 是否支持深色模式？
排版:
  • 是否定义了字体比例？
  • 标题层级是否一致？
  • 行高是否合适？
间距:
  • 是否使用了间距比例？
  • 边距/内边距中是否存在魔术数字？
组件:
  • 组件模式是否一致？
  • 是否有可复用的基础组件？
  • 是否存在重复样式？

4. Accessibility Check

4. 可访问性检查

/rams — Score current state
Check:
  • Color contrast (WCAG AA minimum)
  • Focus states
  • Touch targets
  • Screen reader support
/rams — 评估当前状态
检查内容：
  • 颜色对比度（WCAG AA 最低标准）
  • 焦点状态
  • 触摸目标
  • 屏幕阅读器支持

5. Report Findings

5. 报告发现

markdown
undefined
markdown
undefined

Design Audit: [Project Name]

设计审计：[项目名称]

Token Inventory

令牌盘点

  • Colors: [count] defined, [violations] hardcoded
  • Typography: [count] scales, [violations] magic sizes
  • Spacing: [count] values, [violations] arbitrary
  • 颜色：已定义 [count] 种，[violations] 处硬编码
  • 排版：[count] 种比例，[violations] 处魔术尺寸
  • 间距：[count] 种值，[violations] 处任意值

Consistency Score: [X]/100

一致性评分：[X]/100

Critical Issues

关键问题

  • [Issue] - [location] - [fix]
  • [问题] - [位置] - 修复方案

Debt Items

债务项

  • [Tech debt] - [impact] - [effort]
  • [技术债务] - [影响] - [修复工作量]

RAMS Score: [X]/100

RAMS 评分：[X]/100

Recommendations

建议

  1. [Priority fix]
  2. [Improvement]
undefined
  1. [优先级修复项]
  2. [改进项]
undefined

Diagram Documentation

图表文档

For design system diagrams (component hierarchy, token relationships), use 
/beautiful-mermaid
for production-quality renders.
对于设计系统图表（组件层级、令牌关系），使用 
/beautiful-mermaid
生成生产级别的渲染图。

Output

输出

Audit report ready. Next: 
/design-catalog
to explore new directions, or 
/design-theme
to fix issues.
审计报告已就绪。下一步：使用 
/design-catalog
探索新方向，或使用 
/design-theme
修复问题。