Apply Aesthetic

Stosuje nazwany system projektowy lub archetyp do tokenów UI, sprawdzony pod kątem kontrastu

Autor: plugin87 · plugin87/ux-ui-agent-skills

Działa po konfiguracji ★ 8.4/10

Apply Aesthetic — Stosuje nazwany system projektowy lub archetyp do tokenów UI, sprawdzony pod kątem kontrastu

Co robi ten skill

Przekształca wybrany kierunek wizualny — archetyp (editorial-minimal, brutalist, dark-tech) lub jeden ze 138 nazwanych systemów (apple, stripe, linear, vercel, notion) — w semantyczne tokeny projektowe, mapując ponownie kolor/typ/odstępy/promień/ruch i ponownie weryfikując kontrast WCAG dla każdej zmapowanej pary. Uruchamia się, gdy użytkownik prosi o nadanie interfejsowi użytkownika wyglądu konkretnej marki lub chce uzyskać wygląd premium/drogi/niestandardowy. Zależy od towarzyszących katalogów repozytorium taste/, scripts/, tokens/ i design-systems/, więc musi być zainstalowany jako całe repozytorium, a nie tylko folder umiejętności.

Raport z testu

Sklonowano repozytorium i uruchomiono wszystko. Frontmatter parsuje (name+description). Wszystkie sprawdzone odniesienia zwracają 200 i wykonują się: scripts/design_systems.py list/search/show oraz scripts/contrast.py (tylko stdlib python3). Zweryfikowano dokładnie twierdzenie o „138 nazwanych systemach projektowych” (ls design-systems/library = 138). Zbudowano dwa artefakty dla zadania hero-CTA: punkt odniesienia stylizowany domyślnymi instynktami, a następnie wersję Apple zgodną z umiejętnością. Konkretna zmierzona różnica: przycisk bazowy biały na #007bff NIE SPEŁNIA WCAG AA (3.98:1), podczas gdy zastosowanie bramki kontrastu z kroku 4 umiejętności doprowadziło akcent do Apple's #0071e3 (biały 4.70:1 PASS) plus SF Pro Display 56/600 -0.28px, #000000 cinematic canvas i promień pigułki 980px w porównaniu do generycznego Arial/6px/bootstrap-blue. Werdykt: konfiguracja, nie zaliczenie: treść umiejętności odwołuje się do ścieżek w katalogu głównym repozytorium (taste/, scripts/, tokens/, design-systems/), które nie istnieją w folderze umiejętności, więc naiwna instalacja dla pojedynczej umiejętności jest uszkodzona — musisz mieć całe repozytorium.

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

Instalacja

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

Komendy i przykładowe prompty

/apply-aestheticStosuje nazwany system projektowy lub archetyp do tokenów UI, sprawdzony pod kątem kontrastu

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

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

Pełny raport →