Design System Starter 说明文档

# 设计系统启动器 一个全面的 Claude Code 技能，用于创建和演进生产就绪的设计系统，包含设计令牌、组件架构、无障碍指南和文档模板。 ## 目的 此技能帮助你构建稳健、可扩展的设计系统，确保产品在视觉上的一致性和卓越的用户体验。它为以下方面提供结构化指导： - 定义和组织设计令牌（颜色、排版、间距、阴影） - 使用原子设计方法论构建组件架构 - 实现主题化和深色模式支持 - 确保符合 WCAG 2.1 Level AA 无障碍标准 - 创建全面的组件文档 - 建立可维护的设计系统工作流 ## 何时使用 当你需要执行以下操作时使用此技能： - 从零开始创建新的设计系统 - 在多个产品间标准化 UI 模式 - 实现设计令牌以保持样式一致性 - 使用原子设计原则构建组件结构 - 确保符合无障碍标准 (WCAG 2.1 AA) - 设置主题和深色模式支持 - 有效地记录组件库 - 从不一致的 UI 模式迁移到统一系统 ## 工作原理 该技能围绕五个核心领域提供全面的指导和模板： ### 1. 设计令牌 用于定义基础设计决策的结构化 JSON 模板： - **颜色系统**：原始颜色（50-950 等级）和语义令牌（品牌、文本、背景、反馈） - **排版**：字体族、字号、字重、行高、字间距 - **间距**：基于 4px 或 8px 单位的一致刻度 - **圆角**：可复用的圆角值 - **阴影**：用于表现深度的海拔系统 ### 2. 组件架构 用于构建 UI 的原子设计方法论： - **原子 (Atoms)**：原始组件（按钮、输入框、标签、图标） - **分子 (Molecules)**：简单组合（表单域、搜索栏、卡片） - **组织 (Organisms)**：复杂组合（导航、模态框、产品网格） - **模板 (Templates)**：页面布局 - **页面 (Pages)**：带有真实内容的特定实例 ### 3. 无障碍 (Accessibility) 内置 WCAG 2.1 Level AA 合规性： - 颜色对比度验证（普通文本 4.5:1，大文本 3:1） - 键盘导航模式 - ARIA 属性和屏幕阅读器支持 - 焦点管理 ### 4. 主题化 实现浅色/深色模式的多种方法： - CSS 自定义属性 - Tailwind CSS 深色模式工具类 - Styled Components ThemeProvider ### 5. 文档 组件标准