Brandkit

Fondazione di token di design DTCG verificata WCAG (colore, tipo, spaziatura, theme.css) da un brief

di plugin87 · plugin87/ux-ui-agent-skills

Promosso ★ 8.8/10

Brandkit — Fondazione di token di design DTCG verificata WCAG (colore, tipo, spaziatura, theme.css) da un brief

Cosa fa

Genera un sistema di token di design DTCG a 3 livelli (dal primitivo al semantico al componente) da un brief di brand: scale di colore OKLCH, scale di tipo/spaziatura/raggio/ombra/movimento, chiaro e scuro, più un singolo theme.css. Include validatori Python che verificano la risoluzione degli alias dei token e che le coppie testo/azione/bordo richieste soddisfino WCAG 2.2 AA sia in modalità chiara che scura. Si attiva quando l'utente desidera un brand o una fondazione di design da zero, una nuova palette e sistema di tipi, o un kit di token tematico per un prodotto.

Rapporto di test

SKILL.md si trova in .claude/skills/brandkit/; la directory contiene solo SKILL.md, i suoi scripts/ + taste/ + CLAUDE.md referenziati si trovano nella root del repository (tutti HTTP 200). Per l'OUTPUT ho inventato un brief (fintech savings app, teal, "affidabile") e ho scritto due colors.json DTCG: una baseline ingenua (action=#14b8a6 con testo bianco, text.secondary=gray-400) e una che segue la skill (action=teal-700, gray-600 secondary, override scuri progettati). Ho eseguito scripts/validate_contrast.py del repository contro ciascuno: baseline = 7 coppie WCAG richieste FALLITE (exit 1: link 2.49:1, on-action 2.49:1, secondary 2.54:1, border 2.54:1, più 3 in scuro); skill-following = tutte le 12 coppie richieste SUPERATE in chiaro E scuro (exit 0). Installato in una HOME temporanea e confermato che validate_contrast.py e validate_tokens.py escono entrambi con 0 dalla directory della skill. SKILL.md è onesto ("la sensazione beneficia ancora della revisione umana"); sicurezza pulita.

Testato il: 2026-07-21 · Claude Code 2.x (agent harness)

Installazione

git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills.git /tmp/brandkit-src
mkdir -p ~/.claude/skills/brandkit
cp -R /tmp/brandkit-src/.claude/skills/brandkit/. ~/.claude/skills/brandkit/
cp -R /tmp/brandkit-src/scripts /tmp/brandkit-src/taste /tmp/brandkit-src/tokens /tmp/brandkit-src/CLAUDE.md ~/.claude/skills/brandkit/
# The brandkit dir upstream is SKILL.md only; its body references scripts/, taste/, tokens/ and
# CLAUDE.md that live at the REPO ROOT, so the two extra cp lines co-locate them into the skill dir.
# Verifiers are pure-stdlib Python3 (no pip deps): run from ~/.claude/skills/brandkit with
#   python3 scripts/validate_tokens.py && python3 scripts/validate_contrast.py && python3 scripts/validate_theme_refs.py
# Alternative whole-repo install (npx scaffolder, lays down the same files in a project): npx ux-ui-agent-skills

Comandi e prompt di esempio

/brandkitFondazione di token di design DTCG verificata WCAG (colore, tipo, spaziatura, theme.css) da un brief

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

Build a brand design system from this brief
Generate a light and dark theme token kit
Create a WCAG-verified color and type system

Rapporto completo →