Prompt Claude pour Creer Des Mockups

Créer des mockups est une étape cruciale dans tout processus de conception, qu'il s'agisse d'une application mobile, d'un site web ou d'un logiciel. Claude excelle dans la génération de mockups détaillés sous forme de code HTML/CSS prêt à visualiser, de descriptions structurées pour des outils de design, ou encore de spécifications complètes pour guider une équipe de développement. Grâce à sa compréhension fine du design d'interface, des principes UX et des systèmes de design modernes, Claude peut transformer une simple idée en un prototype visuel concret en quelques secondes. Que vous soyez designer cherchant à accélérer votre phase d'idéation, product manager souhaitant communiquer une vision produit, ou développeur voulant prototyper rapidement une fonctionnalité, Claude vous permet de passer de l'intention au visuel sans maîtriser d'outil de design complexe. L'approche par prompt vous donne un contrôle total sur le niveau de fidélité, le style visuel et la complexité du mockup généré.

Le prompt

Claude

Tu es un designer UI/UX senior spécialisé en design d'interfaces modernes. Crée un mockup détaillé pour [décrire l'écran ou la fonctionnalité] destiné à [type d'application : web/mobile/desktop].

Contexte du projet :
- Secteur : [ex : e-commerce, SaaS, fintech]
- Public cible : [ex : professionnels 25-45 ans]
- Ton visuel : [ex : minimaliste, corporate, ludique]

Génère le mockup sous forme de code HTML et CSS complet, prêt à être ouvert dans un navigateur. Respecte ces principes :
1. Hiérarchie visuelle claire avec un système typographique cohérent
2. Espacement et alignement suivant une grille de 8px
3. Palette de couleurs harmonieuse avec couleur primaire [préciser] et secondaire [préciser]
4. Composants interactifs avec états hover/focus visibles
5. Design responsive adapté au viewport ciblé

Inclus dans le mockup :
- Header avec navigation
- Section héro ou zone principale
- Éléments de contenu pertinents (cartes, formulaires, listes selon le contexte)
- Footer
- Au moins un call-to-action visible

Ajoute des commentaires dans le code pour expliquer les choix de design. Utilise des données fictives réalistes, pas de lorem ipsum.

Pourquoi ça marche

Ce prompt fonctionne parce qu'il attribue un rôle d'expert à Claude, ce qui active ses connaissances approfondies en design UI/UX. La structure en sections (contexte, principes, éléments requis) élimine l'ambiguïté et guide la génération vers un résultat complet et cohérent. L'exigence de code HTML/CSS exécutable transforme une description abstraite en livrable concret et immédiatement utilisable.

Résultat attendu

Vous obtiendrez un fichier HTML autonome contenant un mockup visuel complet avec styles CSS intégrés, prêt à être ouvert dans un navigateur. Le résultat inclura une mise en page structurée avec des composants UI réalistes, une palette de couleurs cohérente, et des données fictives crédibles qui permettent d'évaluer immédiatement le rendu final.

Variantes par niveau

FAQ

Claude peut-il créer des mockups pour des applications mobiles ?

Oui, Claude peut générer des mockups mobile en HTML/CSS en utilisant des viewports adaptés (375px pour iPhone, 390px pour les modèles récents). Précisez dans votre prompt les dimensions cibles et demandez un conteneur simulant un écran mobile. Claude peut reproduire les conventions iOS (barre de navigation en haut, tab bar en bas) ou Android (Material Design) selon vos indications. Pour un rendu optimal, demandez-lui d'inclure une meta viewport et de simuler le cadre du téléphone.

Comment obtenir un mockup fidèle à ma charte graphique existante ?

Fournissez à Claude les éléments clés de votre charte : codes couleurs hexadécimaux, noms de polices, tailles typographiques, valeurs de border-radius et d'espacement. Plus vous êtes précis sur vos tokens de design, plus le résultat sera fidèle. Vous pouvez aussi coller un extrait de votre fichier CSS de variables ou de votre design system existant directement dans le prompt pour que Claude s'y conforme exactement.

Peut-on itérer sur un mockup généré par Claude pour l'améliorer ?

Absolument, c'est même la méthode recommandée. Après une première génération, vous pouvez demander des modifications ciblées : changer la disposition d'une section, ajuster les couleurs, ajouter un composant, modifier la hiérarchie visuelle. Claude conserve le contexte de la conversation et peut appliquer des changements incrémentaux sans regénérer l'ensemble. Cette approche itérative permet d'affiner progressivement le mockup jusqu'au résultat souhaité, comme vous le feriez avec un outil de design traditionnel.

Prompts connexes

Prompt Claude pour Créer un Design System Prompt Claude pour Créer une Landing Page Prompt Claude pour Améliorer l'UX Prompt Claude pour Générer du Code Frontend

Recevez de nouveaux prompts chaque semaine

Rejoignez notre newsletter.