Brandkit

WCAG-verifizierte DTCG Design-Token-Grundlage (color, type, spacing, theme.css) aus einem Briefing

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

Getestet · Funktioniert ★ 8.8/10

Brandkit — WCAG-verifizierte DTCG Design-Token-Grundlage (color, type, spacing, theme.css) aus einem Briefing

Was es kann

Generiert ein dreistufiges DTCG Design-Token-System (von primitiv über semantisch bis zu Komponenten) aus einem Markenbriefing: OKLCH Farbskalen, type/spacing/radius/shadow/motion Skalen, hell und dunkel, plus eine einzelne theme.css. Liefert Python-Validatoren, die prüfen, ob Token-Aliase aufgelöst werden und ob die erforderlichen text/action/border Paare WCAG 2.2 AA sowohl im hellen als auch im dunklen Modus erfüllen. Wird ausgelöst, wenn der Benutzer eine neue Marke oder Designgrundlage, eine neue Farbpalette und ein Schriftsystem oder ein thematisierbares Token-Kit für ein Produkt wünscht.

Testbericht

SKILL.md befindet sich unter .claude/skills/brandkit/; das Verzeichnis enthält nur SKILL.md, die referenzierten scripts/ + taste/ + CLAUDE.md befinden sich im Repo-Root (alle HTTP 200). Für OUTPUT habe ich ein Briefing (Fintech-Spar-App, teal, "vertrauenswürdig") erfunden und zwei DTCG colors.json geschrieben: eine naive Baseline (action=#14b8a6 mit weißem Text, text.secondary=gray-400) und eine Skill-konforme (action=teal-700, gray-600 secondary, entworfene dunkle Overrides). Habe die repo-eigenen scripts/validate_contrast.py gegen jede ausgeführt: Baseline = 7 erforderliche WCAG-Paare FEHLGESCHLAGEN (exit 1: link 2.49:1, on-action 2.49:1, secondary 2.54:1, border 2.54:1, plus 3 im dunklen Modus); Skill-konform = alle 12 erforderlichen Paare BESTANDEN im hellen UND dunklen Modus (exit 0). In ein temporäres HOME installiert und bestätigt, dass validate_contrast.py und validate_tokens.py beide aus dem Skill-Verzeichnis mit exit 0 beendet werden. SKILL.md ist ehrlich ("feel still benefits from human review"); Sicherheit sauber.

Getestet am: 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

Befehle & Beispiel-Prompts

/brandkitWCAG-verifizierte DTCG Design-Token-Grundlage (color, type, spacing, theme.css) aus einem Briefing

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →