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
Créer un plan de recherche UX
Planifier des études de recherche UX
Prompt Mistral pour Creer Des Illustrations
Mistral, le modèle d'intelligence artificielle développé par la startup française Mistral AI, offre des capacités remarquables pour guider la création d'illustrations. Bien que Mistral soit avant tout un modèle de langage et non un générateur d'images, il excelle dans la rédaction de briefs créatifs, la description détaillée de scènes visuelles et la génération de prompts optimisés pour des outils de création graphique comme Midjourney, DALL-E ou Stable Diffusion. En exploitant sa compréhension fine du français et sa capacité à structurer des descriptions visuelles précises, Mistral devient un assistant incontournable pour les illustrateurs, graphistes et créateurs de contenu. Que vous souhaitiez concevoir des illustrations pour un livre jeunesse, des visuels pour une campagne marketing ou des concepts artistiques pour un projet personnel, Mistral vous aide à formuler des descriptions riches en détails — composition, palette de couleurs, style artistique, ambiance lumineuse — qui serviront de base solide à votre processus créatif. Ce guide vous propose des prompts optimisés pour tirer le meilleur parti de Mistral dans votre workflow d'illustration.
Synthétiser des documents longs en highlights
Transformez vos documents complexes en highlights visuels et percutants adaptés à différents formats de communication.
Auditer un design system pour sa cohérence
Améliorer la cohérence d'un design system