Apply Aesthetic

Applica un sistema di design o archetipo nominato ai tuoi token UI, con verifica del contrasto

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

Richiede configurazione ★ 8.4/10

Apply Aesthetic — Applica un sistema di design o archetipo nominato ai tuoi token UI, con verifica del contrasto

Cosa fa

Risolve una direzione visiva scelta — un archetipo (editorial-minimal, brutalist, dark-tech) o uno dei 138 sistemi nominati (apple, stripe, linear, vercel, notion) — in token di design semantici, rimappando colore/tipo/spaziatura/raggio/movimento e riverificando il contrasto WCAG su ogni coppia mappata. Si attiva quando l'utente chiede di far sembrare un'interfaccia utente come un brand specifico, o desidera un aspetto premium/costoso/non generico. Dipende dalle directory taste/, scripts/, tokens/ e design-systems/ del repository, quindi deve essere installato come l'intero repository, non solo la cartella della skill.

Rapporto di test

Clonato il repository e eseguito tutto. Il frontmatter viene analizzato (name+description). Tutti i riferimenti verificati restituiscono 200 ed eseguono: scripts/design_systems.py list/search/show, e scripts/contrast.py (solo python3 stdlib). Verificata esattamente l'affermazione "138 sistemi di design nominati" (ls design-systems/library = 138). Costruiti due artefatti per un compito hero-CTA: una baseline stilizzata con istinti predefiniti, quindi la versione Apple guidata dalla skill. Differenza misurata concreta: il pulsante baseline bianco su #007bff FALLISCE WCAG AA (3.98:1), mentre seguendo il gate di contrasto del passo 4 della skill ha portato l'accento a #0071e3 di Apple (bianco 4.70:1 PASS) più SF Pro Display 56/600 -0.28px, #000000 cinematic canvas, e raggio pillola 980px vs Arial/6px/bootstrap-blue generico. Verdetto 'setup', non 'pass': il corpo della skill fa riferimento a percorsi nella root del repo (taste/, scripts/, tokens/, design-systems/) che non esistono all'interno della cartella della skill, quindi un'installazione ingenua per skill è rotta — è necessario avere l'intero repo presente.

Testato il: 2026-07-21 · Claude Code 2.x (agent harness)

Installazione

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).

Comandi e prompt di esempio

/apply-aestheticApplica un sistema di design o archetipo nominato ai tuoi token UI, con verifica del contrasto

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

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

Rapporto completo →