跳转到内容

设计与体验 · DEFINED TERM

Design Token 设计变量

用命名变量集中表达颜色、间距、字号和圆角等设计决策。

你可能会这样说“主色只改一个 token,全站按钮和链接同步更新。”

VISUAL EXAMPLE

先看懂它怎么工作

界面状态示例

等待操作

MECHANISM

运行机制

  1. 定义语义变量
  2. 组件引用
  3. 主题映射
  4. 集中调整

USE WHEN

适合这样用

设计系统、主题和多端一致性

NOT FOR

不要这样理解

不要在每个组件里重复写无法追踪的魔法数值

TELL YOUR AGENT

可直接发给 Agent

请按“Design Token 设计变量”的概念处理这个需求:主色只改一个 token,全站按钮和链接同步更新。。先说明实现边界,再给出可检查的结果。

ACCEPTANCE

怎么确认它真的做好了

命名表达用途而非具体颜色,组件不绕开 token,主题对比度合格

OFFICIAL SOURCES

官方来源