Brandkit

WCAG-verifierad DTCG design-token-grund (färg, typ, avstånd, theme.css) från en brief

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

Testad · Fungerar ★ 8.8/10

Brandkit — WCAG-verifierad DTCG design-token-grund (färg, typ, avstånd, theme.css) från en brief

Vad den gör

Genererar ett 3-nivåers DTCG design-token-system (från primitiv till semantisk till komponent) från en varumärkesbrief: OKLCH färgskalor, typ-/avstånds-/radie-/skugg-/rörelseskalor, ljust och mörkt läge, plus en enda theme.css. Levereras med Python-validatorer som kontrollerar att token-alias löses och att nödvändiga text-/åtgärds-/kantpar uppfyller WCAG 2.2 AA i både ljust och mörkt läge. Utlöses när användaren vill ha en helt ny varumärkes- eller designgrund, en ny palett och typsystem, eller ett tema-anpassningsbart token-kit för en produkt.

Testrapport

SKILL.md hittades på .claude/skills/brandkit/; katalogen innehåller endast SKILL.md, dess refererade scripts/ + taste/ + CLAUDE.md finns i repots rot (alla HTTP 200). För OUTPUT uppfann jag en brief (fintech savings app, teal, "trustworthy") och skrev två DTCG colors.json: en naiv baslinje (action=#14b8a6 med vit text, text.secondary=gray-400) och en som följde skickligheten (action=teal-700, gray-600 secondary, designade dark overrides). Körde repots egna scripts/validate_contrast.py mot varje: baslinje = 7 nödvändiga WCAG-par MISSLYCKADES (exit 1: link 2.49:1, on-action 2.49:1, secondary 2.54:1, border 2.54:1, plus 3 in dark); skicklighetsföljande = alla 12 nödvändiga par GODKÄNDES i light OCH dark (exit 0). Installerades i en tillfällig HOME och bekräftade att validate_contrast.py och validate_tokens.py båda avslutades med 0 från skicklighetskatalogen. SKILL.md är ärlig ("feel still benefits from human review"); säkerhetsmässigt ren.

Testad: 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

Kommandon och exempelprompter

/brandkitWCAG-verifierad DTCG design-token-grund (färg, typ, avstånd, theme.css) från en brief

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →