Generate Responsive Web Mockups

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