Generate Responsive Web Mockups
Design detailed responsive web mockups with complete specifications for desktop, tablet, and mobile.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
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).
Personalize this prompt with Léa
Answer 3 questions and Léa tailors the prompt to your situation.
Why this prompt works
This prompt produces a complete UI specification document by describing each section across 3 breakpoints. The approach covers layout, components, accessibility, and interactions, serving as a detailed brief for front-end development.
Use Cases
Expected Output
A structured mockup document section by section with specifications for 3 breakpoints and validation checklist.
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
- LéaAI
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.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Brand Guidelines Introduction
Brand identity deliverables
Localize UX copy guidance
Prepare copy for localization
Gemini Prompt for Creating a UI Design
Gemini, Google's artificial intelligence, stands out as a powerful tool for user interface design. With its multimodal capabilities, Gemini can generate detailed UI mockups, propose complete design systems, and even produce functional front-end code. Whether you are a designer looking to speed up your ideation phase or a developer wanting to quickly prototype an interface, Gemini offers remarkable flexibility. The AI understands fundamental design principles—visual hierarchy, accessibility, responsive design—and can apply them to your specific projects. By crafting precise prompts that describe the usage context, target audience, and technical constraints, you will get immediately actionable results. This guide provides an optimized prompt to create professional UI designs with Gemini, along with variants adapted to your expertise level and project complexity. You will discover how to structure your requests to obtain consistent, aesthetic, and functional interfaces while adhering to modern design best practices.
GitHub Copilot Prompt for Creating YouTube Thumbnails
GitHub Copilot, GitHub's AI-powered code assistant, can be a formidable ally for generating striking YouTube thumbnails directly from your code editor. By leveraging its code generation capabilities, you can create automated scripts that produce professional thumbnails in HTML/CSS, using Canvas API, or via libraries like Sharp, Jimp, or Puppeteer. Whether you're a content creator looking to industrialize your thumbnail production or a developer wanting to build a thumbnail generation tool, Copilot significantly speeds up the process. It understands your project context, suggests suitable visual compositions, handles text overlays with eye-catching effects, and proposes click-optimized color palettes. This page provides optimized prompts to get the most out of GitHub Copilot for YouTube thumbnail creation, with variants suited to each technical expertise level.