Prompt Gemini pour créer un design UI
Gemini, l'intelligence artificielle de Google, s'impose comme un outil puissant pour la conception d'interfaces utilisateur. Grâce à ses capacités multimodales, Gemini peut générer des maquettes UI détaillées, proposer des systèmes de design complets et même produire du code front-end fonctionnel. Que vous soyez designer cherchant à accélérer votre phase d'idéation ou développeur souhaitant prototyper rapidement une interface, Gemini offre une flexibilité remarquable. L'IA comprend les principes fondamentaux du design — hiérarchie visuelle, accessibilité, responsive design — et peut les appliquer à vos projets spécifiques. En formulant des prompts précis qui décrivent le contexte d'utilisation, le public cible et les contraintes techniques, vous obtiendrez des résultats exploitables immédiatement. Ce guide vous propose un prompt optimisé pour créer des designs UI professionnels avec Gemini, accompagné de variantes adaptées à votre niveau d'expertise et à la complexité de votre projet. Vous découvrirez comment structurer vos demandes pour obtenir des interfaces cohérentes, esthétiques et fonctionnelles, tout en respectant les bonnes pratiques du design moderne.
Coller dans votre IA
Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.
Agis en tant que designer UI/UX senior avec 15 ans d'expérience. Je souhaite créer le design d'une interface pour [type d'application : SaaS, e-commerce, application mobile, dashboard...] destinée à [public cible]. L'objectif principal de cette interface est de [objectif : convertir, informer, engager...]. Génère un design UI complet comprenant : 1) Une palette de couleurs avec codes hexadécimaux (couleur primaire, secondaire, accent, fond, texte) justifiée par la psychologie des couleurs. 2) Une typographie avec recommandations de polices Google Fonts pour les titres et le corps de texte, avec tailles et graisses. 3) Le layout détaillé de la page principale avec la disposition de chaque élément (header, hero section, sections de contenu, CTA, footer). 4) Les composants UI nécessaires (boutons, cartes, formulaires, navigation) avec leurs états (hover, active, disabled). 5) Les espacements et la grille utilisée (8px grid). Le style visuel doit être [moderne et minimaliste / bold et coloré / corporate et élégant]. Assure-toi que le design respecte les normes WCAG 2.1 AA pour l'accessibilité et soit responsive (mobile-first). Fournis le résultat sous forme de spécifications détaillées que je peux transmettre directement à un développeur.
Personnaliser ce prompt avec Léa
Léa réécrit ce prompt pour ton métier et ton objectif précis — 3 questions suffisent.
Pourquoi ce prompt fonctionne
Ce prompt fonctionne car il attribue un rôle expert précis à Gemini, ce qui oriente la qualité et le niveau de détail des réponses. La structure en cinq points numérotés force l'IA à couvrir tous les aspects essentiels d'un design system sans en oublier. Les variables entre crochets permettent une personnalisation contextuelle tout en maintenant un cadre méthodologique rigoureux qui produit des résultats professionnels et exploitables.
Cas d'usage
Variantes
Résultat attendu
Gemini génèrera un document de spécifications UI complet incluant une palette de couleurs cohérente, des recommandations typographiques précises, un layout structuré section par section, et une bibliothèque de composants avec leurs différents états. Le résultat sera suffisamment détaillé pour servir de brief à un développeur front-end ou pour guider la création de maquettes dans Figma.
Questions fréquentes
Gemini peut-il générer directement des maquettes visuelles pour mon design UI ?
Gemini peut générer des images de maquettes UI grâce à ses capacités multimodales, mais les résultats sont souvent approximatifs pour des interfaces complexes. L'approche la plus efficace consiste à utiliser Gemini pour produire des spécifications détaillées (couleurs, typographie, layout, composants) que vous implémentez ensuite dans un outil comme Figma ou directement en code. Vous pouvez aussi lui demander des wireframes en ASCII ou des descriptions visuelles très précises qui servent de guide de conception.
Comment adapter le prompt pour un design mobile-first avec Gemini ?
Ajoutez dans votre prompt les contraintes spécifiques au mobile : taille d'écran cible (375px pour iPhone, 360px pour Android), zones de pouce accessibles (thumb zone), taille minimale des zones tactiles (44x44px selon Apple, 48x48dp selon Google), et navigation adaptée (bottom navigation, hamburger menu). Précisez également les breakpoints de votre stratégie responsive et demandez à Gemini de concevoir d'abord la version mobile avant de décliner sur tablette et desktop.
Puis-je demander à Gemini de générer du code CSS ou React à partir du design UI ?
Oui, Gemini excelle dans la génération de code front-end. Une fois le design défini, vous pouvez lui demander de produire du code CSS (avec variables custom properties pour les design tokens), des composants React avec Tailwind CSS ou styled-components, ou même des fichiers de configuration pour des frameworks UI comme shadcn/ui ou Material UI. Précisez votre stack technique dans le prompt pour obtenir du code directement intégrable dans votre projet. Pensez à demander des composants réutilisables plutôt que du code monolithique.
Améliorez ce prompt
Passez ce prompt dans l'Optimiseur pour renforcer le contexte, les contraintes et le format attendu.
Améliore ce prompt avec l'OptimiseurCommentaires
- LéaIA
Astuce : ajoute en fin de prompt « fournis les tokens de design (couleurs, espacements) au format JSON exportable vers Figma ou Tailwind » pour passer directement des specs au code.
Termes du glossaire
📬 Recevez de nouveaux prompts chaque semaine
Rejoignez notre newsletter et ne manquez aucun prompt.
Pour aller plus loin
Prompts similaires
Carte mentale d'un thème
Organisation visuelle
Hook d'accroche pour vidéo courte
Maximiser la rétention des vidéos courtes
Prompt Stable Diffusion pour créer un media kit
Un media kit professionnel est un outil indispensable pour tout créateur de contenu, influenceur ou entreprise souhaitant présenter ses statistiques, son identité visuelle et ses offres de collaboration. Grâce à Stable Diffusion, vous pouvez générer des visuels sur mesure pour composer un media kit percutant : arrière-plans élégants, mises en page stylisées, icônes personnalisées et éléments graphiques cohérents avec votre image de marque. Plutôt que de partir d'un template générique, l'IA vous permet de créer des assets visuels uniques qui reflètent véritablement votre univers. Que vous ayez besoin d'un header sophistiqué, de mockups pour vos réseaux sociaux ou d'illustrations thématiques, Stable Diffusion transforme vos descriptions textuelles en visuels haute qualité prêts à intégrer dans votre document. Ce guide vous propose des prompts optimisés pour générer chaque composant visuel de votre media kit, du fond de page aux éléments décoratifs, en passant par les bannières et les séparateurs graphiques. Vous découvrirez comment formuler vos instructions pour obtenir des résultats professionnels, cohérents et adaptés à votre charte graphique personnelle.
Persona UX détaillé
Définir les utilisateurs cibles pour le design