设计系统构建指南：从 Token 到组件库

设计 Token 是什么？

设计 Token 是设计决策的最小单位，它将颜色、间距、字体等视觉属性抽象为有语义的变量。例如 --color-primary 比 #0070f3 更有表达力，因为前者传递了"这是品牌主色"的意图。

Token 的三个层级

• 原始 Token（Primitive）：具体的值，如 blue-500: #0070f3
• 语义 Token（Semantic）：有意义的引用，如 color-action-primary: blue-500
• 组件 Token（Component）：特定组件的变量，如 button-bg: color-action-primary

Tailwind CSS v4 的 Token 系统

Tailwind CSS v4 原生支持 CSS 自定义属性作为设计 Token，通过 @theme 指令将 CSS 变量映射为 Tailwind 工具类，实现了真正的"写一次，处处生效"。

组件文档化

好的设计系统必须有完善的文档。推荐使用 Storybook 进行组件展示，配合 Chromatic 做视觉回归测试，确保每次更新都不破坏已有的视觉效果。