Apply Aesthetic

Aplikuje pojmenovaný design systém nebo archetyp na vaše UI tokeny, s kontrolou kontrastu

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

Funguje s nastavením ★ 8.4/10

Apply Aesthetic — Aplikuje pojmenovaný design systém nebo archetyp na vaše UI tokeny, s kontrolou kontrastu

Co umí

Řeší zvolený vizuální směr — archetyp (editorial-minimal, brutalist, dark-tech) nebo jeden ze 138 pojmenovaných systémů (apple, stripe, linear, vercel, notion) — do sémantických design tokenů, přemapovává barvy/typ/mezery/rádius/pohyb a znovu ověřuje kontrast WCAG na každém mapovaném páru. Spouští se, když uživatel požádá o to, aby UI vypadalo jako konkrétní značka, nebo chce prémiový/drahý/nespecifický vzhled. Závisí na doprovodných adresářích repozitáře taste/, scripts/, tokens/ a design-systems/, takže musí být nainstalován jako celý repozitář, nikoli pouze složka dovednosti.

Testovací report

Klonován repozitář a vše spuštěno. Frontmatter se parsuje (name+description). Všechny namátkově zkontrolované reference vracejí 200 a provádějí se: scripts/design_systems.py list/search/show a scripts/contrast.py (pouze stdlib python3). Přesně ověřeno tvrzení o "138 pojmenovaných design systémech" (ls design-systems/library = 138). Vytvořeny dva artefakty pro úlohu hero-CTA: základní stylizovaný s výchozími instinkty, poté verze Apple podle dovednosti. Konkrétní měřený rozdíl: základní tlačítko bílé na #007bff SELHÁVÁ WCAG AA (3.98:1), zatímco dodržení kroku 4 kontrastní brány dovednosti posunulo akcent na Apple #0071e3 (bílá 4.70:1 PASS) plus SF Pro Display 56/600 -0.28px, #000000 cinematic canvas a 980px poloměr pilulky oproti generickému Arial/6px/bootstrap-blue. Verdikt nastavení, nikoli průchod: tělo dovednosti odkazuje na cesty v kořeni repozitáře (taste/, scripts/, tokens/, design-systems/), které neexistují uvnitř složky dovednosti, takže naivní instalace pro každou dovednost je rozbitá — musíte mít přítomen celý repozitář.

Testováno: 2026-07-21 · Claude Code 2.x (agent harness)

Instalace

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

Příkazy a ukázkové prompty

/apply-aestheticAplikuje pojmenovaný design systém nebo archetyp na vaše UI tokeny, s kontrolou kontrastu

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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

Kompletní testovací report (anglicky) →