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é.
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
Rédiger un argumentaire de système de couleurs
Documenter les décisions relatives au système de couleurs
Prompt GitHub Copilot pour Créer Des Thumbnails Youtube
GitHub Copilot, l'assistant de code alimenté par l'IA de GitHub, peut être un allié redoutable pour générer des thumbnails YouTube percutantes directement depuis votre éditeur de code. En exploitant ses capacités de génération de code, vous pouvez créer des scripts automatisés qui produisent des miniatures professionnelles en HTML/CSS, avec Canvas API, ou via des bibliothèques comme Sharp, Jimp ou Puppeteer. Que vous soyez créateur de contenu cherchant à industrialiser la production de vos vignettes, ou développeur souhaitant construire un outil de génération de thumbnails, Copilot accélère considérablement le processus. Il comprend le contexte de votre projet, suggère des compositions visuelles adaptées, gère les superpositions de texte avec des effets accrocheurs, et propose des palettes de couleurs optimisées pour le taux de clic. Cette page vous propose des prompts optimisés pour tirer le meilleur parti de GitHub Copilot dans la création de thumbnails YouTube, avec des variantes adaptées à chaque niveau d'expertise technique.
Modèle de Brief Design de Marque
Démarrer chaque projet de branding avec clarté
Prompt Stable Diffusion pour Creer Des Infographies
Stable Diffusion est un outil puissant de génération d'images par intelligence artificielle qui peut être utilisé pour créer des infographies visuellement saisissantes. Contrairement aux logiciels de design traditionnels comme Canva ou Illustrator, Stable Diffusion permet de générer des compositions graphiques uniques à partir d'une simple description textuelle. Pour obtenir des infographies exploitables, il est essentiel de maîtriser l'art du prompt engineering : structurer précisément sa demande en spécifiant le style graphique, la disposition des éléments, la palette de couleurs et le niveau de détail souhaité. Les infographies générées par Stable Diffusion servent de base visuelle forte que vous pouvez ensuite affiner dans un éditeur graphique pour ajouter vos données textuelles précises. Que vous soyez créateur de contenu, marketeur ou designer, cette approche hybride vous fait gagner un temps considérable sur la conception initiale. Dans ce guide, vous trouverez des prompts optimisés pour générer différents styles d'infographies, des versions adaptées à votre niveau d'expertise, ainsi que des conseils pratiques pour obtenir les meilleurs résultats possibles avec Stable Diffusion.