SuperAPI AI 工具集

brandfy-design-tokens

设计与创作

查看项目

更新于 10-16 03:49

技能介绍

用途:为网站与系统生成可访问的配色方案和设计令牌,产出 CSS、JSON 与 Tailwind 主题,覆盖 light 与 dark 两种模式。

主要能力:依据色环挑选和谐配色(单色、类似、互补、分裂互补、三角、四角)并确定 primary 基色相;用脚本自动生成 primary 与 accent 色阶,而非手工挑选每个色阶;补齐 neutral 色阶与 light/dark 模式;生成 brand/global.css、brand/tokens.json、brand/tailwind-theme.js、brand/accessibility.md,当 palette.json 声明 harmony 时还生成 brand/color-harmony.md。为各色族保留数值色阶,并提供背景、表面、文本、次级文本、边框、强调、焦点、成功、警告、错误的语义令牌,:root 与 .dark 取不同值。

使用方式:先读取已批准的调色板、circulo-cromatico.md 与 token-schema.md;生成 primary 与 accent 色阶: node <caminho-da-skill>/scripts/gerar-paleta-cromatica.mjs --hue <matiz-base 0-360> --scheme <esquema> --output .brandfy/palette.json 再补齐 families.neutral 与 light/dark,然后执行: node <caminho-da-skill>/scripts/generate-tokens.mjs --input .brandfy/palette.json --output brand 生成过程不修改 .brandfy/palette.json,保持幂等。将生成的 CSS 由 $brandfy-tipografia-web 导入 global.css,并在 light 与 dark 下打开页面核对,字体缺失时触发文档化回退而不改变层级或隐藏文本。

验证与限制:需运行生成器并检查文本、控件、焦点与状态的 WCAG 对比度,以及 primary 与 accent 的色相角关系。不得仅凭外观推断可读性;品牌色可用于标志但可能不适合文本或控件。输出文件、所用和谐方案、批准与拒绝的组合需在最终摘要中记录。其他细节资料暂未提供。