设计令牌

Design Token

样式与 CSS也叫：Design Tokens、设计变量、设计 Token

一句话：把颜色、字号、间距、圆角、阴影等设计决定抽成有名字的变量，让设计稿和各端代码共用同一套规范。

详细解释

设计令牌是设计系统里最小的规范单位：每个设计决定都有名字和值，比如 color.primary = #2563eb、space.4 = 16px、radius.md = 8px。设计稿和各端代码都引用它，改一次就能同步。

令牌通常分两层：基础令牌 描述「有什么」，如 blue-600、gray-100；语义令牌 描述「用在哪」，如 color.text.primary、color.bg.danger。组件只引用语义令牌，换主题时改语义令牌的指向即可。

和 CSS 变量的区别：设计令牌是与技术无关的规范，可以存成 JSON，再生成 CSS 变量、Tailwind 主题配置或移动端代码；CSS 变量只是它在网页上的一种落地形式。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

请先建立设计令牌再写页面：颜色分基础色阶和语义色（文字、背景、边框、成功、错误），间距按 4 的倍数分 8 档，圆角和阴影各 3 档；存成 tokens 文件，生成 CSS 变量和 Tailwind 主题配置，组件只引用语义令牌。