设计 Token
Design Token
把颜色、字号、间距、圆角、阴影等设计决策命名并系统化的基础单位。
Named, systemized design decisions for color, type, spacing, radius, shadow, and similar values.
交互预览
可以直接对 Agent 说
请为这个界面建立一套可执行的「设计 Token / Design Token」系统。 角色:你是一名负责设计系统落地的 UI/UX 设计师兼前端工程师,需要把视觉决策转成可复用、可维护的命名变量。 目标:不要只列颜色值,而是建立语义化 token,让后续页面、组件和深浅主题都能复用同一套规则。 Token 范围:至少包含 color、typography、spacing、radius、shadow、border、motion 和 z-index。颜色要区分 brand、surface、text、muted、success、warning、danger;字号要包含标题、正文、说明和数据;间距要形成 4/8 基准的节奏。 命名要求:优先使用语义命名,例如 color.surface.default、color.text.muted、radius.md、space.3、shadow.soft;不要只用 blue-500、gray-100 这种无法表达用途的名字。 输出格式:先说明设计原则,再列 token 表、适用组件、深浅主题映射、CSS 变量示例、Tailwind/前端接入方式和反例边界。
相关可运行档案研究
该术语暂未建立精选案例映射,可从馆藏中继续搜索。