Apply Aesthetic

Wendet ein benanntes Designsystem oder Archetyp auf Ihre UI-Tokens an, kontrastgeprüft

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

Funktioniert mit Setup ★ 8.4/10

Apply Aesthetic — Wendet ein benanntes Designsystem oder Archetyp auf Ihre UI-Tokens an, kontrastgeprüft

Was es kann

Löst eine gewählte visuelle Richtung – einen Archetyp (editorial-minimal, brutalist, dark-tech) oder eines von 138 benannten Systemen (apple, stripe, linear, vercel, notion) – in semantische Design-Tokens auf, ordnet Farbe/Typ/Abstand/Radius/Bewegung neu zu und überprüft den WCAG-Kontrast für jedes zugeordnete Paar erneut. Wird ausgelöst, wenn der Benutzer eine UI wie eine bestimmte Marke gestalten möchte oder einen Premium-/teuren/nicht-generischen Look wünscht. Hängt von den begleitenden taste/, scripts/, tokens/ und design-systems/ Verzeichnissen des Repos ab, daher muss es als gesamtes Repo installiert werden, nicht nur der Skill-Ordner.

Testbericht

Das Repo geklont und alles ausgeführt. Frontmatter wird geparst (name+description). Alle stichprobenartig überprüften Referenzen liefern 200 und werden ausgeführt: scripts/design_systems.py list/search/show und scripts/contrast.py (nur stdlib python3). Die Behauptung "138 named design systems" wurde exakt verifiziert (ls design-systems/library = 138). Zwei Artefakte für eine Hero-CTA-Aufgabe erstellt: eine Baseline, die mit Standardinstinkten gestaltet wurde, und dann die Skill-konforme Apple-Version. Konkreter gemessener Unterschied: Baseline-Button weiß auf #007bff FÄLLT WCAG AA (3.98:1), während die Befolgung des Kontrast-Gates von Schritt 4 des Skills den Akzent auf Apples #0071e3 (weiß 4.70:1 PASS) plus SF Pro Display 56/600 -0.28px, #000000 cinematic canvas und 980px Pillenradius gegenüber generischem Arial/6px/bootstrap-blue lenkte. Urteil: Setup, nicht Pass: Der Skill-Körper referenziert Repo-Root-Pfade (taste/, scripts/, tokens/, design-systems/), die nicht im Skill-Ordner existieren, daher ist eine naive Pro-Skill-Installation fehlerhaft – das gesamte Repo muss vorhanden sein.

Getestet am: 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).

Befehle & Beispiel-Prompts

/apply-aestheticWendet ein benanntes Designsystem oder Archetyp auf Ihre UI-Tokens an, kontrastgeprüft

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →