Bibliothèque ultime de prompts pour une meilleure UI
Maîtrisez l'art du prompt pour une UI/UX exceptionnelle
Comment utiliser cette bibliothèque
Chaque style de design inclut :
- Quand l'utiliser , scénarios parfaits pour cette esthétique
- Vocabulaire clé , mots qui déclenchent le bon rendu visuel
- Exemples de prompts , prêts à copier avec exigences spécifiques
- Astuces pro , techniques avancées pour des résultats encore meilleurs
Commencez par identifier l'ambiance et l'objectif de votre projet, puis trouvez le style de design correspondant ci-dessous.
1. Expressif & Fun
Parfait pour : Tableaux de bord, applications grand public, outils créatifs, plateformes sociales
- Vivant, éléments surdimensionnés, courbes joyeuses, tons saturés, mise en page énergique
- Animations rebondissantes, micro-interactions ludiques, dégradés vibrants
- Tout en arrondis, couleurs bonbon, espacement joyeux
Crée un tableau de bord de gestion de tâches avec une énergie ludique :
- Blocs de couleurs vives et saturées (corail, bleu électrique, jaune soleil)
- Cartes arrondies avec padding généreux
- États hover rebondissants (scale-105 transforms)
- Boutons surdimensionnés et amicaux avec shadow-lg
- États vides joyeux avec illustrations
- Mobile-first, grille responsiveAstuce pro : Ajoute « with delightful micro-interactions on every click » pour garantir des animations partout.
2. Premium & Sleek
Parfait pour : Produits SaaS, marques de luxe, services professionnels, fintech
- Raffiné, surfaces translucides, profondeur en couches, flou doux, accents élevés
- Verre dépoli, dégradés subtils, espacement premium, typographie sophistiquée
- Backdrop blur, ombres élégantes, chrome poli
Conçois une page de tarifs avec une esthétique luxueuse :
- Cartes glassmorphisme (bg-white/10, backdrop-blur-lg)
- Superpositions en dégradés doux (from-slate-50 to-white)
- Espacement généreux (py-24, px-12)
- Police Inter avec -6 letter spacing
- Effets de lift au hover subtils (translate-y-1)
- Accents premium dorés ou bleus
- Shadow-2xl pour la profondeur
- Grille 3 colonnes responsive passant à 1 sur mobileAstuce pro : Utilise « frosted » et « translucent » pour obtenir un effet glassmorphique sans dire « glassmorphism ».
3. Futuriste & Cinématographique
Parfait pour : Startups tech, jeux vidéo, produits IA, outils développeurs
- Mode sombre, dégradé cosmique, bords lumineux, motion blur, grille épurée
- Reflets néon, esthétique terminal, sci-fi, vibes cyberpunk
- Effets holographiques, bordures iridescentes, accents électriques
Crée une landing page avec une esthétique sci-fi cinématographique :
- Fond très sombre (bg-slate-950)
- Hero en dégradé cosmique (from-purple-900 via-blue-900 to-slate-900)
- Accents néon brillants (cyan-400, bordures bleu électrique)
- Animations fluides déclenchées au scroll
- Motif grille en superposition opacity-10
- Blocs de code style terminal avec syntax highlighting
- Cartes flottantes avec effet glow (shadow-[0_0_50px_rgba(59,130,246,0.5)])
- Responsive, optimisé mobileAstuce pro : Demande « with glow effects on interactive elements » pour un rendu sci-fi authentique.
4. Calme & Élégant
Parfait pour : Applications bien-être, méditation, santé, outils de pleine conscience
- Dégradés doux, palette sobre, espacement généreux, transitions délicates, mise en page aérée
- Tons pastel, respiration, couleurs sereines, espacement tranquille
- Animations lentes, hiérarchie paisible, chrome minimaliste
Conçois une app de méditation avec une esthétique apaisante :
- Fond en dégradé pastel doux (from-blue-50 via-purple-50 to-pink-50)
- Palette de couleurs sobres (vert sauge, lavande douce, beige chaud)
- Espacement extra généreux (py-32, gap-16)
- Animations fade-in lentes et douces (duration-700)
- Cibles tactiles larges et confortables (min-h-16)
- Conteneurs rounded-3xl
- Texte minimal, whitespace maximal
- Layout single-column centré (max-w-2xl mx-auto)Astuce pro : Précise « slow, gentle transitions » pour éviter des animations brusques.
5. Bold & Disruptif
Parfait pour : Startups, agences, marques personnelles, produits audacieux
- Grille marquée, brutalisme, typographie brute, fort contraste, CTAs surdimensionnés
- Mises en page nues, titres massifs, espacement agressif, design sans concession
- Bords nets, bordures épaisses, hiérarchie percutante
Crée un site portfolio avec une audace brutaliste :
- Palette noir et blanc tranchée
- Titres massifs (text-7xl font-black)
- Système de grille rigide avec bordures visibles (border-2 border-black)
- Boutons surdimensionnés à coins nets (rounded-none)
- Fort contraste partout
- Esthétique brute et non polie
- Architecture d'information dense
- Desktop-first avec breakpoints mobiles brutaux
- Police monospace pour les labels (font-mono)Astuce pro : Utilise « brutalist » et « stark » pour déclencher des layouts puissants et sans compromis.
6. Technique & Orienté Développeur
Parfait pour : Documentation, dev tools, plateformes API, éditeurs de code
- Polices monospace, thème sombre, UI style terminal, chrome minimal
- Navigation au clavier, syntax highlighting, design code-first
- Ergonomie développeur, sans distraction, utilitaire
Crée un site de documentation avec un design developer-first :
- Mode sombre par défaut (bg-slate-900, text-slate-100)
- Police monospace JetBrains Mono ou Fira Code
- Palette inspirée terminal (green-400 pour succès, red-400 pour erreurs)
- Overlay de raccourcis clavier (⌘K pour rechercher)
- Blocs de code colorés avec bouton copier
- Sidebar de navigation minimale
- Contenu rendu en markdown
- Recherche rapide avec fuzzy matching
- Responsive avec nav repliableAstuce pro : Mentionne « terminal-inspired » pour une esthétique développeur authentique.
7. Minimal & Concentré
Parfait pour : Apps de productivité, prise de notes, écriture, interfaces sans distraction
- Whitespace dominant, sans friction, tons neutres, UI invisible, motion silencieuse
- Contenu d'abord, table rase, chrome minimal, focus éditeur
- Interactions subtiles, design feutré
Conçois une app de prise de notes avec un minimalisme radical :
- Fond blanc pur (bg-white)
- Layout single column (max-w-3xl mx-auto)
- Line height généreux (leading-relaxed)
- Texte gris neutre (text-slate-700)
- UI masquée jusqu'au hover (opacity-0 hover:opacity-100)
- Transitions subtiles (duration-200)
- Pas de bordures, ombres minimales
- Police serif propre pour la lecture (font-serif)
- Mode écriture sans distraction
- Responsive avec cibles tactiles optimiséesAstuce pro : Demande « invisible UI » pour masquer le chrome jusqu'à ce qu'il soit nécessaire.
8. Créatif & Non Conventionnel
Parfait pour : Agences créatives, portfolios, galeries d'art, projets expérimentaux
- Layout asymétrique, couches superposées, motion-driven, typographie expressive
- Composition en couches, grille cassée, chaos artistique, hiérarchie non conventionnelle
- Reveals déclenchés au scroll, effets parallaxe, positionnement dynamique
Crée une landing page d'agence créative avec un flair artistique :
- Grille asymétrique avec sections qui se chevauchent
- Typographies mixtes (display + serif + mono)
- Effets parallaxe déclenchés au scroll
- Imagerie en couches avec jeu de z-index
- Combinaisons de couleurs inattendues (palettes contrastées bienvenues)
- Éléments pivotés (-rotate-3, rotate-2)
- Tailles de texte dynamiques selon les breakpoints
- États hover qui révèlent des couches cachées
- Mobile : simplifié en single column avec énergie préservéeAstuce pro : Dis « break the grid » pour des layouts artistiques non conventionnels.
9. Luxueux & Sophistiqué
Parfait pour : Marques de luxe, e-commerce haut de gamme, services premium, joaillerie
- Accents dorés, textures marbre, typographie serif, ombres dramatiques
- Espacement premium, courbes élégantes, palette sophistiquée, détails raffinés
- Design intemporel, expérience élevée
Conçois un site de joaillerie de luxe avec une élégance sophistiquée :
- Police serif Playfair Display ou Cormorant
- Fond crème (bg-stone-50) avec accents dorés (text-amber-600)
- Ombres dramatiques sur les cartes (shadow-2xl)
- Padding généreux (py-20, px-16)
- Overlay subtil de texture marbre
- Transitions lentes et élégantes (duration-500 ease-in-out)
- Grande imagerie produit avec zoom au hover
- Navigation minimale et raffinée
- Mobile : maintien de l'élégance avec espacement ajustéAstuce pro : Combine « serif typography » avec « gold accents » pour un luxe instantané.
10. Organique & Naturel
Parfait pour : Marques bien-être, éco-produits, plateformes santé, entreprises durables
- Tons terre, formes fluides, éléments dessinés à la main, textures chaleureuses
- Inspiration botanique, courbes organiques, palette naturelle, bords doux
- Esthétique durable, chaleur terrienne, design biophilique
Crée une plateforme bien-être avec un design inspiré de la nature :
- Palette tons terre (verts, bruns, terracotta)
- Conteneurs aux courbes organiques (rounded-3xl avec formes irrégulières)
- Accents d'illustrations dessinées à la main
- Textures naturelles chaleureuses (overlays subtils de bruit)
- Animations fluides (courbes ease-in-out)
- Iconographie botanique
- Espacement confortable à l'échelle humaine
- Inspiration matériaux naturels (bois, pierre, feuille)
- Design mobile-first responsiveAstuce pro : Demande « organic curves » au lieu d'arrondis standards pour des formes plus naturelles.
11. Rétro & Nostalgique
Parfait pour : Jeux vidéo, apps musicales, divertissement, marques vintage
- Dégradés vintage, éléments pixelisés, reflets néon, typographie rétro
- Esthétique années 80, couleurs synthwave, effets VHS, vibes arcade
- Chrome nostalgique, rétro-futurisme, design throwback
Crée une app de streaming musical avec une esthétique synthwave :
- Fond en dégradé néon (from-pink-500 via-purple-500 to-blue-500)
- Effets de texte néon brillants (text-shadow rose/bleu)
- Polices pixelisées ou blocky (style Press Start 2P)
- Overlay d'effet de scan lines VHS
- Boutons rétro arrondis avec bordures épaisses
- Palette années 80 (rose hot, bleu électrique, violet néon)
- Shifts de dégradés animés
- Fonds grille avec perspective
- Interface rétro optimisée mobileAstuce pro : Utilise « synthwave » ou « vaporwave » pour une esthétique années 80/90 instantanée.
12. Corporate & Professionnel
Parfait pour : Logiciels entreprise, services financiers, plateformes B2B, outils business
- Lignes nettes, layout structuré, bleus sobres, espacement conservateur
- Hiérarchie traditionnelle, polish professionnel, design digne de confiance
- Organisation systématique, adapté business, interface fiable
Conçois un dashboard financier avec un professionnalisme corporate :
- Layout structuré à base de cartes
- Palette bleu sobre (blue-600, slate-700)
- Hiérarchie typographique claire (police Inter)
- Tableaux de données organisés avec lignes alternées
- Espacement et alignement conservateurs
- Charts professionnels (bar, line, pie avec Recharts)
- Ombres subtiles (shadow-md)
- Fil d'Ariane de navigation clair
- Validation de formulaire avec erreurs utiles
- Entièrement responsive avec optimisation tabletteAstuce pro : Mentionne « enterprise-grade » pour des rendus polis et professionnels.
13. Expérimental & Artistique
Parfait pour : Galeries d'art, vitrines créatives, projets avant-garde, expositions
- Grille cassée, choc de couleurs, polices expérimentales, composition chaotique
- Éléments avant-garde, chaos artistique, interaction non conventionnelle
- Design hors des règles, expression créative, expérimentation visuelle
Crée un site de galerie d'art avec une audace expérimentale :
- Système de grille volontairement cassé
- Combinaisons de couleurs contrastées (opposés complémentaires)
- Plusieurs polices en conflit
- Layout chaotique mais intentionnel
- Comportements de scroll inattendus
- Contenu qui se chevauche avec jeu de z-index créatif
- Typographie animée à l'entrée
- Reveals interactifs au hover
- Layout mobile asymétrique préservant le chaosAstuce pro : Dis « break design rules intentionally » pour un chaos contrôlé.
14. Chaleureux & Accueillant
Parfait pour : Plateformes communautaires, apps sociales, services amicaux, hôtellerie
- Ombres douces, coins arrondis, oranges chaleureux, espacement cosy
- Interactions amicales, tons accueillants, design confortable
- Hiérarchie accessible, mise en page invitante, centré humain
Crée une plateforme communautaire avec une chaleur accueillante :
- Palette chaude (orange-500, amber-400, yellow-300)
- Coins arrondis généreux (rounded-2xl)
- Drop shadows douces (shadow-lg)
- Espacement confortable (py-8, gap-6)
- Copy de boutons amical (« On y va ! » au lieu de « Soumettre »)
- Typographie accessible (Quicksand ou Comfortaa)
- Lifts subtils au hover (hover:scale-102)
- Fonds en dégradés chaleureux
- Optimisé mobile avec cibles tactiles confortablesAstuce pro : Combine « warm oranges » avec « soft shadows » pour un cosy instantané.
15. Data-Driven & Analytique
Parfait pour : Plateformes analytics, outils BI, dashboards, data visualisation
- Angles nets, inspiré charts, gris froids, alignement précis
- Esthétique dashboard, design data-first, codage couleur systématique
- Précision basée sur la grille, focus métriques, clarté analytique
Conçois un dashboard analytics avec une précision data-first :
- Palette gris froide (slate-50, slate-700, slate-900)
- Codage couleur systématique (vert positif, rouge négatif)
- Cartes à bords nets (rounded-lg, pas rounded-3xl)
- Affichage d'information dense
- Plusieurs types de charts (Recharts : line, bar, area, pie)
- Alignement et espacement précis
- Hiérarchie de métriques claire (grands nombres, petits labels)
- Panneau de filtres avec sélecteurs de plages de dates
- Fonctionnalité d'export (CSV, PDF)
- Responsive avec densité de données maintenueAstuce pro : Demande « dense information display » pour empaqueter efficacement les analytics.
16. Ludique & Gamifié
Parfait pour : Apps éducatives, fitness, suivi d'habitudes, outils d'apprentissage
- Badges de succès, anneaux de progression, animations de récompense, scoring ludique
- Éléments de gamification, effets level-up, compteurs de streak, trophées
- Design motivant, moments de célébration, feedback fun
Crée une app de suivi d'habitudes avec gamification :
- Badges de succès colorés avec icônes variées
- Anneaux de progression animés (transitions stroke-dashoffset)
- Compteur de streak avec emoji feu 🔥
- Animations de level-up avec effets confetti
- Système de points affiché en évidence
- Classement avec compétition amicale
- Déblocage de récompenses avec modales de célébration
- Barres de progression avec copy encourageant
- Illustrations ludiques pour les jalons
- Mobile-first avec retour haptique envisagéAstuce pro : Dis « gamified with rewards » pour intégrer des systèmes de succès.
17. Glassmorphique & En Couches
Parfait pour : Apps web modernes, portfolios design, sites vitrines, outils premium
- Verre dépoli, backdrop blur, transparence en couches, hiérarchie de profondeur
- Éléments flottants, surfaces translucides, overlays doux, cartes élevées
- Inspiration Apple, esthétique iOS, premium moderne
Crée un portfolio avec du glassmorphism partout :
- Cartes en verre dépoli (bg-white/10, backdrop-blur-md)
- Profondeur en couches avec plusieurs niveaux de z-index
- Bordures subtiles (border border-white/20)
- Fonds en dégradés derrière les éléments en verre
- Drop shadows pour l'élévation (shadow-2xl)
- Barre de navigation translucide
- États hover qui illuminent le verre (hover:bg-white/20)
- Transitions fluides entre les couches
- Fonctionne sur fonds sombres
- Mobile : effets verre simplifiés pour la performanceAstuce pro : Associe toujours le glassmorphism à des fonds plus sombres pour la visibilité.
18. Éditorial & Riche en Contenu
Parfait pour : Magazines, blogs, sites d'actualité, plateformes de contenu, édition
- Layout éditorial, grille style magazine, imagerie en vedette, hiérarchie typographique
- Centré article, optimisé lecture, contenu d'abord, qualité éditoriale
- Lettrines, citations en exergue, formatage riche
Conçois un blog style magazine avec un polish éditorial :
- Layout d'article multi-colonnes (2-3 colonnes sur desktop)
- Sections hero avec image en vedette
- Lettrines sur le premier paragraphe (first-letter text-6xl)
- Citations en exergue stylisées distinctement
- Police serif pour le corps (Merriweather ou Lora)
- Sans-serif pour les titres (Inter)
- Interlignage généreux (leading-loose)
- Galeries d'images avec légendes
- Sidebar d'articles connexes
- Estimations de temps de lecture
- Mobile : single column avec largeur de lecture optimiséeAstuce pro : Demande « magazine-style layout » pour des grilles éditoriales sophistiquées.
19. Néon & Cyberpunk
Parfait pour : Sites gaming, marques tech, apps de nuit, plateformes de divertissement
- Glow néon, esthétique cyberpunk, futurisme sombre, couleurs électriques
- Effets RGB, touches holographiques, chrome dystopique
- Saturation intense, effets glow, vibe tech urbaine
Crée une plateforme gaming avec une intensité cyberpunk :
- Fond noir pur (bg-black)
- Couleurs néon électriques (cyan-400, magenta-500, yellow-300)
- Effets de texte brillants avec text-shadow
- Animations de bordure néon (animate-pulse sur bordures)
- Boutons en dégradé holographique
- Effets de shift RGB au hover
- Motifs grille sombres avec accents néon
- Saturation intense partout
- Formes géométriques futuristes
- Mobile : intensité maintenue avec glows optimisésAstuce pro : Combine « neon glow » avec « black background » pour un impact maximal.
20. Scandinave & Minimal
Parfait pour : Marques lifestyle, magasins de meubles, produits minimalistes, esthétique nordique
- Textures bois clair, palette nordique sobre, inspiration hygge, simplicité épurée
- Beauté fonctionnelle, élégance retenue, abondance de whitespace
- Matériaux naturels, neutres doux, minimalisme cosy
Conçois un magasin de meubles avec une simplicité scandinave :
- Fond blanc cassé (bg-stone-50)
- Palette nordique sobre (gris froids, bleus doux, beiges chauds)
- Accents de texture bois clair
- Whitespace abondant (py-24, gap-16)
- Typographie sans-serif épurée (Inter ou similaire)
- Bordures et ombres minimales
- Photographie produit sur fonds blancs
- Navigation simple et fonctionnelle
- Effets hover retenus
- Mobile : simplicité et respiration maintenuesAstuce pro : Mentionne « hygge » ou « Nordic » pour une esthétique scandinave authentique.
21. Buzzwords pour une meilleure UI
Parfait pour : Élever n'importe quel design avec le bon vocabulaire
- Espacement, Typographie, Interactivité, Profondeur visuelle
- Responsivité, Polish, Performance, UX
"with generous padding and breathing room"
"mobile-first with comfortable touch targets"
"extra whitespace between sections""with clear typographic hierarchy"
"Inter font with -6 letter spacing"
"mix of display and body fonts"
"optimized for reading with proper line height""with smooth micro-interactions"
"hover states that feel responsive (scale-105)"
"subtle transitions on all interactive elements"
"loading states with skeleton screens""layered with shadows for depth (shadow-xl)"
"multiple z-index layers for hierarchy"
"subtle gradients for visual interest"
"backdrop blur for glassmorphic effects""mobile-first, fully responsive"
"desktop 3-column, tablet 2-column, mobile single-column"
"collapsible navigation on mobile"
"touch-optimized with larger tap targets""with error and success states"
"empty states with helpful guidance"
"loading indicators throughout"
"consistent color system (primary, secondary, accent)"
"accessible with proper contrast ratios""optimized animations (GPU-accelerated transforms)"
"lazy-loaded images"
"skeleton screens while loading"
"debounced search inputs""clear call-to-action hierarchy"
"intuitive navigation patterns"
"helpful microcopy and labels"
"progressive disclosure of complex features"
"keyboard navigation support"Astuce pro : Mélangez et combinez ces phrases pour personnaliser n'importe quel style.
22. Combinaisons puissantes
Parfait pour : Impact maximal avec des techniques combinées
- Premium SaaS, Bold Startup, Peaceful Wellness
Design with glassmorphic elements, generous spacing, smooth micro-interactions, Inter font with -6 letter spacing, and layered depth using shadow-xl. Mobile-first and fully responsive.Create with oversized typography, high contrast colors, brutalist grid, sharp interactions, and massive CTAs. Desktop-first with aggressive mobile breakpoints.Build with soft gradients, muted earth tones, gentle transitions, extra whitespace, and organic rounded corners. Single-column centered layout, mobile-optimized.Astuce pro : Choisissez une combinaison qui correspond à la personnalité de votre marque et tenez-vous-y avec constance.
23. Astuces pro
Parfait pour : Obtenir les meilleurs résultats de vos prompts
- Spécificité, Polices, Animations, Responsive
- États, Accessibilité, Opinion
- 1Soyez précis sur l'espacement , « py-24 » est meilleur que « beaucoup de padding »
- 2Nommez les polices , « Inter font » donne de meilleurs résultats que « sans-serif moderne »
- 3Spécifiez les animations , « scale-105 au hover » est plus clair que « boutons animés »
- 4Définissez le responsive , Ne dites pas juste « responsive », expliquez comment ça s'adapte
- 5Demandez les états , Toujours demander hover, loading, error et empty states
- 6Mentionnez l'accessibilité , Ajoutez « with proper contrast ratios » pour de meilleurs rendus
- 7Soyez opinionné , « Bold, saturated colors » fonctionne mieux que « coloré »
Astuce pro : Plus votre prompt est spécifique et opinionné, meilleur sera le rendu.
24. Modèle de prompt prêt à l'emploi
Parfait pour : Démarrer n'importe quel nouveau projet de design
- Style visuel, Éléments interactifs, Structure
- Comportement responsive, Exigences techniques
Design a [type of page/component] with [aesthetic style]:
Visual Style:
- [Color palette specifics]
- [Typography choices]
- [Spacing/layout approach]
Interactive Elements:
- [Hover states]
- [Transitions and animations]
- [Loading/error states]
Structure:
- [Layout grid system]
- [Component hierarchy]
- [Navigation pattern]
Responsive Behavior:
- Desktop: [specifics]
- Tablet: [specifics]
- Mobile: [specifics]
Technical Requirements:
- [Framework/libraries]
- [Data structure]
- [Key features]
Output: [What you expect as final deliverable]Astuce pro : Remplissez ce modèle avant de démarrer tout projet pour des résultats constamment excellents.
Conçu pour les designers, développeurs et passionnés d'IA qui veulent des résultats au pixel près à partir de leurs prompts.
