SuperAPI AI 工具集

theming-tokens

设计与创作

查看项目

更新于 10-26 16:21

技能介绍

theming-tokens 是一个用于构建设计系统主题令牌的技能,适用于创建主题系统、颜色变量或设计系统令牌的场景。其核心是三层令牌层次结构:底层为原始值令牌(Primitives),如 --blue-500、--gray-100、--radius-lg;中层为语义令牌(Semantic),按用途命名,如 --color-primary、--color-surface、--color-text;顶层为组件令牌(Component),面向具体组件,如 --button-bg、--card-border、--input-focus。

该技能说明包含各部分令牌的代码示例。原始令牌示例使用 OKLCH 颜色(如 --blue-500: oklch(55% 0.20 260))、圆角(--radius-lg、--radius-2xl)和基于 4px 网格的间距(--space-4、--space-6)。语义令牌示例将背景、前景、主色和表面色映射到原始令牌,并提供玻璃效果变量(--glass-bg、--glass-border)以及深色模式覆盖(.dark 中重设背景、前景与玻璃效果)。组件令牌示例包括 --button-height、--button-radius、--card-radius、--card-padding,并引用语义或原始令牌。

技能还给出 Tailwind v4 @theme 的配置示例,通过 @import "tailwindcss" 与 @theme 块定义 --color-primary 和 --font-display。验证清单要求确认:已定义原始令牌(颜色、间距、圆角)、语义令牌已映射到原始令牌、存在深色模式覆盖、已为 Tailwind v4 配置 @theme、组件中无硬编码十六进制值。最佳实践建议使用三层层次、将语义映射到原始值、定义深色模式覆盖、颜色使用 OKLCH;避免硬编码十六进制值、跳过语义层、遗漏深色模式、混用色彩空间。

资料还描述了一个强制性的代理工作流:在实现前使用 TeamCreate 启动 3 个代理,分别用 fuse-ai-pilot:explore-codebase 查找已有令牌、用 fuse-ai-pilot:research-expert 研究 Tailwind v4 @theme 模式,之后运行 fuse-ai-pilot:sniper 进行验证。该工作流的适用前提与具体配置暂未提供。