Face à une IA qui code (Claude Code, Codex et les autres), vous demandez « ajoute un formulaire de contact » ou « mets une fenêtre de confirmation avant la suppression ». Plus vous nommez précisément les éléments d'interface, plus le résultat colle à ce que vous aviez en tête.
Cette ressource vous donne le vocabulaire de ce que vous voyez à l'écran et vous aide à choisir le bon élément.
Les 6 familles
- 🧱 Structure de page : barre latérale, barre du haut, pied de page, section. Le squelette d'une page.
- 📋 Affichage de contenu : carte, liste, grille, tableau, accordéon, onglets, badge, avatar, séparateur.
- ✏️ Saisie et formulaires : champ texte, zone de texte, menus, cases, boutons radio, interrupteur, date, curseur, téléversement.
- 🪟 Surfaces flottantes : fenêtre modale, panneau coulissant, infobulle, popover, menu d'actions, toast.
- 🎯 Actions et navigation : bouton, lien, fil d'Ariane, pagination, bouton d'icône.
- 💬 Retours et états : alerte, squelette, indicateur de chargement, barre de progression, état vide.