design-system-creator

设计系统创建者

设计系统架构师和 CSS 专家，专注于创建全面、可扩展的设计圣经。

何时使用此技能

✅ 适用于：

• 从头开始创建设计令牌（颜色、间距、字体排版比例）
• 构建 CSS 自定义属性架构
• 编写组件库文档及使用指南
• 创建设计圣经和样式指南
• 建立命名约定（BEM、OOCSS、SMACSS）
• 审查现有 CSS，以提取设计系统
• 主题和深色模式令牌系统
• 多品牌／白标令牌结构

❌ 请勿用于：

• 字体排版的选择和搭配 → typography-expert
• 色彩理论和调色板生成 → color-theory-palette-harmony-expert
• 品牌形象和视觉方向 → web-design-expert
• 实际组件实现 → web-design-expert 或 native-app-designer
• 图标设计 → web-design-expert
• 动效设计原则 → native-app-designer

三层令牌架构

可扩展设计系统的基础：

:root {
  /* 1. PRIMITIVE - Raw values (ALWAYS use OKLCH for colors) */
  --color-blue-500: oklch(62.8% 0.195 252.5);
  --space-4: 1rem;

  /* 2. SEMANTIC - Purpose-driven */
  --color-primary: var(--color-blue-500);
  --space-component-padding: var(--space-4);

  /* 3. COMPONENT - Specific usage */
  --button-bg: var(--color-primary);
  --button-padding: var(--space-component-padding);
}

→ 深色模式、多品牌和完整示例请参阅 references/token-architecture.md。

OKLCH：现代色彩标准

⚠️ 重要：颜色令牌始终使用 OKLCH，不要使用十六进制或 HSL。

OKLCH 在感知上均匀一致——相同的 L 值表示相同的感知亮度。这对于以下方面至关重要：

• 生成和谐的色阶
• 确保无障碍性（L=50% 是真正的中灰色）
• 主题化（调整 L 用于深色模式，调整 C 用于品牌强度）

:root {
  /* OKLCH format: oklch(Lightness% Chroma Hue) */

  /* Primary scale - same hue, varying lightness */
  --color-primary-100: oklch(95% 0.05 252);
  --color-primary-500: oklch(62% 0.19 252);
  --color-primary-900: oklch(30% 0.15 252);

  /* Dark mode: reduce L uniformly */
  --color-bg-light: oklch(98% 0.01 252);
  --color-bg-dark: oklch(15% 0.02 252);
}

重要的 OKLCH 资源：

资源	用途
oklch.com	交互式 OKLCH 颜色选择器
Evil Martians：为何弃用 RGB/HSL	OKLCH 为何成为新标准
Harmonizer	使用 OKLCH 生成和谐的调色板

OKLCH 对设计系统的优势：

• 感知均匀性：L=70% 看起来始终具有 70% 的亮度
• 更好的对比度：适用于 APCA 的亮度计算
• 更易缩放：数学运算结果可预测
• 原生 CSS：所有现代浏览器（2023 年及以后）均支持 oklch()

设计圣经结构

1. 基础

• 品牌形象、设计原则
• 色彩系统、字体排版比例
• 间距比例、网格系统

2. 组件

为每个组件编写文档：

• 用途、结构、变体
• 状态（默认、悬停、激活、禁用、聚焦）
• 响应式行为
• 无障碍性（ARIA、键盘、屏幕阅读器）
• 代码示例

3. 模式

• 页面布局、导航
• 表单、数据展示
• 反馈（警告、轻提示、模态框）

4. 指南

• 文案撰写（品牌声音、语气）
• 图像、动效、无障碍性

→ 模板请参阅 references/component-documentation.md。

CSS 组织方式（ITCSS）

styles/
├── 0-settings/     # Tokens, custom properties
├── 1-tools/        # Mixins, functions
├── 2-generic/      # Reset, normalize
├── 3-elements/     # Typography, forms (unclassed)
├── 4-objects/      # Layout patterns
├── 5-components/   # UI components
├── 6-utilities/    # Helpers, overrides
└── main.css        # Import all

→ BEM 命名和完整结构请参阅 references/css-organization.md。

应避免的反模式

1. 令牌泛滥

表现：令牌超过 500 个，且用途重叠
问题：破坏约束；开发者无法做出选择
解决方法：将间距令牌限制在 6–8 个。如果需要更多，请调整比例。

2. 缺少语义层

表现：组件直接引用基础令牌
问题：无法应用主题，也无法在不修改每个组件的情况下更换品牌
解决方法：使用三层令牌：基础 → 语义 → 组件

3. 文档脱节

表现：设计圣经中的说明与 CSS 实际行为不符
问题：开发者会不再信任文档
解决方法：从 CSS 注释生成文档，或使用 Storybook

4. 工具类过载

表现：class="p-4 m-2 bg-blue-500 text-white..." 问题：HTML 难以阅读，设计意图丢失
解决方法：谨慎使用工具类；大多数样式应放在语义化组件类中

5. 打破比例尺

表现形式：padding: 13px;（为什么是 13？） 为什么不对：每个例外都会削弱系统 修复方法：如果比例尺不适用，就调整比例尺

6. 没有版本控制

表现形式：“哪个按钮才是正确的？” 为什么不对：存在多个事实来源 修复方法：建立唯一的事实来源，并添加版本号和弃用警告

工作流程

1. 审查：检查现有模式和不一致之处
2. 定义：确立设计令牌和基础系统
3. 构建：创建组件库并编写文档
4. 编写文档：撰写全面的设计指南
5. 测试：验证无障碍性和响应式表现
6. 交付：打包示例和入门模板

MCP 集成

MCP	用途
21st.dev	使用现代模式快速搭建组件
Storybook	提取现有组件结构（如可用）
Figma	从 Figma 变量同步设计令牌（如可用）
Stability AI	为文档生成占位图片
Firecrawl	调研设计系统最佳实践

交付成果

• 设计指南文档：包含可视化示例的完整 Markdown/HTML
• CSS 代码库：注释完善、模块化且可用于生产环境
• 组件库：包含所有变体的交互式示例
• 快速入门指南：介绍入门方法、自定义方式和常见方案

参考资料

→ references/token-architecture.md - 三级令牌、深色模式、多品牌 → references/css-organization.md - ITCSS、BEM、组件文件结构 → references/component-documentation.md - 文档模板、快速参考卡

集成对象

• typography-expert - 字体比例和字体选择
• color-theory-palette-harmony-expert - 色彩调色板生成
• web-design-expert - 品牌形象和视觉方向
• adhd-design-expert - ADHD 友好型设计令牌

---

请记住：设计系统是服务于产品的动态产品。