Apply Aesthetic

Past een benoemd ontwerpsysteem of archetype toe op uw UI-tokens, met contrastcontrole

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

Werkt met setup ★ 8.4/10

Apply Aesthetic — Past een benoemd ontwerpsysteem of archetype toe op uw UI-tokens, met contrastcontrole

Wat het doet

Lost een gekozen visuele richting op — een archetype (editorial-minimal, brutalist, dark-tech) of een van de 138 benoemde systemen (apple, stripe, linear, vercel, notion) — in semantische ontwerptokens, waarbij kleur/type/spatiëring/radius/beweging opnieuw worden toegewezen en WCAG-contrast opnieuw wordt geverifieerd op elk toegewezen paar. Wordt geactiveerd wanneer de gebruiker vraagt om een UI te laten aanvoelen als een specifiek merk, of een premium/dure/niet-generieke look wil. Afhankelijk van de bijbehorende taste/, scripts/, tokens/ en design-systems/ directories van de repo, dus het moet als de hele repo worden geïnstalleerd, niet alleen de skill-map.

Testrapport

De repo gekloond en alles uitgevoerd. Frontmatter parset (name+description). Alle gecontroleerde referenties retourneren 200 en worden uitgevoerd: scripts/design_systems.py list/search/show, en scripts/contrast.py (alleen stdlib python3). De claim "138 benoemde ontwerpsystemen" exact geverifieerd (ls design-systems/library = 138). Twee artefacten gebouwd voor een hero-CTA-taak: een baseline gestyled met standaard instincten, vervolgens de skill-gevolgde Apple-versie. Concreet gemeten verschil: baseline-knop wit-op-#007bff FAALT WCAG AA (3.98:1), terwijl het volgen van de stap-4 contrastpoort van de skill het accent naar Apple's #0071e3 dreef (wit 4.70:1 PASS) plus SF Pro Display 56/600 -0.28px, #000000 cinematic canvas, en 980px pill radius versus generieke Arial/6px/bootstrap-blue. Oordeel setup, geen pass: de skill-body verwijst naar repo-root-paden (taste/, scripts/, tokens/, design-systems/) die niet bestaan binnen de skill-map, dus een naïeve per-skill-installatie is kapot — de hele repo moet aanwezig zijn.

Getest op: 2026-07-21 · Claude Code 2.x (agent harness)

Installatie

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

Commando's en voorbeeldprompts

/apply-aestheticPast een benoemd ontwerpsysteem of archetype toe op uw UI-tokens, met contrastcontrole

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

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

Volledig rapport (Engels) →