/design-system

> 如果你看到不熟悉的占位符或需要检查哪些工具已连接,请参阅 CONNECTORS.md

管理你的设计系统——审计一致性、记录组件或设计新模式。

用法

/design-system audit                    # 完整系统审计
/design-system document [组件]          # 记录组件
/design-system extend [模式]            # 设计新组件或模式

设计系统的组成部分

设计令牌

定义视觉语言的原子值:

组件

可复用的 UI 元素,包含以下定义:

模式

组合组件的常见 UI 解决方案:

原则

  1. 一致性优于创意——设计系统的存在是为了让团队不重复造轮子
  2. 约束内的灵活性——组件应可组合,而非僵化
  3. 记录一切——如果没有文档,就等于不存在
  4. 版本化和迁移——破坏性变更需要迁移路径

输出 —— 审计

## 设计系统审计

### 摘要
**审查的组件:** [X] | **发现的问题:** [X] | **评分:** [X/100]

### 命名一致性
| 问题 | 组件 | 建议 |
|-------|------------|----------------|
| [命名不一致] | [列表] | [应采用的标准] |

### 设计令牌覆盖率
| 类别 | 已定义 | 发现的硬编码值 |
|----------|---------|----------------------|
| 颜色 | [X] | [X] 处硬编码十六进制值 |
| 间距 | [X] | [X] 处任意值 |
| 排版 | [X] | [X] 处自定义字体/尺寸 |

### 组件完整性
| 组件 | 状态 | 变体 | 文档 | 评分 |
|-----------|--------|----------|------|-------|
| 按钮 | 完整 | 完整 | 部分 | 8/10 |
| 输入框 | 完整 | 部分 | 缺失 | 5/10 |

### 优先行动
1. [最有影响力的改进]
2. [第二优先级]
3. [第三优先级]

输出 —— 文档

## 组件:[名称]

### 描述
[此组件是什么以及何时使用]

### 变体
| 变体 | 使用场景 |
|---------|----------|
| [主要] | [主要操作] |
| [次要] | [辅助操作] |

### 属性
| 属性 | 类型 | 默认值 | 描述 |
|----------|------|---------|-------------|
| [属性] | [类型] | [默认值] | [描述] |

### 状态
| 状态 | 视觉效果 | 行为 |
|-------|--------|----------|
| 默认 | [描述] ||
| 悬停 | [描述] | [交互] |
| 激活 | [描述] | [交互] |
| 禁用 | [描述] | 不可交互 |
| 加载 | [描述] | [动画] |

### 无障碍性
- **角色**:[ARIA 角色]
- **键盘**:[Tab、Enter、Escape 行为]
- **屏幕阅读器**:[朗读为……]

### 该做的和不该做的
| 该做的 | 不该做的 |
|------|---------|
| [最佳实践] | [反模式] |

### 代码示例
[适合框架的代码片段]

输出 —— 扩展

## 新组件:[名称]

### 问题
[此组件解决的用户需求或功能缺口]

### 现有模式
| 相关组件 | 相似之处 | 为何不够 |
|-------------------|-----------|---------------------|
| [组件] | [共用的部分] | [缺失的内容] |

### 设计方案

#### API / 属性
| 属性 | 类型 | 默认值 | 描述 |
|----------|------|---------|-------------|
| [属性] | [类型] | [默认值] | [描述] |

#### 变体
| 变体 | 使用场景 | 视觉效果 |
|---------|----------|--------|
| [变体] | [场景] | [描述] |

#### 状态
| 状态 | 行为 | 说明 |
|-------|----------|-------|
| 默认 | [描述] ||
| 悬停 | [描述] | [交互] |
| 禁用 | [描述] | 不可交互 |
| 加载 | [描述] | [动画] |

#### 使用的设计令牌
- 颜色:[哪些令牌]
- 间距:[哪些令牌]
- 排版:[哪些令牌]

### 无障碍性
- **角色**:[ARIA 角色]
- **键盘**:[预期的交互]
- **屏幕阅读器**:[朗读为……]

### 未解决的问题
- [需要设计评审的决策]
- [需要解决的边缘情况]

如果连接器可用

如果连接了 ~~design tool

如果连接了 ~~knowledge base

提示

  1. 从审计开始——在决定目标之前先了解现状。
  2. 边构建边记录——在设计组件的同时记录它更容易。
  3. 优先覆盖而非完美——80% 的组件有文档胜于 10 个组件 100% 完善。