Back to Details

design-system

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/design-system

/design-system

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.
Manage your design system — audit for consistency, document components, or design new patterns.
若你看到不熟悉的占位符或需要查看已连接的工具，请参阅CONNECTORS.md。
管理你的设计系统——审计一致性、记录组件或设计新模式。

Usage

使用方法

/design-system audit                    # Full system audit
/design-system document [component]     # Document a component
/design-system extend [pattern]         # Design a new component or pattern
/design-system audit                    # 完整系统审计
/design-system document [component]     # 记录单个组件
/design-system extend [pattern]         # 设计新组件或模式

Components of a Design System

设计系统的组成部分

Design Tokens

Design Tokens

Atomic values that define the visual language:
  • Colors (brand, semantic, neutral)
  • Typography (scale, weights, line heights)
  • Spacing (scale, component padding)
  • Borders (radius, width)
  • Shadows (elevation levels)
  • Motion (durations, easings)
定义视觉语言的原子值：
  • 颜色（品牌色、语义色、中性色）
  • 排版（字号层级、字重、行高）
  • 间距（间距层级、组件内边距）
  • 边框（圆角、宽度）
  • 阴影（层级高度）
  • 动效（时长、缓动曲线）

Components

组件

Reusable UI elements with defined:
  • Variants (primary, secondary, ghost)
  • States (default, hover, active, disabled, loading, error)
  • Sizes (sm, md, lg)
  • Behavior (interactions, animations)
  • Accessibility (ARIA, keyboard)
具有以下定义的可复用UI元素：
  • 变体（主要、次要、幽灵）
  • 状态（默认、悬停、激活、禁用、加载、错误）
  • 尺寸（sm、md、lg）
  • 行为（交互、动画）
  • 无障碍（ARIA、键盘操作）

Patterns

模式

Common UI solutions combining components:
  • Forms (input groups, validation, submission)
  • Navigation (sidebar, tabs, breadcrumbs)
  • Data display (tables, cards, lists)
  • Feedback (toasts, modals, inline messages)
组合组件的通用UI解决方案：
  • 表单（输入组、校验、提交）
  • 导航（侧边栏、标签页、面包屑）
  • 数据展示（表格、卡片、列表）
  • 反馈（提示框、模态框、行内消息）

Principles

原则

  1. Consistency over creativity — The system exists so teams don't reinvent the wheel
  2. Flexibility within constraints — Components should be composable, not rigid
  3. Document everything — If it's not documented, it doesn't exist
  4. Version and migrate — Breaking changes need migration paths
  1. 一致性优先于创意 — 设计系统的存在是为了避免团队重复造轮子
  2. 约束内的灵活性 — 组件应具备可组合性，而非僵化
  3. 记录所有内容 — 未记录的内容等同于不存在
  4. 版本化与迁移 — 破坏性变更需要提供迁移路径

Output — Audit

输出 — 审计

markdown
undefined
markdown
undefined

Design System Audit

Design System Audit

Summary

Summary

Components reviewed: [X] | Issues found: [X] | Score: [X/100]
Components reviewed: [X] | Issues found: [X] | Score: [X/100]

Naming Consistency

Naming Consistency

IssueComponentsRecommendation
[Inconsistent naming][List][Standard to adopt]
IssueComponentsRecommendation
[Inconsistent naming][List][Standard to adopt]

Token Coverage

Token Coverage

CategoryDefinedHardcoded Values Found
Colors[X][X] instances of hardcoded hex
Spacing[X][X] instances of arbitrary values
Typography[X][X] instances of custom fonts/sizes
CategoryDefinedHardcoded Values Found
Colors[X][X] instances of hardcoded hex
Spacing[X][X] instances of arbitrary values
Typography[X][X] instances of custom fonts/sizes

Component Completeness

Component Completeness

ComponentStatesVariantsDocsScore
Button✅✅⚠️8/10
Input✅⚠️❌5/10
ComponentStatesVariantsDocsScore
Button✅✅⚠️8/10
Input✅⚠️❌5/10

Priority Actions

Priority Actions

  1. [Most impactful improvement]
  2. [Second priority]
  3. [Third priority]
undefined
  1. [Most impactful improvement]
  2. [Second priority]
  3. [Third priority]
undefined

Output — Document

输出 — 文档

