设计系统创建 design-system-creation

---

名称：设计系统创建 描述： | 创建一个全面的设计系统，包括排版、颜色、组件和文档，用于一致的UI开发。用于建立设计标准、构建组件库或确保跨团队一致性。

关键词：设计令牌、排版、间距、调色板、组件、模式、变量、暗色模式、主题化、CSS变量、可访问性、WCAG、响应式、网格系统、断点、设计比例、语义令牌、组件库、风格指南、文档、Figma、Storybook、品牌一致性、设计原则 许可证：MIT

设计系统创建

为跨团队的UI开发构建全面的设计系统。

设计系统层次

1. 基础：颜色、排版、间距、高度
2. 组件：按钮、输入框、卡片、导航
3. 模式：表单、布局、空状态

基础 - 设计令牌

:root {
  /* 颜色 */
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;

  /* 语义颜色 */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* 排版 */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* 类型比例 */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* 间距（4px基础） */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;

  /* 高度 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

组件文档

## 按钮

### 结构
- 容器（填充、背景）
- 标签（文本）
- 图标（可选）

### 变体
- 主要：主操作
- 次要：替代操作
- 幽灵：微妙操作

### 状态
- 默认、悬停、激活、禁用、加载

### 可访问性
- 角色：按钮
- 键盘：回车/空格激活
- 焦点：可见焦点环

组件示例（React）

接口 ButtonProps {
  变体？: '主要' | '次要' | '幽灵';
  大小？: '小' | '中' | '大';
  加载？: 布尔值;
  禁用？: 布尔值;
  子节点: React.ReactNode;
}

函数 Button({ 变体 = '主要', 大小 = '中', 加载, 禁用, 子节点 }: ButtonProps) {
  return (
    <button
      className={`btn btn-${变体} btn-${大小}`}
      disabled={禁用 || 加载}
      aria-busy={加载}
    >
      {加载 ? <Spinner /> : 子节点}
    </button>
  );
}

治理

• 审查委员会：批准新组件
• 贡献流程：RFC → 审查 → 实施
• 版本控制：发布使用语义版本控制
• 弃用：3个月通知，带有迁移指南

最佳实践

• 从基础令牌开始
• 彻底记录每个组件
• 确保符合WCAG 2.1 AA标准
• 从一开始就支持暗色模式
• 包含使用指南，包括应做/不应做示例