用途
Design System Creation 用于为团队构建完整的设计系统，以实现一致的 UI 开发。它适合在建立设计系统、统一界面规范或跨团队协作时使用。
主要能力
该技能将设计系统划分为三个层次：
- 基础层（Foundation）：颜色、排版、间距、阴影（elevation）。
- 组件层（Components）：按钮、输入框、卡片、导航。
- 模式层（Patterns）：表单、布局、空状态。
基础层——设计令牌
技能提供了以 CSS 变量形式定义的设计令牌示例，涵盖：
- 颜色：主色阶（如 --color-primary-50 至 --color-primary-900），以及语义色（成功、警告、错误）。
- 排版：字体族（--font-sans、--font-mono）与字号阶梯（--text-xs 至 --text-2xl）。
- 间距：以 4px 为基准（--space-1、--space-2、--space-4、--space-8）。
- 阴影：--shadow-sm、--shadow-md、--shadow-lg。
组件文档
技能给出了组件文档模板，以 Button 为例，包含：
- 解剖（Anatomy）：容器（内边距、背景）、标签（文本）、图标（可选）。
- 变体（Variants）：Primary（主要操作）、Secondary（替代操作）、Ghost（弱化操作）。
- 状态（States）：Default、Hover、Active、Disabled、Loading。
- 无障碍（Accessibility）：角色为 button，键盘 Enter/Space 激活，可见焦点环。
组件示例（React）
技能提供了 Button 组件的 React 接口与实现示例，包含 variant、size、loading、disabled 等属性，并在加载时显示 Spinner、设置 aria-busy。
治理（Governance）
- 评审委员会：批准新组件。
- 贡献流程：RFC → 评审 → 实现。
- 版本管理：发布采用语义化版本。
- 弃用：提前 3 个月通知并提供迁移指南。
使用方式
资料未提供具体的安装命令或调用步骤，暂未提供。
适用场景
- 团队需要建立或统一设计系统时。
- 需要为组件编写规范文档时。
- 需要定义设计令牌（颜色、排版、间距、阴影）时。
最佳实践与限制
技能建议：从基础令牌入手；完整记录每个组件；确保符合 WCAG 2.1 AA；从一开始支持深色模式；包含带 do/don't 示例的使用指南。
关于平台支持、收费方式、具体效果等信息，资料未提供，暂未提供。