brandfy-design-tokens

Name: brandfy-design-tokens
Author: promovaweb

github.com/promovaweb设计与 UI13160 次安装2 周前更新

代码仓库

关于 brandfy-design-tokens

brandfy-design-tokens 是一项根据已批准配色生成设计令牌文件的技能。它推导色彩系列和语义令牌，并检查浅色与深色模式下的对比度和色彩和谐关系。

主要功能

01按和谐方案生成色彩系列
02生成 CSS、JSON 和 Tailwind 输出
03创建浅色与深色模式取值
04检查 WCAG 对比度与色彩和谐
05记录获准的色彩组合

适用场景

01根据已批准配色生成设计令牌
02为浅色和深色主题准备色彩令牌
03检查文本与控件的对比度

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/promovaweb/brandfy --skill brandfy-design-tokens

安装后在 Claude Code 中输入/brandfy-design-tokens确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/

openai.yaml

references/

circulo-cromatico.md

token-schema.md

scripts/

generate-tokens.mjs

gerar-paleta-cromatica.mjs

详细介绍

生成设计令牌

操作协议

**计划与进度：**规划和谐方案、语义角色、色阶、对比度、生成和测试。
**真实来源：**读取已批准的调色板、 circulo-cromatico.md 和 token-schema.md。
**范围与幂等性：**生成派生文件，不修改 .brandfy/palette.json。
**验证：**运行生成器，并检查文本、控件、焦点和状态的 WCAG 对比度，以及 primary 与 accent 之间的色相角度关系。
**最终摘要：**记录文件、使用的和谐方案、批准的组合和拒绝的组合。

流程

根据 circulo-cromatico.md，选择一种和谐方案（单色、类似色、互补色、分裂互补色、三角色或四角色），以及 primary 的基准色相。

根据色环生成 families.primary 和 families.accent，而不是手动选择每个色系的 11 个色阶：

node <caminho-da-skill>/scripts/gerar-paleta-cromatica.mjs \
  --hue <matiz-base 0-360> \
  --scheme <esquema> \
  --output .brandfy/palette.json

补全 .brandfy/palette.json，添加 families.neutral 和 light/dark 模式。

运行：

node <caminho-da-skill>/scripts/generate-tokens.mjs \
  --input .brandfy/palette.json \
  --output brand

生成 brand/global.css、brand/tokens.json、 brand/tailwind-theme.js、brand/accessibility.md，并在 palette.json 声明了 harmony 时生成 brand/color-harmony.md。
为每个色系保留数值色阶，并为背景、表面、文本、次要文本、边框、强调色、焦点、成功、警告和错误设置语义令牌。
为 :root 和 .dark 定义不同的值。
记录允许的组合。不要仅凭外观推断可读性。

将 $brandfy-tipografia-web 生成的 CSS 导入 global.css，并在 light 和 dark 模式下打开页面。字体缺失时，应触发有文档说明的回退机制，且不得改变层级或隐藏文本。

专家推理

区分源颜色、色阶和语义功能。primary 与 accent 之间的关系源自色环，而非孤立尝试：在 harmony 中声明方案，可让这种关系变得可验证、可复现。根据元素之间的关系选择令牌，而非依据孤立的数值。检查对比度、状态区分、焦点、色觉缺陷、打印效果以及 light 和 dark 模式之间的一致性。品牌色可以保留在 Logo 中，但不一定适合用于文本或控件。

支持 Markdown

登录后评论