Apply Aesthetic

Anvender et navngivet designsystem eller arketype på dine UI-tokens, kontrastkontrolleret

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

Virker med opsætning ★ 8.4/10

Apply Aesthetic — Anvender et navngivet designsystem eller arketype på dine UI-tokens, kontrastkontrolleret

Hvad det gør

Omsætter en valgt visuel retning – en arketype (editorial-minimal, brutalist, dark-tech) eller et af 138 navngivne systemer (apple, stripe, linear, vercel, notion) – til semantiske designtokens, ommapper farve/type/afstand/radius/bevægelse og genbekræfter WCAG-kontrast på hvert mappet par. Udløses, når brugeren beder om at få en UI til at føles som et specifikt brand, eller ønsker et premium/dyrt/ikke-generisk look. Afhænger af repoets medfølgende taste/, scripts/, tokens/ og design-systems/-mapper, så det skal installeres som hele repoet, ikke kun færdighedsmappen.

Testrapport

Klonede repoet og kørte alt. Frontmatter parses (name+description). Alle stikprøvekontrollerede referencer returnerer 200 og udføres: scripts/design_systems.py list/search/show, og scripts/contrast.py (kun stdlib python3). Verificerede påstanden om "138 navngivne designsystemer" nøjagtigt (ls design-systems/library = 138). Byggede to artefakter til en hero-CTA-opgave: en baseline stylet med standardinstinkter, derefter den færdigheds-følgende Apple-version. Konkret målt forskel: baseline-knap hvid-på-#007bff FAILS WCAG AA (3.98:1), mens efterfølgende færdighedens trin-4 kontrastport drev accenten til Apples #0071e3 (hvid 4.70:1 PASS) plus 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': færdighedens indhold refererer til repo-root-stier (taste/, scripts/, tokens/, design-systems/), der ikke eksisterer inde i færdighedsmappen, så en naiv per-færdighedsinstallation er brudt — hele repoet skal være til stede.

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

Installation

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 navngivet designsystem eller arketype på dine UI-tokens, kontrastkontrolleret

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen 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

Læs hele rapporten →