SuperAPI AI 工具集

design-tokens

设计与创作

查看项目

更新于 10-15 19:52

技能介绍

用途:在命名或组织主题变量时提供规范,处理原始层(primitive)、语义层(semantic)与组件层(component)的划分,以及 CSS 自定义属性、Tailwind 主题配置和多品牌主题。

主要能力:默认采用两层,仅在组件必须偏离其角色且该偏离需保持可主题化时才引入第三层。引用只能单向向下流动:组件读语义、语义读原始,不得向上或跨层。主题与品牌通过重新绑定语义层实现覆盖,不重新声明原始层。生成或按租户产生的令牌需加前缀避免命名冲突。所有覆盖落在同一根级选择器(如 [data-theme]、.dark、[data-brand])。Tailwind v4 中原始色阶放入 @theme,运行时切换用普通自定义属性。

使用方式:新增名称前先阅读项目已有的令牌层(:root 自定义属性、Tailwind v4 @theme 块、JS/TS 主题对象或 Style Dictionary 管线),并沿用其约定,不另建并行令牌文件或第二套切换机制。命名前统计出现次数:一次是值,两次是巧合,三次才是令牌;无障碍关键值(焦点环宽度、最小点击目标)首次使用即令牌化。迁移硬编码值时按值出现频率而非按文件推进。

适用场景:设计系统主题变量命名、多品牌或白标共享组件集、CSS 自定义属性与 Tailwind 工具类名互译、主题切换机制设计。

限制:该技能只决定变量叫什么、属于哪一层;具体颜色取值由颜色相关技能决定,暗色模式消费此处定义的覆盖分层而非自创机制。若问题是“用哪个 oklch 值”,则不属于本技能范围。资料未提供安装命令、收费与平台信息。