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

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

🎨CreativiteIntermediateClaude

Claude Prompt for Creating Mockups

Creating mockups is a crucial step in any design process, whether for a mobile app, website, or software. Claude excels at generating detailed mockups as ready-to-view HTML/CSS code, structured descriptions for design tools, or complete specifications to guide a development team. Thanks to its deep understanding of interface design, UX principles, and modern design systems, Claude can turn a simple idea into a concrete visual prototype in seconds. Whether you're a designer looking to speed up your ideation phase, a product manager wanting to communicate a product vision, or a developer needing to quickly prototype a feature, Claude lets you move from intention to visual without mastering complex design tools. The prompt approach gives you full control over the fidelity level, visual style, and complexity of the generated mockup.

604
🎨CreativiteAdvancedAll AIs

Rebrand Discovery Session Agenda

Strategic rebrand projects

356
🎨CreativiteIntermediateAll AIs

Assist with creative content writing and editing

Get complete editorial assistance in 4 steps for your creative content and brand communications.

638
🎨CreativiteBeginnerAll AIs

Email Newsletter Content

Staying connected with past and potential clients

337