mcpField
B
brandfy-design-tokens

brandfy-design-tokens

github.com/promovawebDesign & UI13160 installsUpdated 2w ago
Repository

About brandfy-design-tokens

brandfy-design-tokens is a design skill for generating token files from an approved palette. It derives color families and semantic tokens, then checks contrast and color harmony across light and dark modes.

Key features

  1. 01Builds color families from a harmony scheme
  2. 02Generates CSS, JSON, and Tailwind outputs
  3. 03Creates light and dark mode values
  4. 04Checks WCAG contrast and color harmony
  5. 05Documents permitted color combinations

Use cases

  1. 01Generating design tokens from an approved palette
  2. 02Preparing color tokens for light and dark themes
  3. 03Reviewing text and control contrast

Install

Copy the command and run it in a terminal.

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

After installing, type/brandfy-design-tokensin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
circulo-cromatico.md
token-schema.md
scripts/
generate-tokens.mjs
gerar-paleta-cromatica.mjs

Details

From the project README

Gerar design tokens

Protocolo operacional

  • Plano e progresso: planejar esquema de harmonia, funções semânticas, escalas, contraste, geração e testes.
  • Fontes de verdade: ler a paleta aprovada, circulo-cromatico.md e token-schema.md.
  • Escopo e idempotência: gerar arquivos derivados sem alterar .brandfy/palette.json.
  • Validação: executar o gerador e conferir contraste WCAG para texto, controles, foco e estados, além da relação angular de matiz entre primary e accent.
  • Resumo final: registrar arquivos, esquema de harmonia usado, combinações aprovadas e combinações recusadas.

Fluxo

  1. Escolher, com base em circulo-cromatico.md, um esquema de harmonia (monocromática, análoga, complementar, split-complementar, tríade ou tetrádica) e o matiz-base de primary.

  2. Gerar families.primary e families.accent a partir do círculo cromático, em vez de escolher os 11 tons de cada família manualmente:

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

  3. Completar .brandfy/palette.json com families.neutral e os modos light/dark.

  4. Executar:

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

  5. Gerar brand/global.css, brand/tokens.json, brand/tailwind-theme.js, brand/accessibility.md e, quando palette.json declarar harmony, brand/color-harmony.md.

  6. Manter escalas numéricas para cada família e tokens semânticos para fundo, superfície, texto, texto secundário, borda, acento, foco, sucesso, aviso e erro.

  7. Definir valores distintos para :root e .dark.

  8. Documentar combinações permitidas. Não inferir legibilidade somente pela aparência.

Importe o CSS produzido por $brandfy-tipografia-web em global.css e abra uma página nos modos light e dark. Uma fonte ausente deve acionar o fallback documentado sem mudar a hierarquia ou esconder um texto.

Raciocínio do especialista

Separar cor de origem, escala e função semântica. A relação entre primary e accent nasce do círculo cromático, não de tentativa isolada: um esquema declarado em harmony torna essa relação verificável e reprodutível. Escolher tokens pela relação entre elementos, não pelo valor isolado. Verificar contraste, diferenciação de estados, foco, daltonismo, impressão e coerência entre light e dark. Uma cor de marca pode permanecer no logo e ser inadequada para texto ou controle.

Comments

Markdown supported