Brandkit

WCAG-verificeret DTCG design-token fundament (farve, type, afstand, theme.css) fra en brief

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

Testet · Virker ★ 8.8/10

Brandkit — WCAG-verificeret DTCG design-token fundament (farve, type, afstand, theme.css) fra en brief

Hvad det gør

Genererer et 3-lags DTCG design-token system (fra primitiv til semantisk til komponent) fra en brand brief: OKLCH farveforløb, skalaer for type/afstand/radius/skygge/bevægelse, lys og mørk, plus en enkelt theme.css. Leveres med Python-validatorer, der kontrollerer, at token-aliasser løses, og at påkrævede tekst/handling/kant-par opfylder WCAG 2.2 AA i både lys og mørk tilstand. Udløses når brugeren ønsker et nyt brand- eller designfundament, en ny palet og typesystem, eller et tema-kompatibelt token-kit til et produkt.

Testrapport

SKILL.md fundet i .claude/skills/brandkit/; mappen indeholder kun SKILL.md, dens refererede scripts/ + taste/ + CLAUDE.md findes i repo-roden (alle HTTP 200). Til OUTPUT opfandt jeg en brief (fintech opsparingsapp, teal, "pålidelig") og skrev to DTCG colors.json: en naiv baseline (action=#14b8a6 med hvid tekst, text.secondary=gray-400) og en færdigheds-følgende (action=teal-700, gray-600 secondary, designed dark overrides). Kørte repoets egne scripts/validate_contrast.py mod hver: baseline = 7 påkrævede WCAG-par FEJLER (exit 1: link 2.49:1, on-action 2.49:1, secondary 2.54:1, border 2.54:1, plus 3 i mørk); færdigheds-følgende = alle 12 påkrævede par BESTÅR i lys OG mørk (exit 0). Installeret i en midlertidig HOME og bekræftet, at validate_contrast.py og validate_tokens.py begge afslutter med exit 0 fra færdighedsmappen. SKILL.md er ærlig ("feel still benefits from human review"); sikkerhed ren.

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

Kommandoer og eksempelprompter

/brandkitWCAG-verificeret DTCG design-token fundament (farve, type, afstand, theme.css) fra en brief

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

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 hele rapporten →