Brandkit

WCAG-ověřený DTCG základ designových tokenů (barva, typ, mezery, theme.css) z briefu

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

Otestováno · Funguje ★ 8.8/10

Brandkit — WCAG-ověřený DTCG základ designových tokenů (barva, typ, mezery, theme.css) z briefu

Co umí

Generuje 3-úrovňový systém designových tokenů DTCG (od primitivních po sémantické až po komponentové) z brand briefu: barevné rampy OKLCH, škály typů/mezer/poloměrů/stínů/pohybů, světlé a tmavé, plus jeden theme.css. Dodává Python validátory, které kontrolují, zda se aliasy tokenů řeší a zda požadované páry text/akce/okraj splňují WCAG 2.2 AA ve světlém i tmavém režimu. Spouští se, když uživatel chce brand nebo designový základ od nuly, novou paletu a typový systém, nebo tématicky přizpůsobitelnou sadu tokenů pro produkt.

Testovací report

SKILL.md nalezen v .claude/skills/brandkit/; adresář obsahuje pouze SKILL.md, jeho odkazované scripts/ + taste/ + CLAUDE.md žijí v kořenovém adresáři repozitáře (vše HTTP 200). Pro OUTPUT jsem vymyslel brief (fintech spořicí aplikace, teal, "trustworthy") a napsal dva DTCG colors.json: naivní základ (action=#14b8a6 s bílým textem, text.secondary=gray-400) a jeden odpovídající dovednosti (action=teal-700, gray-600 secondary, navržené tmavé přepsání). Spustil jsem vlastní scripts/validate_contrast.py repozitáře proti každému: základ = 7 požadovaných WCAG párů FAIL (exit 1: link 2.49:1, on-action 2.49:1, secondary 2.54:1, border 2.54:1, plus 3 v tmavém); odpovídající dovednosti = všech 12 požadovaných párů PASS ve světlém A tmavém (exit 0). Nainstalováno do dočasného HOME a potvrzeno, že validate_contrast.py a validate_tokens.py oba končí s exit 0 z adresáře dovednosti. SKILL.md je upřímný ("feel still benefits from human review"); bezpečnost čistá.

Testováno: 2026-07-21 · Claude Code 2.x (agent harness)

Instalace

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

Příkazy a ukázkové prompty

/brandkitWCAG-ověřený DTCG základ designových tokenů (barva, typ, mezery, theme.css) z briefu

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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

Kompletní testovací report (anglicky) →