design-system-starter

# 设计系统启动器 构建稳健、可扩展的设计系统，确保视觉一致性和卓越的用户体验。 --- ## 快速开始 只需描述你的需求： 为我的 React 应用创建一个支持深色模式的设计系统 就是这样。该技能将提供令牌、组件和无障碍指南。 --- ## 触发器 | 触发器 | 示例 | |---------|---------| | 创建设计系统 | "为我的应用创建一个设计系统" | | 设计令牌 | "设置颜色和间距的设计令牌" | | 组件架构 | "使用原子设计设计组件结构" | | 无障碍 | "确保我的组件符合 WCAG 2.1 标准" | | 深色模式 | "实现支持深色模式的主题化" | --- ## 快速参考 | 任务 | 输出 | |------|--------| | 设计令牌 | 颜色、排版、间距、阴影 JSON | | 组件结构 | 原子设计层级（原子、分子、组织） | | 主题化 | CSS 变量或 ThemeProvider 设置 | | 无障碍 | 符合 WCAG 2.1 AA 的模式 | | 文档 | 包含属性、示例、无障碍说明的组件文档 | --- ## 捆绑资源 - `references/component-examples.md` - 完整的组件实现 - `templates/design-tokens-template.json` - W3C 设计令牌格式 - `templates/component-template.tsx` - React 组件模板 - `checklists/design-system-checklist.md` - 设计系统审计检查清单 --- ## 设计系统哲学 ### 什么是设计系统？ 设计系统不仅仅是一个组件库，它是一系列内容的集合： 1. **设计令牌**：基础设计决策（颜色、间距、排版） 2. **组件**：可复用的 UI 构建块 3. **模式**：通用的 UX 解决方案和组合 4. **指南**：规则、原则和最佳实践 5. **文档**：如何有效使用所有内容 ### 核心原则 **1. 一致性优于创造性** - 可预测的模式减少认知负荷 - 用户只需学习一次，即可到处应用 - 设计师和开发者使用同一种语言 **2. 默认无障碍** - 最低符合 WCAG 2.1 Level AA 标准 - 内置键盘导航 - 从一开始就支持屏幕阅读器 **3. 可扩展且易于维护** - 设计令牌支持全局变更 - 组件组合减少重复 - 版本控制和弃用策略 **4. 对开发者友好** - 清晰的 API 契约 - 全面的文档 - 易于集成和自定义 --- ## 设计令牌 设计令牌是原子设计的...