Concevez un Feuille inférieure (Bottom Sheet) pour cette situation : Les filtres de la carte téléphone s’ouvrent dans une feuille déplaçable. Ils peuvent s’apercevoir, s’ouvrir complètement ou se fermer. Utilisez Glassmorphisme (Glassmorphism) comme direction visuelle mesurée et Animation de printemps (Spring Animation) pour le retour visuel. Conservez le HTML sémantique, l'accès au clavier, le focus visible, la prise en charge de la réduction des mouvements et les règles existantes du projet.
Transformer les mots de l’interface utilisateur en une demande de réalisation claire
Choisissez ce que fait l'interface, à quoi elle ressemble et comment elle se déplace. Puis copiez une demande claire pour votre développeur ou assistant de codage IA.
Start with your own situation
Open request builder Build a request you can hand off.
Choose what the UI does, how it looks, and how it moves. Then copy a clear request that includes states, accessibility needs, and checks for done.
Concevez un Palette de commandes (Command Palette) pour cette situation : Appuyez sur Command-K, tapez « Inviter un coéquipier » et exécutez cette action depuis la liste. Utilisez Minimalisme (Minimalism) comme direction visuelle mesurée et Mouvement réduit (Reduced Motion) pour le retour visuel. Conservez le HTML sémantique, l'accès au clavier, le focus visible, la prise en charge de la réduction des mouvements et les règles existantes du projet.
Concevez un Validation du formulaire (Form Validation) pour cette situation : Si un mot de passe enfreint une règle, la page l'explique à côté du champ. Les lecteurs d'écran peuvent relier le message à ce champ. Utilisez Néobrutalisme (Neobrutalism) comme direction visuelle mesurée et Micro-interaction (Microinteraction) pour le retour visuel. Conservez le HTML sémantique, l'accès au clavier, le focus visible, la prise en charge de la réduction des mouvements et les règles existantes du projet.
Concevez un Inspecteur (Inspector) pour cette situation : La sélection d’un graphique ouvre un inspecteur pour les axes, les couleurs et les étiquettes. La zone de dessin reste visible. Utilisez Verre Liquide (Liquid Glass) comme direction visuelle mesurée et Transition (Transition) pour le retour visuel. Conservez le HTML sémantique, l'accès au clavier, le focus visible, la prise en charge de la réduction des mouvements et les règles existantes du projet.
Concevez un Formulaire de connexion (Sign-In Form) pour cette situation : Un client qui revient se connecte avec son email et son mot de passe. Il peut afficher le mot de passe, le coller depuis un gestionnaire de mots de passe ou récupérer son accès sans perdre sa place. Utilisez Style suisse (Swiss Style) comme direction visuelle mesurée et Entrée, Sortie et Fondu enchaîné (Enter, Exit & Crossfade) pour le retour visuel. Conservez le HTML sémantique, l'accès au clavier, le focus visible, la prise en charge de la réduction des mouvements et les règles existantes du projet.
Concevez un État Vide, Erreur et Succès — Pack d'apprentissage (Empty, Error & Success State — Learning Bundle) pour cette situation : Une nouvelle liste de projets explique comment créer le premier élément. Si le réseau tombe en panne, le bouton Réessayer apparaît et les filtres restent sauvegardés. Utilisez Claymorphisme (Claymorphism) comme direction visuelle mesurée et Lissage (Easing) pour le retour visuel. Conservez le HTML sémantique, l'accès au clavier, le focus visible, la prise en charge de la réduction des mouvements et les règles existantes du projet.