markdown
undefined
markdown
undefined

Component: [Name]

Component: [Name]

Description

Description

[What this component is and when to use it]
[What this component is and when to use it]

Variants

Variants

VariantUse When
[Primary][Main actions]
[Secondary][Supporting actions]
VariantUse When
[Primary][Main actions]
[Secondary][Supporting actions]

Props / Properties

Props / Properties

PropertyTypeDefaultDescription
[prop][type][default][description]
PropertyTypeDefaultDescription
[prop][type][default][description]

States

States

StateVisualBehavior
Default[description]—
Hover[description][interaction]
Active[description][interaction]
Disabled[description]Non-interactive
Loading[description][animation]
StateVisualBehavior
Default[description]—
Hover[description][interaction]
Active[description][interaction]
Disabled[description]Non-interactive
Loading[description][animation]

Accessibility

Accessibility

  • Role: [ARIA role]
  • Keyboard: [Tab, Enter, Escape behavior]
  • Screen reader: [Announced as...]
  • Role: [ARIA role]
  • Keyboard: [Tab, Enter, Escape behavior]
  • Screen reader: [Announced as...]

Do's and Don'ts

Do's and Don'ts

✅ Do❌ Don't
[Best practice][Anti-pattern]
✅ Do❌ Don't
[Best practice][Anti-pattern]

Code Example

Code Example

[Framework-appropriate code snippet]
undefined
[Framework-appropriate code snippet]
undefined

Output — Extend

输出 — 扩展

markdown
undefined
markdown
undefined

New Component: [Name]

New Component: [Name]

Problem

Problem

[What user need or gap this component addresses]
[What user need or gap this component addresses]

Existing Patterns

Existing Patterns

Related ComponentSimilarityWhy It's Not Enough
[Component][What's shared][What's missing]
Related ComponentSimilarityWhy It's Not Enough
[Component][What's shared][What's missing]

Proposed Design

Proposed Design

API / Props

API / Props

PropertyTypeDefaultDescription
[prop][type][default][description]
PropertyTypeDefaultDescription
[prop][type][default][description]

Variants

Variants

VariantUse WhenVisual
[Variant][Scenario][Description]
VariantUse WhenVisual
[Variant][Scenario][Description]

States

States

StateBehaviorNotes
Default[Description]—
Hover[Description][Interaction]
Disabled[Description]Non-interactive
Loading[Description][Animation]
StateBehaviorNotes
Default[Description]—
Hover[Description][Interaction]
Disabled[Description]Non-interactive
Loading[Description][Animation]

Tokens Used

Tokens Used

  • Colors: [Which tokens]
  • Spacing: [Which tokens]
  • Typography: [Which tokens]
  • Colors: [Which tokens]
  • Spacing: [Which tokens]
  • Typography: [Which tokens]

Accessibility

Accessibility

  • Role: [ARIA role]
  • Keyboard: [Expected interactions]
  • Screen reader: [Announced as...]
  • Role: [ARIA role]
  • Keyboard: [Expected interactions]
  • Screen reader: [Announced as...]

Open Questions

Open Questions

  • [Decision that needs design review]
  • [Edge case to resolve]
undefined
  • [Decision that needs design review]
  • [Edge case to resolve]
undefined

If Connectors Available

若已连接工具

If ~~design tool is connected:
  • Audit components directly in Figma — check naming, variants, and token usage
  • Pull component properties and layer structure for documentation
If ~~knowledge base is connected:
  • Search for existing component documentation and usage guidelines
  • Publish updated documentation to your wiki
若已连接~~设计工具：
  • 直接在Figma中审计组件——检查命名、变体及令牌使用情况
  • 提取组件属性和图层结构用于文档编写
若已连接~~知识库：
  • 搜索现有组件文档及使用指南
  • 将更新后的文档发布到你的维基站点

Tips

提示

  1. Start with an audit — Know where you are before deciding where to go.
  2. Document as you build — It's easier to document a component while designing it.
  3. Prioritize coverage over perfection — 80% of components documented beats 100% of 10 components.
  1. 从审计开始 — 在确定方向前先了解现状。
  2. 边构建边记录 — 在设计组件时同步编写文档会更轻松。
  3. 优先覆盖而非追求完美 — 记录80%的组件胜过完美记录10个组件。