Apply Aesthetic
Applique un système de design ou un archétype nommé à vos tokens d'interface utilisateur, avec vérification du contraste
Fonctionne avec configuration
Ce que fait
Transforme une direction visuelle choisie — un archétype (éditorial-minimal, brutaliste, dark-tech) ou l'un des 138 systèmes nommés (apple, stripe, linear, vercel, notion) — en tokens de design sémantiques, remappant couleur/type/espacement/rayon/mouvement et revérifiant le contraste WCAG sur chaque paire mappée. Se déclenche lorsque l'utilisateur demande de donner à une interface utilisateur l'impression d'une marque spécifique, ou souhaite un aspect premium/cher/non générique. Dépend des répertoires compagnons taste/, scripts/, tokens/ et design-systems/ du dépôt, il doit donc être installé comme l'ensemble du dépôt, et non le dossier de la compétence seul.
Rapport de test
Le dépôt a été cloné et tout a été exécuté. Le frontmatter est analysé (name+description). Toutes les références vérifiées ponctuellement renvoient 200 et s'exécutent : scripts/design_systems.py list/search/show, et scripts/contrast.py (python3 stdlib-only). La revendication des "138 systèmes de design nommés" a été vérifiée exactement (ls design-systems/library = 138). Deux artefacts ont été créés pour une tâche de hero-CTA : une version de base stylisée avec des instincts par défaut, puis la version Apple suivant la compétence. Différence mesurée concrète : le bouton de base blanc sur #007bff ÉCHOUE au WCAG AA (3.98:1), tandis que suivre la porte de contraste de l'étape 4 de la compétence a conduit l'accent à #0071e3 d'Apple (blanc 4.70:1 PASS) plus SF Pro Display 56/600 -0.28px, #000000 cinematic canvas, et un rayon de pilule de 980px contre Arial/6px/bootstrap-blue générique. Verdict 'setup', pas 'pass' : le corps de la compétence référence des chemins à la racine du dépôt (taste/, scripts/, tokens/, design-systems/) qui n'existent pas dans le dossier de la compétence, donc une installation naïve par compétence est cassée — vous devez avoir l'ensemble du dépôt présent.
Testé le: 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).
Commandes et exemples de prompts
/apply-aestheticApplique un système de design ou un archétype nommé à vos tokens d'interface utilisateur, avec vérification du contraste
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
Make this design feel like Stripe's productApply an editorial-minimal aesthetic to the siteGive this UI a premium, non-generic feel