Apply Aesthetic

Tillämpar ett namngivet designsystem eller arketyp på dina UI-tokens, kontrastkontrollerat

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

Fungerar med konfiguration ★ 8.4/10

Apply Aesthetic — Tillämpar ett namngivet designsystem eller arketyp på dina UI-tokens, kontrastkontrollerat

Vad den gör

Omvandlar en vald visuell riktning — en arketyp (editorial-minimal, brutalist, dark-tech) eller ett av 138 namngivna system (apple, stripe, linear, vercel, notion) — till semantiska designtokens, ommappar färg/typ/avstånd/radie/rörelse och återverifierar WCAG-kontrasten på varje mappat par. Utlöses när användaren ber att få ett UI att kännas som ett specifikt varumärke, eller vill ha ett premium/dyrt/icke-generiskt utseende. Beror på repots medföljande kataloger taste/, scripts/, tokens/ och design-systems/, så den måste installeras som hela repot, inte bara färdighetsmappen.

Testrapport

Klonade repot och körde allt. Frontmatter parsas (name+description). Alla punktkontrollerade referenser returnerar 200 och exekverar: scripts/design_systems.py list/search/show, och scripts/contrast.py (endast stdlib python3). Verifierade påståendet om "138 namngivna designsystem" exakt (ls design-systems/library = 138). Byggde två artefakter för en hero-CTA-uppgift: en baslinje stiliserad med standardinstinkter, sedan den färdighetsföljda Apple-versionen. Konkret uppmätt skillnad: baslinjeknappen vit-på-#007bff FAILS WCAG AA (3.98:1), medan att följa färdighetens steg-4 kontrastgrind drev accenten till Apples #0071e3 (vit 4.70:1 PASS) plus SF Pro Display 56/600 -0.28px, #000000 cinematic canvas, och 980px pillradie kontra generisk Arial/6px/bootstrap-blue. Bedömning setup, inte pass: färdighetstexten refererar till repo-rot-sökvägar (taste/, scripts/, tokens/, design-systems/) som inte existerar inuti färdighetsmappen, så en naiv per-färdighet-installation är trasig — hela repot måste finnas.

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

Kommandon och exempelprompter

/apply-aestheticTillämpar ett namngivet designsystem eller arketyp på dina UI-tokens, kontrastkontrollerat

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →