Brandkit

Fondation de jetons de design DTCG vérifiée WCAG (couleur, typographie, espacement, theme.css) à partir d'un brief

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

Testé · Fonctionne ★ 8.8/10

Brandkit — Fondation de jetons de design DTCG vérifiée WCAG (couleur, typographie, espacement, theme.css) à partir d'un brief

Ce que fait

Génère un système de jetons de design DTCG à 3 niveaux (du primitif au sémantique au composant) à partir d'un brief de marque : rampes de couleurs OKLCH, échelles de typographie/espacement/rayon/ombre/mouvement, modes clair et sombre, plus un theme.css unique. Fournit des validateurs Python qui vérifient la résolution des alias de jetons et que les paires texte/action/bordure requises respectent WCAG 2.2 AA en modes clair et sombre. Se déclenche lorsque l'utilisateur souhaite une marque ou une fondation de design à partir de zéro, une nouvelle palette et un nouveau système typographique, ou un kit de jetons thémable pour un produit.

Rapport de test

SKILL.md trouvé à .claude/skills/brandkit/; le répertoire contient uniquement SKILL.md, ses scripts/ + taste/ + CLAUDE.md référencés se trouvent à la racine du dépôt (tous HTTP 200). Pour la SORTIE, j'ai inventé un brief (fintech savings app, teal, "fiable") et écrit deux colors.json DTCG : une base naïve (action=#14b8a6 avec texte blanc, text.secondary=gray-400) et une conforme à la compétence (action=teal-700, gray-600 secondary, avec des overrides sombres conçus). Exécuté scripts/validate_contrast.py du dépôt contre chacun : base = 7 paires WCAG requises ÉCHEC (exit 1: lien 2.49:1, sur-action 2.49:1, secondaire 2.54:1, bordure 2.54:1, plus 3 en sombre) ; conforme à la compétence = toutes les 12 paires requises RÉUSSITE en clair ET sombre (exit 0). Installé dans un HOME temporaire et confirmé que validate_contrast.py et validate_tokens.py sortent tous deux avec 0 depuis le répertoire de la compétence. SKILL.md est honnête ("le ressenti bénéficie toujours d'une révision humaine") ; sécurité propre.

Testé le: 2026-07-21 · Claude Code 2.x (agent harness)

Installation

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

Commandes et exemples de prompts

/brandkitFondation de jetons de design DTCG vérifiée WCAG (couleur, typographie, espacement, theme.css) à partir d'un brief

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

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

Rapport complet →