Prompt Claude pour créer 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é.
Coller dans votre IA
Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.
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 :
- Hiérarchie visuelle claire avec un système typographique cohérent
- Espacement et alignement suivant une grille de 8px
- Palette de couleurs harmonieuse avec couleur primaire [préciser] et secondaire [préciser]
- Composants interactifs avec états hover/focus visibles
- 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.
Personnaliser ce prompt avec Léa
Réponds à 3 questions, Léa adapte le prompt à ta situation.
Pourquoi ce prompt fonctionne
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.
Cas d'usage
Variantes
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.
Questions fréquentes
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.
Améliorez ce prompt
Passez ce prompt dans l'Optimiseur pour renforcer le contexte, les contraintes et le format attendu.
Améliore ce prompt avec l'OptimiseurCommentaires
- LéaIA
Pour un code plus robuste, précisez les breakpoints responsive (ex: 375px, 768px, 1440px) et les micro-interactions (hover, transition, animation CSS). Claude générera alors du HTML/CSS adaptable et moderne, sans refacto.
Termes du glossaire
📬 Recevez de nouveaux prompts chaque semaine
Rejoignez notre newsletter et ne manquez aucun prompt.
Pour aller plus loin
Prompts similaires
Email de proposition d'abonnement mensuel
Générer des revenus récurrents auprès de clients commerciaux
Prompt DALL-E pour créer des images
DALL-E, développé par OpenAI, est l'un des générateurs d'images par intelligence artificielle les plus puissants disponibles aujourd'hui. Capable de transformer une simple description textuelle en une image détaillée et originale, DALL-E ouvre des possibilités créatives immenses pour les designers, marketeurs, créateurs de contenu et entrepreneurs. La clé pour obtenir des résultats exceptionnels réside dans la qualité du prompt : plus votre description est précise et structurée, plus l'image générée correspondra à votre vision. Un bon prompt DALL-E combine plusieurs éléments essentiels : le sujet principal, le style artistique souhaité, l'éclairage, la composition, les couleurs dominantes et l'ambiance générale. Maîtriser l'art du prompting pour DALL-E vous permettra de produire des visuels professionnels sans compétences en design graphique, que ce soit pour des illustrations de blog, des visuels publicitaires, des concepts artistiques ou des maquettes de produits. Ce guide vous propose un prompt optimisé et ses variantes pour créer des images saisissantes avec DALL-E.
Texte pour forfaits photo
Texte de la page de tarification de votre site web de photographe
Prompt ChatGPT pour créer des illustrations
ChatGPT, couplé à DALL-E, est devenu un outil incontournable pour créer des illustrations de qualité professionnelle sans compétences en dessin ou en design graphique. Que vous soyez créateur de contenu, entrepreneur, enseignant ou simplement passionné de création visuelle, la capacité à générer des illustrations sur mesure transforme radicalement votre workflow créatif. L'enjeu principal réside dans la formulation du prompt : un prompt vague produira une image générique, tandis qu'un prompt structuré et précis donnera une illustration qui correspond exactement à votre vision. La clé est de maîtriser le vocabulaire visuel — style artistique, composition, palette de couleurs, éclairage, perspective — pour guider l'IA avec précision. Dans ce guide, vous découvrirez un prompt principal optimisé pour créer des illustrations percutantes, ainsi que trois variantes adaptées à votre niveau d'expertise. Chaque prompt a été conçu pour exploiter pleinement les capacités de génération d'images de ChatGPT, en intégrant les bonnes pratiques qui font la différence entre une image correcte et une illustration véritablement professionnelle.