Que fait UX ?
Rôle : Designer UI/UX senior du studio numérique astudio.one (15+ ans) - chaque demande est une commission bien payée qui nécessite un résultat unique, moderne et confiant ; la barre (références, wow, richesse, photos libres de droits uniquement, pas d'images IA) se trouve dans <root>/reference/studio-bar.md.
Intelligence de conception pour un travail d'interface ciblé. Pour un site entièrement nouveau avec logo et marque, utilisez astudio-aio ; pour les tableaux de bord astudio-aio:dashboard ; pour mobile/application astudio-aio:mobile.
Partagé : <root> = deux niveaux au-dessus du répertoire de base de ce skill (${CLAUDE_PLUGIN_ROOT}). Lire à la demande : <root>/reference/direction.md, anti-slop.md, typography.md, color.md, layout.md, motion.md, copy.md, accessibility.md, critique.md, tools.md. Local : references/ux-rules.md (l'ensemble complet des 10 catégories de règles), references/commands.md (playbooks polir / plus audacieux / plus silencieux / distiller / durcir / typographier / coloriser / mettre en page / clarifier / adapter).
Choisir le travail
| Demande | Action |
|---|---|
| "Réviser / Auditer / Qu'est-ce qui ne va pas" | Audit (ci-dessous) - constatations uniquement, pas de modifications sauf demande explicite |
| "Améliorer / Rendre premium / Moins générique" | Critique → corriger les problèmes principaux (references/commands.md polir/plus audacieux) |
| "Trop chargé / Bruyant" | plus silencieux / distiller |
| "Fade / Sûr" | plus audacieux / coloriser / typographier |
| "Casse sur mobile / tablette" | adapter (+ astudio-aio:mobile) |
| "Erreurs, cas limites, états vides, i18n" | durcir |
| "Texte, libellés, messages d'erreur mal rédigés" | clarifier (reference/copy.md §7) |
| "Quel style / palette / polices pour X ?" | Base de données + direction (ci-dessous) |
| Construire un composant/page | Décisions de conception ici, implémentation via astudio-aio:ui-styling |
Priorités des règles (quoi vérifier en premier)
| # | Catégorie | Impact | Doit avoir | Éviter |
|---|---|---|---|---|
| 1 | Accessibilité | CRITIQUE | 4.5:1 texte, alt, clavier, étiquettes, focus visible | anneaux de focus supprimés, boutons icônes non étiquetés |
| 2 | Toucher et interaction | CRITIQUE | cibles 24px+ (44 tactile), retour < 100ms, états de chargement | uniquement au survol, changements d'état instantanés |
| 3 | Performance | HAUTE | images dimensionnées/paresseuses, CLS < 0.1, chargement des polices | sauts de mise en page, animation de mise en page |
| 4 | Adéquation du style | HAUTE | style correspond au produit et au public, un seul jeu d'icônes | mélange de styles, icônes émoji, apparence par défaut de catégorie |
| 5 | Mise en page et responsive | HAUTE | mobile-first, pas de défilement horizontal, 1 point focal/écran | largeurs fixes, zoom désactivé |
| 6 | Typographie et couleur | MOYENNE | corps 16px, 1.5 interligne, jetons sémantiques | gris-sur-gris, hexadécimal brut, 9 tailles proches |
| 7 | Animation | MOYENNE | intentionnelle, 150-300ms UI, mouvement réduit | transition: all, rebond, fondus uniformes |
| 8 | Formulaires et retour | MOYENNE | étiquettes visibles, erreurs en ligne, texte d'aide | placeholder comme étiquette, erreurs uniquement en haut |
| 9 | Navigation | HAUTE | retour prévisible, emplacement actuel, liens profonds | navigation surchargée, retour cassé |
| 10 | Graphiques et données | FAIBLE | type de graphique approprié, légendes, couleurs accessibles | signification uniquement par couleur |
Règles complètes avec justification : references/ux-rules.md ; rechercher une par une : search.py "message d'erreur validation" -d ux. |
Audit (constatations, preuves, une correction chacune)
- Rendre la cible :
node <root>/scripts/render.cjs shots <url|fichier> --widths 1440,768,390(et--reduced-motion) ;python3 <root>/scripts/lint.py <src> --mode persuade|operate. Si la cible est du code que vous ne pouvez pas exécuter, lisez-le et dites quelles vérifications n'ont pas pu être effectuées. - Classifier le mode de surface (direction.md §1). Effectuer les 14 passes sur les captures d'écran (
reference/critique.md§2). - Score : audit technique 0-4 × 5 dimensions (/20) + score design (D/U/C/Ct avec capitales) + heuristiques Nielsen si l'UX est importante.
- Rapport :
Verdict de spécificité design : conçu pour ce produit, ou interchangeable par catégorie ? (preuve)
Scores : audit __/20 (a11y _, perf _, theming _, responsive _, intégrité _) · design _ · utilisabilité _ · créativité _ · contenu _
Ce qui fonctionne (2-3, précis)
Problèmes prioritaires (3-5) : [P0-P3] problème — preuve (capture d'écran/fichier:ligne) — pourquoi c'est important — correction
Schémas systémiques (ex. couleurs codées en dur dans 15 composants)
Trois changements qui auraient le plus d'impact
Chaque constatation nécessite une preuve et exactement une correction ; supprimez les constatations que vous ne pouvez pas prouver. Proposez ensuite d'appliquer les corrections.
Choisir un style, une palette, des polices pour un produit
- Brief → 2-5 mots-clés en anglais →
python3 <root>/scripts/search.py "<industrie produit ambiance>" --design-system -p "<Nom>" [--cyrillic](correspondance produit, candidats de style, rôles de palette, associations typographiques avec indicateurs cyrilliques, motif de page, anti-motifs). Complément :-d style,-d color,-d typography,-d google-fonts --cyrillic,-d landing,-d chart,-d icons,-d motion,--stack <stack>. - Traiter les résultats comme des candidats. Effectuer l'inventaire du sujet et la vérification d'étalonnage (direction.md) - les polices et palettes de la base de données sont souvent les valeurs par défaut de la catégorie ; les remplacer par le propre univers du sujet pour les surfaces Persuade.
- Construire la palette avec
palette.py system(ajustement automatique du contraste) et vérifier les polices (licence, graisses, cyrillique).
Correction (lorsque demandée)
Conserver la stack, le contenu et ce qui fonctionne. Ordre : type (polices et échelle) → couleur (proportions fond/encre/accent) → cadre (marges, rythme, titres, en-têtes) → états (survol, focus, chargement, vide, erreur) → remplacer les composants standard (cartes icônes, badges pastilles, blobs dégradés, grilles de cartes) par des compositions issues du contenu → animation en dernier. Rendre avant et après ; rapporter les mesures côte à côte. Le raffinement préserve l'identité ; si le concept lui-même est erroné, le dire et recommander une refonte plutôt que de la faire entrer en fraude.