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
Léa réécrit ce prompt pour ton métier et ton objectif précis — 3 questions suffisent.
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 Mistral pour créer un logo
Mistral, le modèle d'IA français de référence, offre des capacités remarquables pour vous accompagner dans la création d'un logo professionnel. Bien que Mistral soit un modèle de langage et ne génère pas directement d'images, il excelle dans la conception détaillée de briefs créatifs, la rédaction de prompts optimisés pour les outils de génération visuelle, et l'élaboration de chartes graphiques complètes. En utilisant Mistral comme assistant stratégique, vous pouvez définir avec précision l'identité visuelle de votre marque, explorer des directions créatives innovantes et produire des descriptions techniques exploitables par des outils comme Midjourney, DALL-E ou Stable Diffusion. Que vous soyez entrepreneur cherchant à créer l'identité de votre startup, designer souhaitant accélérer sa phase d'idéation, ou responsable marketing en quête d'un rebranding efficace, Mistral transforme votre vision en instructions créatives structurées. Son avantage distinctif réside dans sa compréhension fine du français et des codes culturels européens, ce qui en fait un partenaire idéal pour des projets destinés au marché francophone.
Générateur de plan de tournage
Planification de pré-production pour tout tournage
Prompt Mistral pour créer un design UI
Mistral, le modèle d'IA français de référence, offre des capacités remarquables pour accompagner la création de designs UI. Que vous conceviez une application mobile, un tableau de bord ou un site web, Mistral peut générer des spécifications détaillées, des systèmes de design cohérents et des recommandations UX fondées sur les meilleures pratiques du secteur. Contrairement à une approche purement visuelle, Mistral excelle dans la structuration logique des interfaces : hiérarchie de l'information, flux utilisateur, choix typographiques et palettes de couleurs accessibles. En formulant des prompts précis, vous pouvez obtenir des wireframes textuels, des guidelines de design system, du code CSS ou Tailwind prêt à l'emploi, et même des audits d'interfaces existantes. L'avantage de Mistral réside dans sa compréhension fine du français et des contextes européens, ce qui en fait un allié idéal pour des projets destinés au marché francophone. Que vous soyez designer débutant cherchant une structure de départ ou expert souhaitant accélérer votre workflow, les prompts suivants vous permettront d'exploiter pleinement le potentiel de Mistral pour vos projets de design d'interface utilisateur.
Prompt ChatGPT pour créer un logo
Créer un logo professionnel avec ChatGPT est devenu une réalité accessible à tous. Que vous lanciez une startup, un projet personnel ou que vous souhaitiez rafraîchir l'identité visuelle de votre marque, ChatGPT peut vous accompagner dans la conception d'un logo pertinent et mémorable. En combinant la puissance de DALL-E intégré à ChatGPT, vous pouvez générer des visuels de logo directement depuis la conversation. Mais la vraie valeur réside dans la qualité du prompt : un brief précis sur votre secteur d'activité, vos valeurs de marque, votre palette de couleurs préférée et le style graphique souhaité fera toute la différence entre un résultat générique et un logo qui capture véritablement l'essence de votre projet. L'approche optimale consiste à décrire votre entreprise, définir l'émotion que le logo doit transmettre, préciser les contraintes techniques (fond transparent, vectorisable, monochrome) et indiquer des références stylistiques. ChatGPT peut aussi vous aider en amont à brainstormer des concepts, explorer des symboles pertinents pour votre industrie, et affiner itérativement le design jusqu'à obtenir exactement ce que vous recherchez.