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
Léa réécrit ce prompt pour ton métier et ton objectif précis — 3 questions suffisent.
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
Prompt Mistral pour créer un logo
Mistral, le modèle d'IA français de référence, offre des capacités remarquables pour vous accompagner dans la création d'un logo professionnel. Bien que Mistral soit un modèle de langage et ne génère pas directement d'images, il excelle dans la conception détaillée de briefs créatifs, la rédaction de prompts optimisés pour les outils de génération visuelle, et l'élaboration de chartes graphiques complètes. En utilisant Mistral comme assistant stratégique, vous pouvez définir avec précision l'identité visuelle de votre marque, explorer des directions créatives innovantes et produire des descriptions techniques exploitables par des outils comme Midjourney, DALL-E ou Stable Diffusion. Que vous soyez entrepreneur cherchant à créer l'identité de votre startup, designer souhaitant accélérer sa phase d'idéation, ou responsable marketing en quête d'un rebranding efficace, Mistral transforme votre vision en instructions créatives structurées. Son avantage distinctif réside dans sa compréhension fine du français et des codes culturels européens, ce qui en fait un partenaire idéal pour des projets destinés au marché francophone.
Rédiger une analyse de rentabilité pour une refonte
Justifier les investissements pour une refonte
Générateur de plan de tournage
Planification de pré-production pour tout tournage
Prompt Mistral pour créer un design UI
Mistral, le modèle d'IA français de référence, offre des capacités remarquables pour accompagner la création de designs UI. Que vous conceviez une application mobile, un tableau de bord ou un site web, Mistral peut générer des spécifications détaillées, des systèmes de design cohérents et des recommandations UX fondées sur les meilleures pratiques du secteur. Contrairement à une approche purement visuelle, Mistral excelle dans la structuration logique des interfaces : hiérarchie de l'information, flux utilisateur, choix typographiques et palettes de couleurs accessibles. En formulant des prompts précis, vous pouvez obtenir des wireframes textuels, des guidelines de design system, du code CSS ou Tailwind prêt à l'emploi, et même des audits d'interfaces existantes. L'avantage de Mistral réside dans sa compréhension fine du français et des contextes européens, ce qui en fait un allié idéal pour des projets destinés au marché francophone. Que vous soyez designer débutant cherchant une structure de départ ou expert souhaitant accélérer votre workflow, les prompts suivants vous permettront d'exploiter pleinement le potentiel de Mistral pour vos projets de design d'interface utilisateur.