Générer des maquettes web responsive
Concevez des maquettes web responsive détaillées avec spécifications complètes pour desktop, tablette et mobile.
Coller dans votre IA
Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.
Tu es un UI/UX designer senior spécialisé en design responsive. Ta mission est de concevoir une maquette web complète et responsive pour [type de page : landing page / page d'accueil / page produit / dashboard / formulaire / blog].
Brief du projet :
- Nom du projet : [nom]
- Secteur : [secteur d'activité]
- Objectif de la page : [conversion / information / navigation / engagement]
- Audience cible : [description démographique et comportementale]
- Références visuelles appréciées : [2-3 sites ou styles de référence]
- Charte graphique : [couleurs, typos, logo existant ou à créer]
- Contenu prévu : [liste des blocs de contenu]
Conçois la maquette en décrivant chaque section pour 3 breakpoints :
- Desktop (1440px)
- Tablette (768px)
- Mobile (375px)
Pour chaque section de la page, détaille :
-
Layout : Grille utilisée (12 colonnes, flexbox, CSS grid), espacement (padding, margin en px ou rem), comportement au redimensionnement
-
Composants UI : Description précise de chaque élément (boutons, cartes, navigation, formulaires) avec états (default, hover, active, disabled, focus)
-
Hiérarchie visuelle : Taille des textes par breakpoint, contraste, espacement vertical, points focaux
-
Interactions : Animations au scroll, transitions, micro-interactions, comportement du menu mobile
-
Images et médias : Dimensions recommandées, ratio, comportement responsive (art direction vs fluid), placeholders
-
Accessibilité : Rôles ARIA, ordre de tabulation, contrastes WCAG AA, tailles de cibles tactiles
Présente le résultat sous forme de wireframe textuel structuré avec des indications de positionnement.
Conclus par une checklist de validation responsive et des recommandations de performance (lazy loading, formats d'image, critical CSS).
Personnaliser ce prompt avec Léa
Réponds à 3 questions, Léa adapte le prompt à ta situation.
Pourquoi ce prompt fonctionne
<p>Ce prompt produit un document de spécification UI complet en décrivant chaque section sur 3 breakpoints. L'approche couvre le layout, les composants, l'accessibilité et les interactions, servant de brief détaillé pour le développement front-end.</p>
Cas d'usage
Résultat attendu
Un document de maquette structuré section par section avec spécifications pour 3 breakpoints et checklist de validation.
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
Ce prompt est trop dense pour une seule passe : le modèle va bâcler des sections ou inventer des valeurs. Découpez-le en trois itérations : 1) zoning et grille desktop uniquement, 2) adaptation tablette/mobile bloc par bloc, 3) accessibilité et checklist finale. Vous obtiendrez des specs précises et exploitables sans perdre le fil sur les breakpoints.
Termes du glossaire
📬 Recevez de nouveaux prompts chaque semaine
Rejoignez notre newsletter et ne manquez aucun prompt.
Pour aller plus loin
Prompts similaires
Prompt Claude pour créer un design UI
Claude est devenu un allié incontournable pour les designers et développeurs qui souhaitent créer des interfaces utilisateur de qualité professionnelle. Grâce à sa compréhension approfondie des principes de design, des frameworks CSS modernes et des bonnes pratiques UX, Claude peut générer des maquettes complètes en HTML/CSS, proposer des systèmes de design cohérents et produire du code frontend prêt à l'emploi. Que vous conceviez une landing page, un tableau de bord ou une application mobile, Claude analyse vos besoins fonctionnels et esthétiques pour produire des interfaces visuellement soignées, accessibles et responsive. L'avantage majeur réside dans sa capacité à itérer rapidement : vous décrivez votre vision, Claude génère une première version, puis vous affinez ensemble jusqu'au résultat souhaité. Il maîtrise Tailwind CSS, shadcn/ui, les principes de hiérarchie visuelle, la théorie des couleurs et les standards d'accessibilité WCAG. Contrairement aux outils de design traditionnels, Claude comprend le contexte métier de votre projet et adapte ses propositions en conséquence, ce qui en fait un outil particulièrement puissant pour le prototypage rapide et la production d'interfaces finales.
Liste de plans pour vidéo de mariage
Pré-production de vidéographie de mariage
Prompt Stable Diffusion pour créer un logo
Stable Diffusion est devenu un outil incontournable pour la création de logos grâce à sa capacité à générer des visuels vectoriels nets et professionnels. Contrairement aux générateurs d'images classiques, Stable Diffusion permet un contrôle granulaire sur le style, la typographie et la composition, trois éléments essentiels dans le design de logo. Que vous soyez entrepreneur cherchant à créer une identité visuelle sans budget design, graphiste en quête d'inspiration rapide, ou agence souhaitant accélérer sa phase de conception, maîtriser les prompts adaptés à la création de logos vous fera gagner un temps considérable. La clé réside dans l'utilisation de termes techniques précis : spécifier le type de logo (emblème, wordmark, mascotte), le style graphique (flat design, minimaliste, géométrique), et surtout les contraintes propres au logo comme le fond transparent, la simplicité des formes et la lisibilité à différentes échelles. Dans ce guide, vous trouverez un prompt principal optimisé, des variantes adaptées à votre niveau, et des réponses aux questions les plus fréquentes pour créer des logos percutants avec Stable Diffusion.
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.