UI Design Brain
Ce skill fournit une base de connaissances organisée de plus de 60 motifs de composants UI issus de component.gallery et enrichis de bonnes pratiques, de conseils de mise en page et de règles d'utilisation. Il remplace les suppositions génériques par une connaissance réelle des systèmes de design lors de la génération d'interfaces.
Avant d'écrire du code UI, consultez ce skill pour sélectionner les bons composants et suivre leurs bonnes pratiques. Lisez components.md pour la référence complète.
Quand Utiliser Ce Skill
Appliquez-le lorsque l'utilisateur demande de construire, concevoir ou générer :
- Pages web, pages d'atterrissage, sites marketing
- Tableaux de bord SaaS, panneaux d'administration, pages de paramètres
- Formulaires, tableaux de données, structures de navigation
- Modaux, tiroirs, popovers ou motifs de superposition
- Tout composant React, HTML/CSS ou Tailwind UI
Philosophie de Design
Chaque interface générée doit sembler moderne, minimale et prête pour la production — pas comme un modèle.
Principes Fondamentaux
- Retenue plutôt que décoration. Moins d'éléments, hautement raffinés. L'espace blanc est une fonctionnalité.
- La typographie porte la hiérarchie. Associez une police d'affichage distinctive à une police de corps propre. Maximisez le contraste de poids entre les titres et les étiquettes.
- Un seul moment de couleur fort. Palette neutre d'abord (blancs cassés chauds, noirs approchants, tons moyens atténués). Introduisez un accent confiant. Si cela pourrait apparaître sur une affiche ou une couverture de livre, c'est probablement intemporel.
- L'espacement est la structure. Utilisez une grille de 8 px. Des écarts plus serrés regroupent les éléments connexes ; des écarts généreux laissent respirer le contenu héroïque.
- L'accessibilité est non négociable. Contrastes minimaux WCAG AA. Indicateurs de focus. HTML sémantique. Navigation au clavier.
- Pas d'esthétique générique d'IA. Évitez : dégradés violet sur blanc, polices par défaut Inter/Roboto, grilles de cartes uniformément espacées et mises en page standardisées. Chaque interface doit sembler conçue pour son contexte spécifique.
Niveau de Qualité
Le résultat doit correspondre à ce que vous attendriez d'un designer produit senior dans une grande entreprise SaaS :
- Rythme visuel propre avec asymétrie intentionnelle
- Affordances interactives évidentes (états survol, focus, actif)
- Cas limites gracieux (états vides, chargement, erreur)
- Responsive sans artefacts de points de rupture
Flux de Travail
Étape 1 — Identifier les Composants
Lisez la demande de l'utilisateur et déterminez les composants UI nécessaires. Référez-vous à components.md pour trouver chaque composant par son nom ou alias.
Correspondances courantes :
- "navigation" → En-tête, Navigation, Fil d'Ariane, Onglets
- "formulaire" → Formulaire, Champ de texte, Sélecteur, Case à cocher, Bouton radio, Bouton
- "affichage de données" → Tableau, Carte, Liste, Badge, Avatar
- "retour" → Alerte, Toast, Modal, Spinner, Barre de progression, État vide
- "saisie" → Champ de texte, Zone de texte, Sélecteur, Combobox, Sélecteur de date, Téléchargement de fichier, Curseur
- "superposition" → Modal, Tiroir, Popover, Infobulle, Menu déroulant
Étape 2 — Appliquer les Bonnes Pratiques
Pour chaque composant de l'interface, suivez ses bonnes pratiques issues de la référence. Règles clés applicables largement :
Mise en Page
- Formulaires à colonne unique — plus rapides à parcourir
- Couloirs verticaux cohérents dans les lignes répétées (listes, tableaux)
- Emplacements à largeur fixe pour les icônes et actions, même vides
- Cartes : média → titre → méta → action
Interaction
- Boutons : étiquettes verbe d'abord ("Enregistrer les modifications", pas "Soumettre"), un primaire par section
- Modaux : toujours fournir X, Annuler et Échap ; piéger le focus ; retourner le focus à la fermeture
- Toasts : auto-fermeture 4–6 s, autoriser la fermeture manuelle, empiler le plus récent en haut
- Basculements : effet immédiat uniquement — utiliser des cases à cocher dans les formulaires nécessitant Enregistrer
Typographie et Espacement
- Hiérarchie stricte des titres (h1 → h2 → h3), un h1 par page
- Cibles tactiles minimales de 44 px sur mobile
- Étiquettes au-dessus des champs (formulaires verticaux) ou à côté (horizontaux)
- Texte d'espace réservé comme indice de format, jamais comme remplacement d'étiquette
États
- États vides : illustration + titre utile + CTA principal
- Chargement : écrans squelette > spinners (afficher après un délai de 300 ms)
- Validation : en ligne au blur, pas à chaque frappe
- Éléments désactivés : visuellement distincts mais toujours lisibles
Étape 3 — Choisir une Direction de Design
Sélectionnez le préréglage de style qui correspond le mieux à l'intention de l'utilisateur, ou demandez si ce n'est pas clair :
Modern SaaS (par défaut)
- Palette neutre, un accent fort
- Grille 8 px, espace blanc généreux
- Propre, professionnel, spacieux
Minimaliste Niveau Apple
- Quasi-monochrome, gris chauds
- Grande hiérarchie typographique, crénage serré sur le texte d'affichage
- Espace blanc abondant, micro-interactions (150–250 ms ease-out)
Enterprise / Corporate
- Dense en informations, régions bien définies
- Échelle d'espacement compacte (4/8/12/16/24 px)
- Gestion robuste des formulaires, entièrement navigable au clavier
Créatif / Portfolio
- Audacieux, expressif, forte personnalité visuelle
- Mises en page asymétriques, contraste d'échelle dramatique
- Typographie éditoriale, couleurs d'accent vives
Tableau de Bord de Données
- Dense en données, optimisé pour la scannabilité
- Alignement vertical cohérent sur toutes les lignes
- Hiérarchie claire des métriques : KPI → tendance → détail
Étape 4 — Générer le Code
Écrivez du code prêt pour la production en suivant ces règles :
Stack : React + Tailwind CSS (sauf indication contraire de l'utilisateur)
Espacement : Échelle d'espacement Tailwind (p-2, gap-4, etc.) sur une grille de 8px
Couleurs : Variables CSS ou configuration Tailwind pour la cohérence de la palette
Typographie : Utilitaires de texte Tailwind ; associations de polices expressives via Google Fonts
États : Implémenter les états survol, focus, actif, désactivé pour tous les éléments interactifs
Responsive : Mobile-first ; tester à 375, 768, 1440 px
Accessibilité : HTML sémantique, ARIA si nécessaire, gestion du focus
Référence Rapide des Composants
Voici les 15 composants les plus couramment nécessaires. Pour la référence complète des 60+ composants avec bonnes pratiques, alias et exemples de mise en page, voir components.md.
| Composant | Quand l'utiliser | Règle clé |
|---|---|---|
| Bouton | Déclencher des actions | Étiquettes verbe d'abord ; un primaire par section |
| Carte | Représenter une entité | Média → titre → méta → action ; ombre OU bordure, pas les deux |
| Modal | Attention focalisée | Piéger le focus ; X + Annuler + Échap pour fermer |
| Navigation | Liens de page/section | 5–7 éléments max ; état actif clair |
| Tableau | Données structurées | En-tête fixe ; nombres alignés à droite ; colonnes triables |
| Onglets | Basculer entre panneaux | 2–7 onglets ; indicateur actif ; accordéon sur mobile |
| Formulaire | Collecter des saisies | Colonne unique ; étiquettes au-dessus ; validation en ligne au blur |
| Toast | Confirmation brève | Auto-fermeture 4–6 s ; action d'annulation pour les opérations destructrices |
| Alerte | Statut important | Couleurs sémantiques + icône ; max 2 phrases |
| Tiroir | Panneau secondaire | Droite pour les détails, gauche pour la navigation ; 320–480 px sur desktop |
| Champ de recherche | Trouver du contenu | Raccourci Cmd/Ctrl+K ; anti-rebond 200–300 ms |
| État vide | Aucune donnée | Illustration + titre + CTA ; cadrage positif |
| Squelette | Espace réservé de chargement | Correspondre à la forme réelle de la mise en page ; animation scintillante |
| Badge | Étiquette de statut/méta | 1–2 mots ; forme de pilule pour le statut ; palette de couleurs limitée |
| Menu déroulant | Options d'action/navigation | 7±2 éléments ; actions destructrices en dernier en rouge |
Anti-patrons à Éviter
Ne jamais générer ces éléments — ils signalent une UI générique et de faible qualité :
- Badges arc-en-ciel — chaque statut d'une couleur vive différente sans signification sémantique
- Modal dans un modal — utiliser une page ou un tiroir pour les flux complexes
- Soumettre désactivé sans explication — toujours indiquer ce qui manque
- Spinner pour des mises en page prévisibles — utiliser des écrans squelette à la place
- Liens "Cliquez ici" — le texte du lien doit décrire la destination
- Menu hamburger sur desktop — utiliser une navigation visible lorsque l'espace le permet
- Carrousels à avancement automatique — laisser les utilisateurs contrôler la navigation
- Champs de formulaire avec espace réservé uniquement — toujours utiliser des étiquettes visibles
- Boutons de poids égal — établir une hiérarchie primaire/secondaire/tertiaire
- Texte minuscule (< 12 px) — texte de corps minimum 14 px, préférer 16 px