design-system

用途：为团队建立可扩展的设计系统，统一设计令牌、主题、组件与文档，使设计与工程共享同一套视觉语言。主要能力：三层令牌层级（原始值>语义>组件），组件只引用语义令牌；通过 data-theme 切换语义令牌实现暗色模式，支持多品牌主题覆盖；Tailwind v4 使用 CSS 内 @theme 块进行 CSS 优先配置；用 CVA 管理变体与尺寸组合，配合 VariantProps 与 cn() 工具；复合组件（如 Modal.Header、Modal.Body）以组合替代配置；基于 Radix 无头组件加 Tailwind 样式，内置可访问性；焦点管理使用 focus-visible:ring-2；通过 prefers-reduced-motion 支持减弱动效；Style Dictionary 将 JSON 令牌输出为 CSS/iOS/Android；Storybook 提供文档与 a11y 审计；治理采用语义化版本。使用方式：按原始值、语义、组件三层组织令牌，组件中引用语义令牌；主题覆盖在语义层通过 CSS 自定义属性完成；在 <head> 注入同步主题脚本防止加载闪烁。适用场景：需要暗色模式、多品牌主题、组件库迁移或可访问性合规的前端项目。限制：资料未提供具体安装命令、价格与平台支持信息；部分工具（如 Style Dictionary、Storybook、Radix）需自行查阅其官方文档。