SuperAPI AI 工具集

design-tokens

设计与创作

查看项目

更新于 10-16 03:43

技能介绍

用途:在项目中生成、扩展或审计 DTCG($type/$value)格式的设计令牌,遵循三层架构:primitive(原始值,不直接使用)、semantic(用途别名)、component(组件作用域)。项目以 .claude/skills/_ux-ui-shared/tokens/*.json 为令牌唯一来源,已包含 blue-primary 主题(blue-600 #2563eb、暗色覆盖、经 WCAG 验证)。

主要能力:维护 colors、typography、spacing、shadows、borders、breakpoints、motion、gradients、opacity、blur、sizing、states、theming 等令牌文件;生成新调色板时产出 11 个 OKLCH 色阶,并校验 500 在白色上对比度 ≥ 4.5:1(文本)、600 ≥ 3:1(UI);多品牌/密度场景使用 theming.json。

使用方式:先读 CLAUDE.md 的 Token System 与 Color/Typography/Spacing Guidelines(4px 基准、Major Third 比例、OKLCH 调色板生成、暗色模式在语义层);再读现有令牌文件以匹配结构;编辑令牌后编译到 app/globals.css(见 token-build)。构建 UI 时交由 shadcn-ui-design 处理(语义 Tailwind 工具类、shadcn CLI,不 fork)。校验命令:python3 .claude/skills/_ux-ui-shared/scripts/validate_tokens.py(检查 JSON 有效性与别名解析);对比度校验可用 a11y-audit 技能或 .claude/skills/_ux-ui-shared/scripts/contrast.py。

限制:输出为 DTCG JSON,每个令牌需保留 $description,引用而非硬编码;具体收费、平台与更多细节暂未提供。