SuperAPI AI 工具集

semantic-color

设计与创作

查看项目

更新于 10-16 05:44

技能介绍

semantic-color 是一个语义颜色令牌生成技能,属于 dragoon0x/optik 技能集,可从品牌调色板(或通过 /palette 提供的单一颜色)生成一套完整的语义色令牌。

用途:面向设计系统与前端主题,把品牌色扩展为可直接用于界面的语义令牌,避免逐个手写颜色变量。

主要能力:生成六类令牌。表面类包括 surface、surface-elevated、surface-sunken、surface-overlay;文本类包括 text、text-secondary、text-muted、text-inverse;边框类包括 border、border-strong、border-subtle;强调类包括 accent、accent-hover、accent-pressed、accent-subtle;反馈类包括 danger、danger-subtle、success、success-subtle、warning、warning-subtle、info、info-subtle;交互类包括 focus-ring、disabled、disabled-text。所有令牌均需提供深色模式变体。

使用方式:以技能命令 /semantic-color 调用,输入为品牌调色板,也可先通过 /palette 生成调色板再使用。输出形式为 :root 内的 CSS 自定义属性,并通过 @media (prefers-color-scheme: dark) 提供深色模式覆盖。

适用场景:构建设计系统、主题化前端组件、需要明暗双模式的界面配色。

限制:资料未提供具体定价、平台支持范围、生成数量上限或与其他工具的兼容性说明;除上述令牌类别与 CSS 输出形式外,其他细节暂未提供。