Brandkit

Base de tokens de diseño DTCG verificada por WCAG (color, tipo, espaciado, theme.css) a partir de un brief

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

Probado · Funciona ★ 8.8/10

Brandkit — Base de tokens de diseño DTCG verificada por WCAG (color, tipo, espaciado, theme.css) a partir de un brief

Qué hace

Genera un sistema de tokens de diseño DTCG de 3 niveles (de primitivo a semántico a componente) a partir de un brief de marca: rampas de color OKLCH, escalas de tipo/espaciado/radio/sombra/movimiento, claro y oscuro, además de un único theme.css. Incluye validadores Python que verifican que los alias de tokens se resuelven y que los pares de texto/acción/borde requeridos cumplen con WCAG 2.2 AA tanto en modo claro como oscuro. Se activa cuando el usuario desea una marca o base de diseño desde cero, una nueva paleta y sistema de tipografía, o un kit de tokens temático para un producto.

Informe de la prueba

SKILL.md se encuentra en .claude/skills/brandkit/; el directorio solo contiene SKILL.md, sus scripts/ + taste/ + CLAUDE.md referenciados residen en la raíz del repositorio (todos HTTP 200). Para la SALIDA, inventé un brief (aplicación de ahorro fintech, color teal, "confiable") y escribí dos colors.json DTCG: una línea base ingenua (action=#14b8a6 con texto blanco, text.secondary=gray-400) y una que sigue la habilidad (action=teal-700, gray-600 secondary, anulaciones oscuras diseñadas). Ejecuté scripts/validate_contrast.py del propio repositorio contra cada uno: línea base = 7 pares WCAG requeridos FALLAN (exit 1: link 2.49:1, on-action 2.49:1, secondary 2.54:1, border 2.54:1, más 3 en oscuro); siguiendo la habilidad = los 12 pares requeridos PASAN en claro Y oscuro (exit 0). Instalado en un HOME temporal y confirmado que validate_contrast.py y validate_tokens.py ambos salen con 0 desde el directorio de la habilidad. SKILL.md es honesto ("aún se beneficia de la revisión humana"); seguridad limpia.

Probado el: 2026-07-21 · Claude Code 2.x (agent harness)

Instalación

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

Comandos y prompts de ejemplo

/brandkitBase de tokens de diseño DTCG verificada por WCAG (color, tipo, espaciado, theme.css) a partir de un brief

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

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

Informe completo →