UI du tableau de bord
Trois passes pour aller d'un brouillon fonctionnel
à une interface que les utilisateurs veulent utiliser.
Structure et cohérence, pas créativité
Claude génère des interfaces fonctionnelles et cohérentes très rapidement. Ce qu'il fait moins bien : l'originalité visuelle, la micro-interaction subtile, le raffinement qui distingue une interface qu'on oublie d'une interface qu'on aime. La bonne approche : lui confier la structure, garder la main sur le détail.
Un dashboard professionnel répond à une grammaire bien définie : en-tête + métriques + contenu principal + actions secondaires. Claude connaît cette grammaire et la respecte si vous la lui rappelez dans votre demande.
Squelette fonctionnel en premier
La première passe génère l'architecture de la page : navigation, zones, composants, données fictives. Pas de couleurs fines, pas d'animations — juste la structure qui permet de valider que tout est au bon endroit.
Vous : Génère la page dashboard avec : - Sidebar de navigation (Accueil, Missions, Clients, Paramètres) - En-tête avec nom du projet + bouton action - 3 cartes métriques (missions actives, CA, délai moyen) - Tableau des 10 dernières missions Utilise shadcn-ui + Tailwind. Données fictives pour le rendu. → Claude génère la structure complète → Vous ouvrez dans le navigateur → Vous validez le layout avant d'aller plus loin
Votre identité visuelle
Une fois la structure validée, on applique la charte graphique. Couleurs, typographie, espacements, logo. Cette passe est courte si votre CLAUDE.md mentionne la charte.
Ce qui transforme utile en agréable
La troisième passe ajoute les détails qui rendent l'interface vivante : états de chargement, transitions, feedback visuel sur les actions. Claude les génère bien sur demande explicite.
Skeleton et spinner
Pendant le chargement des données, afficher un skeleton (silhouette du contenu) plutôt qu'un écran blanc. « Ajoute un état skeleton sur les cartes métriques pendant le fetch. »
Empty state
Quand une liste est vide (aucune mission), afficher un message clair et une action. « Ajoute un empty state au tableau avec un bouton Créer la première mission. »
Toast de confirmation
Après une action (mission créée, statut modifié), afficher un toast. « Ajoute un toast de succès après la création d'une mission. »
Animations légères
Fade-in à l'apparition des éléments, transition sur le hover. Demander avec parcimonie : « Ajoute une animation d'apparition en fondu sur les cartes métriques. »
Ce qui ralentit la production UI
Demander tout en une fois
Structure + charte + micro-interactions en un seul prompt → Claude produit un résultat moyen sur les trois. Trois passes distinctes donnent un résultat supérieur.
Valider sans ouvrir dans le navigateur
Claude peut générer du JSX syntaxiquement correct mais visuellement incorrect (éléments superposés, couleurs illisibles). Toujours ouvrir dans le navigateur entre chaque passe.
Ignorer les états d'erreur
L'état nominal fonctionne. L'état erreur (API en timeout, données manquantes) est souvent oublié. Demander explicitement : « Ajoute la gestion des erreurs de fetch sur chaque composant. »
Cap sur la leçon 12
Votre dashboard a sa structure, sa charte, ses micro-interactions. La leçon suivante câble les fonctions opérationnelles : filtres persistants, export CSV, refresh, recherche.
Exercice — appropriation
Appliquez les trois passes UI sur votre projet de référence. Passe 1 : structure avec données fictives. Passe 2 : charte. Passe 3 : un état de chargement et un empty state. Ouvrez dans le navigateur après chaque passe et notez ce que vous avez dû corriger manuellement.
Quiz · UI du tableau de bord
8 questions · une seule bonne réponse par question · vous pouvez recommencer autant de fois que nécessaire.