用途：帮助建立一致、可维护、可扩展的 UI 基础，覆盖 Web 与移动端的设计系统架构。适用时机包括创建设计令牌（颜色、字体、间距）、实现明暗主题切换、构建多品牌主题系统、架构一致的组件库，以及建立从设计到代码的工作流（Figma 到 React）。
工作流：先定义原始调色板（核心颜色、字体族、间距刻度），再基于意图创建语义别名（如 text-primary 而非 gray-900），然后用语义令牌构建组件级变量（如 btn-bg），最后通过 CSS 变量、React Context 或 shadcn/ui、cva 等库实现。
令牌层级分三层：第一层原始令牌为与设计意图无关的原始值，如 --color-blue-500: #3b82f6、--space-4: 1rem；第二层语义令牌赋予上下文含义并引用原始令牌，如 --text-primary: var(--color-gray-900)、--interactive-primary: var(--color-blue-500)；第三层组件令牌引用语义令牌，如 --button-bg: var(--interactive-primary)。
主题基础设施（React）：将主题偏好持久化到 localStorage 以避免错误主题闪烁；监听 window.matchMedia("(prefers-color-scheme: dark)") 获取系统偏好；在 html 或 body 元素上切换 .dark 类。
组件架构：使用 class-variance-authority（CVA）管理组件变体，示例中定义 buttonVariants，包含 intent（primary、secondary）与 size（sm、md）变体及默认变体。
最佳实践：按用途命名（text-danger 优于 text-red）；原始令牌保持私有，组件中不要直接用 gray-50，而用 surface-subtle；可用 Style Dictionary 等工具将令牌转换为 iOS/Android 所需格式。资源部分提供完整令牌示例、React 主题提供者与 CVA 组件模式。限制与具体安装命令、收费信息暂未提供。