Apply Aesthetic

Aplica un sistema de diseño o arquetipo nombrado a tus tokens de UI, con contraste verificado

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

Funciona con configuración ★ 8.4/10

Apply Aesthetic — Aplica un sistema de diseño o arquetipo nombrado a tus tokens de UI, con contraste verificado

Qué hace

Resuelve una dirección visual elegida — un arquetipo (editorial-minimal, brutalist, dark-tech) o uno de 138 sistemas nombrados (apple, stripe, linear, vercel, notion) — en tokens de diseño semánticos, reasignando color/tipo/espaciado/radio/movimiento y volviendo a verificar el contraste WCAG en cada par mapeado. Se activa cuando el usuario pide que una UI se sienta como una marca específica, o quiere un aspecto premium/caro/no genérico. Depende de los directorios complementarios taste/, scripts/, tokens/ y design-systems/ del repositorio, por lo que debe instalarse como el repositorio completo, no solo la carpeta de la habilidad.

Informe de la prueba

Se clonó el repositorio y se ejecutó todo. El frontmatter se analiza (name+description). Todas las referencias verificadas devuelven 200 y se ejecutan: scripts/design_systems.py list/search/show, y scripts/contrast.py (solo stdlib python3). Se verificó la afirmación de "138 named design systems" exactamente (ls design-systems/library = 138). Se construyeron dos artefactos para una tarea de hero-CTA: una línea base estilizada con instintos predeterminados, luego la versión de Apple siguiendo la habilidad. Diferencia medida concreta: el botón de línea base blanco sobre #007bff FALLA WCAG AA (3.98:1), mientras que seguir la puerta de contraste del paso 4 de la habilidad llevó el acento al #0071e3 de Apple (blanco 4.70:1 PASS) más SF Pro Display 56/600 -0.28px, #000000 cinematic canvas, y 980px de radio de píldora vs Arial genérico/6px/bootstrap-blue. Veredicto 'setup', no 'pass': el cuerpo de la habilidad referencia rutas de la raíz del repositorio (taste/, scripts/, tokens/, design-systems/) que no existen dentro de la carpeta de la habilidad, por lo que una instalación ingenua por habilidad está rota — debe tener el repositorio completo presente.

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/apply-aesthetic-src
mkdir -p ~/.claude/skills
cp -R /tmp/apply-aesthetic-src/.claude/skills/apply-aesthetic ~/.claude/skills/apply-aesthetic
# NOT self-contained. The SKILL.md body references repo-ROOT resources by relative path:
#   taste/aesthetic-systems.md, taste/design-taste.md, taste/motion-choreography.md,
#   scripts/design_systems.py, scripts/contrast.py, tokens/*.json, design-systems/library/<name>/DESIGN.md
# Copying only the skill folder (above) leaves every one of those paths unresolved.
# To actually USE it, work inside the cloned repo so the sibling dirs resolve:
#   cd /tmp/apply-aesthetic-src
#   python3 scripts/design_systems.py list        # browse the 138 systems
#   python3 scripts/design_systems.py show apple   # get the DESIGN.md path
#   python3 scripts/contrast.py "#f5f5f7" "#000000"  # verify a mapped pair
# Requires: python3 (scripts run stdlib-only; no pip deps observed).

Comandos y prompts de ejemplo

/apply-aestheticAplica un sistema de diseño o arquetipo nombrado a tus tokens de UI, con contraste verificado

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

Make this design feel like Stripe's product
Apply an editorial-minimal aesthetic to the site
Give this UI a premium, non-generic feel

Informe completo →