P
🎨CreativiteAdvancedAll AIs

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 :

  1. Layout : Grille utilisée (12 colonnes, flexbox, CSS grid), espacement (padding, margin en px ou rem), comportement au redimensionnement

  2. Composants UI : Description précise de chaque élément (boutons, cartes, navigation, formulaires) avec états (default, hover, active, disabled, focus)

  3. Hiérarchie visuelle : Taille des textes par breakpoint, contraste, espacement vertical, points focaux

  4. Interactions : Animations au scroll, transitions, micro-interactions, comportement du menu mobile

  5. Images et médias : Dimensions recommandées, ratio, comportement responsive (art direction vs fluid), placeholders

  6. 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).

100% found this useful

Personalize this prompt with Léa

Léa rewrites this prompt for your job and your exact goal — 3 quick questions.

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

Briefing a front-end developer on a mockupDocumenting the responsive design of a siteCreating a detailed wireframe without graphic tools

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 Optimizer

Comments

  • 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.

Glossary Terms

ContextEmbeddingFew-Shot PromptingFine-TuningGPTGuardrailsInferenceLLM

📬 Get new prompts every week

Join our newsletter and never miss a prompt.

Go further

Improve this prompt with the Optimizer

Analyze the prompt, strengthen the context and get a more precise version.

Prompt Engineering

Cross-model principles for writing more reliable prompts.

Similar Prompts

🎨CreativiteIntermediateAll AIs

Wedding Day Timeline

Wedding day planning and client preparation

0267
🎨CreativiteIntermediateAll AIs

Midjourney Prompt for Creating Illustrations

Midjourney has become the go-to tool for creating illustrations thanks to its ability to interpret text descriptions and turn them into remarkably high-quality visuals. Whether you are a professional illustrator looking to speed up your creative process, an author wanting to bring your characters to life, or an entrepreneur needing illustrations for your communication materials, Midjourney offers unmatched flexibility. The key lies in how you phrase your prompts: a well-structured prompt lets you control the artistic style, composition, lighting, color palette, and overall atmosphere of your illustration. By mastering Midjourney's specific parameters such as aspect ratio, stylization level, and term weights, you can achieve consistent, professional results with every generation. This guide supports you with an optimized main prompt and its variants to create illustrations suited to all your projects, from children's books to editorial illustration and concept art.

0282
🎨CreativiteAdvancedAll AIs

Create a UX strategy presentation

Present UX strategy to leadership

0219
🎨CreativiteBeginnerAll AIs

YouTube Video Title and Description

YouTube SEO for organic video discovery

0256