Esthétique UI
Intention
Utilisez cette compétence pour rendre le rendu UI web plus professionnel, stable et de qualité produit.
Objectifs par défaut :
- préserver le périmètre de l'artefact demandé par l'utilisateur et l'empreinte du contenu
- produire une composition équilibrée avant d'ajouter de la décoration
- rendre la hiérarchie lisible en un coup d'œil
- garder les couleurs retenues mais d'aspect coûteux
- utiliser les ombres, le flou, la lueur et les reflets uniquement lorsqu'ils clarifient la profondeur
- garder les mouvements courts, fluides et utiles
- rendre les composants précis avant de les rendre stylisés
- garder les états, les mouvements et la profondeur au sein d'un seul système cohérent
Cette compétence est indépendante du framework. Jugez non seulement la composition de la page, mais aussi la précision des composants, le comportement des états, la grammaire du mouvement et la discipline de la profondeur. Menez avec le jugement en design, puis implémentez.
Routage des Tâches
Classez la demande avant d'agir :
- Génération À utiliser lorsque l'utilisateur souhaite une nouvelle page, section ou composant.
- Relecture À utiliser lorsque l'utilisateur souhaite une critique, des constatations ou un diagnostic de pourquoi l'UI semble faible.
- Refactoring À utiliser lorsque l'utilisateur souhaite que l'implémentation existante soit directement réécrite.
- Polissage de Composant À utiliser lorsque la structure est acceptable mais que les contrôles, cartes, tableaux, modales ou superpositions semblent encore génériques ou bon marché.
- Affinage d'État / Mouvement À utiliser lorsque les transitions hover, focus, pressed, selected, loading, success, error ou les transitions semblent bruyantes, faibles ou théâtrales.
- Affinage de Profondeur / Éclairage À utiliser lorsque les ombres, reflets, lueurs, flous ou la séparation en mode sombre nécessitent une discipline plus stricte.
Si la demande mélange relecture et refactoring, diagnostiquez d'abord, puis choisissez la profondeur de réécriture avant de modifier.
Non-Négociables
- Respectez exactement le périmètre demandé : un composant reste un composant, un ensemble de cartes reste un module délimité, une section reste une section, et une page ne devient une page que lorsqu'elle est demandée.
- Décidez de la thèse visuelle avant de toucher à l'implémentation.
- Verrouillez le type d'artefact avant de styliser : ne transformez pas des prompts de cartes, widgets, modales, panneaux ou sections en pages d'accueil ou tableaux de bord complets.
- Faites porter la majeure partie de la qualité par la mise en page, l'espacement et la hiérarchie typographique.
- Préférez le regroupement spatial au cadrage par défaut chaque fois que l'espacement peut porter la relation.
- Traitez « premium » comme de la retenue, de la cohérence et de la précision, pas comme du bruit visuel.
- Utilisez moins de conteneurs, moins d'accents et moins d'idées simultanées.
- Si l'artefact demandé est une page, par défaut, optez pour une composition plein écran qui remplit la largeur de l'écran plutôt qu'un petit canevas centré.
- Pour les pages de type plateforme, marketplace, e-commerce ou portail, utilisez par défaut un squelette de page en pleine largeur et contraignez intentionnellement le contenu intérieur au lieu de piéger toute l'expérience dans un seul panneau centré.
- Par défaut, préservez la densité d'informations et l'empreinte textuelle de l'utilisateur.
- N'ajoutez pas de texte de hero, de paragraphes marketing, de navigation, de pied de page, de sections de fonctionnalités, de badges ou de groupes d'appels à l'action sauf si la demande les exige.
- Gardez les cartes ordinaires concises. Préférez des étiquettes fortes, des valeurs et un texte de support compact plutôt que des blagues inventées.
- Par défaut, préférez des surfaces neutres nettes ou légèrement froides ; n'utilisez pas de crème, beige, ivoire ou blanc cassé chaud comme signal premium automatique.
- Maintenez le polissage des composants subordonné à la composition de la page.
- Traitez les contrôles liés comme des membres d'un même système géométrique et comportemental.
- Gardez les états par défaut visuellement discrets ; réservez une emphase plus forte pour les états d'interaction et sémantiques.
- Préférez des mises en page équilibrées et stables à la tension, l'asymétrie ou la provocation visuelle.
- N'introduisez pas d'asymétrie ou de contraste exagéré simplement pour éviter de paraître standardisé.
- Distinguez l'état sélectionné persistant du retour actif ou pressé transitoire.
- Utilisez la profondeur uniquement lorsqu'elle explique la superposition, la séparation des matériaux ou la mise au point.
- Traitez la lueur comme exceptionnelle, pas structurelle.
- Faites du mobile une mise en page recomposée, pas un desktop compressé.
- Gardez le résultat livrable et maintenable.
Ordre de Priorité
Travaillez dans cet ordre sauf si la tâche nécessite clairement une séquence différente :
- Périmètre demandé et limites de l'artefact
- Composition et équilibre structurel
- Rythme d'espacement et densité d'informations
- Typographie et adéquation du texte
- Façonnage des composants
- États d'interaction et comportement
- Système de couleurs et retenue sémantique
- Indices de profondeur : bordure, ombre, flou, reflet
- Mouvement, retour et transitions
Si la page échoue encore en niveaux de gris, la structure n'est pas résolue.
Workflow
Génération
- Identifiez le type d'artefact demandé et le périmètre strict : composant unique, ensemble de composants, section ou page complète.
- Inférez le rôle, l'audience et la densité dans ce périmètre au lieu de l'étendre.
- Nommez l'impression souhaitée en une courte phrase comme « clarté produit calme », « polissage entreprise » ou « précision silencieuse ».
- Choisissez un bloc primaire stable et des modules de support avant d'écrire le balisage.
- Si la demande concerne une carte ou un composant, utilisez uniquement le canevas environnant minimal nécessaire pour le présenter clairement.
- Préservez l'empreinte textuelle sauf si l'utilisateur demande une conception de contenu. Resserez le libellé si nécessaire, mais n'inventez pas de texte explicatif supplémentaire.
- Si la demande concerne une page, laissez la mise en page extérieure s'étendre sur la fenêtre par défaut au lieu de flotter comme une dalle étroite centrée.
- Pour les pages de plateforme ou e-commerce, développez d'abord le squelette de la page : laissez la navigation, le cadrage hero, les rails de catégories, les zones de campagne et les flux de produits respirer sur la fenêtre avant de mettre en carte les modules individuels.
- Définissez la logique des couleurs : les neutres d'abord, l'accent ensuite.
- Assurez-vous que les métriques, les états et le comportement des composants semblent systématisés avant d'ajouter du polissage.
- N'ajoutez de la profondeur et du mouvement qu'après que la composition statique fonctionne.
- Rendez le comportement desktop et mobile explicite lorsque l'artefact demandé couvre effectivement les deux.
Lisez references/design-principles.md lorsque la direction visuelle est encore vague.
Lisez references/color-system.md lorsque la palette semble forte, plate ou bon marché.
Lisez references/component-aesthetics.md lorsque la demande se concentre sur les contrôles, formulaires, cartes, tableaux ou superpositions.
Lisez references/interaction-states.md lorsque le comportement hover, focus, active, selected, loading, success ou error est important.
Lisez references/motion-principles.md pour la discipline générale du mouvement.
Lisez references/motion-patterns.md lorsque les transitions, le comportement au survol ou les mouvements de révélation nécessitent plus de contrôle.
Lisez references/depth-lighting-system.md lorsque les ombres, les reflets, la lueur, le flou ou la logique d'élévation en mode sombre nécessitent un contrôle plus strict.
Lisez references/style-archetypes.md lorsque l'utilisateur demande une personnalité visuelle plus spécifique.
Relecture
- Commencez par le plus grand échec structurel, pas par les détails CSS.
- Expliquez si le problème est la hiérarchie, la densité, la qualité des composants, le comportement des états, la palette, la profondeur ou le mouvement.
- Liez chaque constatation à la lisibilité, la confiance, la concentration ou la clarté de l'action.
- Préférez des corrections directes à un langage de goût générique.
Utilisez references/review-rubric.md pour structurer les constatations.
Utilisez references/anti-patterns.md lorsque l'UI semble générée par IA ou superficiellement premium.
Utilisez references/color-system.md lorsque la principale faiblesse est la discipline de la palette ou le mauvais usage de l'accent.
Utilisez references/component-aesthetics.md lorsque la principale faiblesse est la qualité des contrôles, cartes, tableaux ou superpositions.
Utilisez references/interaction-states.md lorsque la principale faiblesse est le comportement hover, focus, active, selected, loading ou error.
Utilisez references/motion-principles.md et references/motion-patterns.md lorsque la principale faiblesse est la qualité de l'animation, le timing ou le comportement de retour.
Utilisez references/depth-lighting-system.md lorsque la principale faiblesse est le voile d'ombre, le mauvais usage de la lueur, la superposition faible ou la profondeur en mode sombre.
Refactoring
- Choisissez « polissage léger », « restructuration moyenne » ou « reconstruction complète ».
- Corrigez la mise en page et le regroupement avant les cosmétiques des composants.
- Réduisez le style faible à une structure en niveaux de gris lorsque la hiérarchie n'est pas claire.
- Reconstruisez les métriques des composants et la logique des états avant d'ajouter du polissage.
- Réintroduisez uniquement la couleur, la profondeur et le mouvement dont l'interface a encore besoin.
- Reconstruisez le mobile intentionnellement si la structure desktop ne se traduit pas.
- Indiquez le niveau de réécriture, l'échec principal et la direction souhaitée avant de modifier.
Utilisez references/rewrite-playbook.md avant des changements visuels larges.
Utilisez references/component-aesthetics.md avant des réécritures larges de contrôles ou superpositions.
Utilisez references/interaction-states.md avant de modifier le comportement entre les états.
Utilisez references/color-system.md avant de réécrire une palette bruyante.
Utilisez references/motion-principles.md et references/motion-patterns.md avant d'ajouter ou de simplifier des transitions.
Utilisez references/depth-lighting-system.md avant d'ajouter ou de supprimer de l'élévation, de la lueur ou de la logique de reflet.
Politique Anti-Patrons
Rejetez les sorties qui reposent sur :
- l'inflation de périmètre qui transforme une demande de composant en page complète, squelette de tableau de bord ou mise en page d'accueil
- l'inflation de texte décoratif qui ajoute des descriptions de remplissage, des badges, des statistiques ou des blocs d'appel à l'action non demandés
- les mises en page au niveau de la page piégées dans des coques centrées inutilement étroites sans raison de contenu
- les pages de plateforme ou e-commerce encadrées dans une carte centrée surdimensionnée au lieu d'utiliser un squelette de page pleine largeur
- les mises en page standardisées de hero centré empilé avec grille de cartes
- les mises en page instables ou asymétriques forcées utilisées pour créer de la tension
- les modules de poids égal sans ordre de lecture clair
- trop de surfaces, de traits, de pilules et de rayons
- les neutres crème, beige, ivoire ou blanc cassé chaud utilisés comme raccourci par défaut pour « premium »
- les couleurs d'accent fortes reposant sur des neutres instables
- les états par défaut qui dépensent déjà trop d'emphase
- le comportement hover, pressed ou reveal qui transforme l'interaction en chorégraphie
- les états sélectionnés qui ressemblent à un retour de clic
- la lueur, l'ombre, le flou ou les dégradés utilisés pour simuler la sophistication
- l'animation qui attire l'attention sur elle-même au lieu de guider la perception
- les systèmes de profondeur où tout flotte à la fois
- les traitements visuels forts conçus pour impressionner avant de clarifier
- les mises en page mobiles qui se contentent de réduire les colonnes sans recomposer l'emphase
Lisez references/anti-patterns.md lorsque le résultat semble poli mais reste bon marché.
Auto-Critique
Avant la sortie finale, vérifiez :
- Le résultat est-il resté dans le périmètre demandé par l'utilisateur sans inventer une page autour ?
- La première lecture est-elle évidente en trois secondes ?
- La mise en page semble-t-elle toujours crédible et bien équilibrée sans dégradés ni ombres ?
- S'il s'agit d'une page, la composition occupe-t-elle réellement la largeur de l'écran par défaut ?
- S'il s'agit d'une page de plateforme ou e-commerce, le squelette extérieur s'étend-il sur la fenêtre tandis que seules les zones de contenu intérieur restent contraintes ?
- Le texte est-il resté aussi court que la tâche le permet, en particulier sur les cartes ordinaires ?
- Les neutres sont-ils suffisamment calmes et cohérents pour que la couleur d'accent signifie quelque chose ?
- La palette a-t-elle évité de recourir par défaut à des indices de luxe crémeux ou blanc chaud sans raison de contenu ?
- Les contrôles liés partagent-ils des hauteurs, une logique de remplissage et une discipline de rayon compatibles ?
- Les états par défaut sont-ils suffisamment discrets pour laisser de la place aux états focus, active et error ?
- Les états selected et pressed sont-ils clairement distincts ?
- Les composants ont-ils l'air liés sans avoir tous le même poids ?
- Les ombres et les reflets décrivent-ils la profondeur au lieu de créer du brouillard ?
- Dans une UI sombre, la profondeur vient-elle de la hiérarchie des surfaces et de la définition des bords avant le flou et l'ombre ?
- La lueur est-elle suffisamment rare pour signifier encore quelque chose ?
- Les timings de mouvement semblent-ils contrôlés et brefs ?
- Le mouvement renforce-t-il la logique d'interaction au lieu de devenir une chorégraphie ?
- La composition est-elle restée équilibrée au lieu de chercher à attirer l'attention ?
- La première fenêtre mobile préserve-t-elle le même message ou la même action principale ?
- L'amélioration a-t-elle supprimé le bruit plutôt que d'ajouter plus de style ?
Références
- Règles de design principales :
references/design-principles.md - Règles du système de couleurs :
references/color-system.md - Règles de façonnage des composants :
references/component-aesthetics.md - Règles des états d'interaction :
references/interaction-states.md - Règles de mouvement :
references/motion-principles.md - Règles des motifs de mouvement :
references/motion-patterns.md - Règles de profondeur et d'éclairage :
references/depth-lighting-system.md - Archétypes de style :
references/style-archetypes.md - Motifs d'échec :
references/anti-patterns.md - Structure de relecture :
references/review-rubric.md - Profondeur de réécriture et contrat de sortie :
references/rewrite-playbook.md - Exemples de jugement distillés :
references/distilled-examples.md