SuperAPI AI 工具集

design-tokens

设计与创作

查看项目

更新于 10-16 05:41

技能介绍

用途:从 siteConfig.brand 和 siteConfig.fonts 生成完整设计系统,包括 Tailwind 配置与 CSS 变量。该技能不定义颜色或字体,只把它们展开为完整令牌体系。siteConfig 是唯一来源,颜色来自 brand(primary、secondary、accent、dark、light、surface),字体来自 fonts(heading、body)。

主要能力:由 brand.primary 生成 primary-50 至 primary-950 完整色阶;由 brand.accent 生成 accent、accent-hover、accent-light;由 brand.dark 生成 neutral-50 至 neutral-900;由 brand.light 生成浅色区块背景;由 brand.secondary 生成次要元素令牌;由 brand.surface 生成卡片/表面背景;由 fonts.heading 与 fonts.body 生成字体栈并带系统回退。输出 tokens_generated、tailwind_config(tailwind.config.mjs)、css_variables(src/styles/tokens.css)和 design_token_verdict(PASS/WARN/FAIL)。

使用方式:读取 siteConfig.brand 与 siteConfig.fonts,按 HSL 明度偏移生成色阶,写出 tailwind.config.mjs 与 tokens.css。组件应使用语义令牌(primary-、accent、neutral-),工具类令牌仅供内部映射。

限制与校验:组件中出现原始颜色、任意间距、任意字号、任意阴影或任意圆角均判 FAIL;对比度不达 WCAG AA 判 FAIL;令牌无法追溯到 siteConfig 判 FAIL;令牌作用域错误或缺少可选色阶判 WARN。正文文本对比度至少 4.5:1,大文本与 UI 组件至少 3:1。需避免白字配中等色调 accent、半透明文字、浅灰字配白底等常见失败模式。具体安装命令与平台信息暂未提供。