Apply Aesthetic

Anvender et navngitt designsystem eller arketype på dine UI-tokens, kontrastkontrollert

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

Krever oppsett ★ 8.4/10

Apply Aesthetic — Anvender et navngitt designsystem eller arketype på dine UI-tokens, kontrastkontrollert

Hva den gjør

Løser en valgt visuell retning – en arketype (editorial-minimal, brutalist, dark-tech) eller et av 138 navngitte systemer (apple, stripe, linear, vercel, notion) – til semantiske designtokens, remapper farge/type/avstand/radius/bevegelse og re-verifiserer WCAG-kontrast på hvert kartlagte par. Utløses når brukeren ber om å få et UI til å føles som et spesifikt merke, eller ønsker et premium/dyrt/ikke-generisk utseende. Avhenger av repoets medfølgende taste/, scripts/, tokens/ og design-systems/-kataloger, så det må installeres som hele repoet, ikke bare ferdighetsmappen.

Testrapport

Klonet repoet og kjørte alt. Frontmatter parses (name+description). Alle stikkprøvekontrollerte referanser returnerer 200 og utføres: scripts/design_systems.py list/search/show, og scripts/contrast.py (kun stdlib python3). Verifiserte påstanden om "138 navngitte designsystemer" nøyaktig (ls design-systems/library = 138). Bygget to artefakter for en hero-CTA-oppgave: en baseline stylet med standardinstinkter, deretter den ferdighetsstyrte Apple-versjonen. Konkret målt forskjell: baseline-knapp hvit-på-#007bff FEILER WCAG AA (3.98:1), mens etterfølgende av ferdighetens trinn-4 kontrastport drev aksenten til Apples #0071e3 (hvit 4.70:1 PASS) pluss SF Pro Display 56/600 -0.28px, #000000 cinematic canvas, og 980px pille-radius vs generisk Arial/6px/bootstrap-blue. Dommen er setup, ikke pass: ferdighetsteksten refererer til repo-rotstier (taste/, scripts/, tokens/, design-systems/) som ikke eksisterer inne i ferdighetsmappen, så en naiv per-ferdighet-installasjon er ødelagt – du må ha hele repoet til stede.

Testet på: 2026-07-21 · Claude Code 2.x (agent harness)

Installer

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

Kommandoer og eksempelprompter

/apply-aestheticAnvender et navngitt designsystem eller arketype på dine UI-tokens, kontrastkontrollert

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

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

Full rapport →