design-system-starter

Design System Starter 是一个用于创建和演进设计系统的技能，旨在帮助团队构建健壮、可扩展的设计系统，确保视觉一致性和良好的用户体验。

用途

该技能用于从零开始创建或逐步演进设计系统，覆盖设计令牌、组件架构、无障碍指南和文档模板。它适合需要统一视觉语言、提升组件复用性、并确保无障碍合规的前端或设计团队。

主要能力

• 设计令牌：生成颜色、排版、间距、边框圆角、阴影等令牌，支持原始色板（如 50-950 色阶）和语义化颜色（品牌、文本、背景、反馈）。
• 组件架构：基于原子设计方法（原子、分子、有机体、模板、页面）组织组件，提供 Button、Input、FormField、Card、Modal 等示例。
• 主题与深色模式：支持 CSS 变量、Tailwind CSS 深色模式、Styled Components ThemeProvider 等实现方式。
• 无障碍指南：遵循 WCAG 2.1 AA 标准，涵盖颜色对比度、键盘导航、ARIA 属性、屏幕阅读器支持。
• 文档模板：提供组件文档模板，包含用途、用法、变体、Props 表、无障碍说明和示例。
• 捆绑资源：references/component-examples.md（完整组件实现）、templates/design-tokens-template.json（W3C 设计令牌格式）、templates/component-template.tsx（React 组件模板）、checklists/design-system-checklist.md（审计清单）。

使用方式

用户只需描述需求即可触发，例如“为我的 React 应用创建支持深色模式的设计系统”。技能会根据触发词（如“创建设计系统”“设计令牌”“组件架构”“无障碍”“深色模式”）提供相应的令牌、组件和无障碍指南。

适用场景

• 新项目需要建立统一的设计系统。
• 现有项目需要重构或扩展设计系统。
• 需要确保组件符合 WCAG 2.1 AA 无障碍标准。
• 需要实现深色模式或主题切换。
• 需要为团队提供组件文档和迁移指南。

限制

资料中未提供关于收费、价格、平台限制或具体效果保证的信息。该技能主要面向 React 技术栈，但设计令牌和原则可适用于其他框架。具体实施细节需参考捆绑资源中的模板和示例。