返回首页
设计与体验Design Token

设计 Token

把颜色、字号、间距、圆角这些视觉值抽成变量,设计稿和代码用同一套名字。

做什么会用到

  • 01做主题切换(深色模式 / 多品牌):Token 是必备基础
  • 02Figma 和代码总对不上视觉值:引入 Token + 同步插件解决
  • 03独立开发者 / 单人项目:Tailwind 的 theme config 本身就是 Token,不用额外建
  • 04做设计系统的团队:Design Token 是地基,先于组件

想用它怎么问 AI

我的【XXX 项目】用 Tailwind / CSS-in-JS。请帮我抽出一份 Design Token(颜色 / 间距 / 字号 / 圆角 / 阴影),格式直接能贴进 tailwind.config.js。

打个比方

像把墙漆、灯光亮度、窗帘颜色都写进一张标准配色卡,谁装修都照卡来。