Obtenir des interfaces visuellement abouties avec Claude et Claude Design exige des consignes précises pour éviter les rendus génériques par défaut (polices standard, dégradés criards ou espacements mal calibrés).
Cette sélection de 15 prompts couvre l’ensemble du flux de conception : instructions système, maquettes complètes, composants modulaires, identités visuelles et déclinaisons sociales. Ces modèles intègrent les contraintes techniques réelles de Claude, du code SVG pur aux variables Tailwind compatibles avec la fenêtre Artifacts.
1. Le Master Prompt « Distilled Aesthetics » (Rôle système)
Ce prompt initial neutralise les automatismes visuels de l’IA et impose des règles de design issues des standards d’agences reconnues (Stripe, Linear ou Apple). Il s’utilise en en-tête de session ou dans les instructions système personnalisées.
Code du prompt à copier :
Tu es un Senior Frontend Designer et un Expert UI/UX de classe mondiale. Ton objectif est de concevoir des interfaces web d'une esthétique irréprochable qui s'éloignent radicalement des clichés de l'IA (pas de dégradés violet/rose génériques sur fond blanc, pas de police Inter/Arial par défaut).
Applique rigoureusement les principes suivants à chaque composant ou page générée :1. TYPOGRAPHIE : Utilise des associations de polices de caractères distinctives et premium (ex: une police Serif élégante pour les titres comme Playfair Display ou Merriweather, et une Sans-Serif géométrique propre pour le corps de texte). Assure une échelle typographique réactive et accessible.2. COULEURS & THÈME : Crée une palette de couleurs sophistiquée en utilisant des variables CSS. Priorise des contrastes forts conformes aux normes WCAG AA. Choisis un thème visuel affirmé (ex: Minimalisme Scandinave, Cyberpunk raffiné, ou Brutalisme Élégant).3. PROFONDEUR & ESPACE : Implémente une superposition de couches (layering) avec des arrières-plans subtils, des micro-textures ou des dégradés de bruit transparents. Utilise des espacements généreux et harmonieux (système basé sur 4px/8px).4. MICRO-ANIMATIONS : Intègre des animations fluides uniquement en CSS (staggered reveals, transitions au survol adoucies, micro-interactions de boutons).
Génère le code complet, responsive et moderne pour : [Insère ton projet ici].
2. Le prompt pour Landing Page complète à haute conversion
Ce template impose une hiérarchie visuelle stricte et une division claire en quatre zones stratégiques pour éviter les mises en page compactes ou surchargées.
Conçois l'interface complète d'une Landing Page (Page d'accueil) responsive pour [Nom/Type du projet, ex: une application de productivité pour freelances].
Structure l'interface avec les sections suivantes :1. BARRE DE NAVIGATION (Navbar) : Fixe ou collante au défilement, avec un effet de flou en arrière-plan (backdrop-blur) et un bouton d'action (CTA) principal bien visible.2. SECTION HÉRO (Hero Section) : Un titre accrocheur à forte hiérarchie visuelle, un sous-titre aéré, et un groupe de deux boutons (un CTA principal contrasté et un CTA secondaire discret). Laisse un espace réservé (placeholder) pour une capture d'écran de l'application avec un effet de cadre premium.3. SECTION FONCTIONNALITÉS (Features) : Une grille asymétrique ou une disposition en bento-grid mettant en valeur 3 à 4 fonctionnalités clés avec des icônes minimalistes.4. FOOTER : Propre, organisé en colonnes, avec les liens essentiels et un sélecteur de mode sombre/clair.
Contrainte : Respecte une structure de mise en page aérée (padding et margin généreux) pour éviter toute surcharge cognitive.
3. Le prompt pour Tableau de Bord complexe (Dashboard SaaS)
Conçu pour les outils d’administration et les applications de gestion manipulant d’importants volumes de données sans saturer l’affichage.
Crée l'interface utilisateur d'un tableau de bord (Dashboard) d'administration pour [Type d'application, ex: la gestion d'une flotte de vélos électriques].
L'interface doit être divisée en trois zones majeures :- NAVIGATION LATÉRALE (Sidebar) : Rétractable, utilisant des icônes épurées accompagnées de texte, avec un indicateur visuel clair sur l'onglet actuellement actif.- BARRE SUPÉRIEURE (Top Bar) : Comprenant une barre de recherche globale contextuelle, un bouton de notifications et le profil de l'utilisateur.- ZONE DE CONTENU PRINCIPALE : Organisée avec 3 indicateurs clés de performance (KPI Cards) au sommet, suivis d'un grand tableau de données interactif (Data Table). Le tableau doit inclure des badges de statut colorés (ex: Succès en vert doux, Alerte en orange/rouge discret) et des options de filtrage.
4. Le prompt pour composant de carte « Bento-Style »
Génère des conteneurs modulaires réutilisables, intégrant la gestion des arrondis modernes, des ombres portées et des états interactifs.
Agis en tant que Senior Frontend Engineer et UI Designer. Génère le code [HTML/Tailwind ou React/TypeScript] pour un composant de carte "Bento-Style" réutilisable pour afficher [Insère l'usage, ex: une métrique clé ou une fonctionnalité produit].
Règles de design strictes pour ce composant :- CONTENEUR : Bordures ultra-fines semi-transparentes (ex: border-slate-200/60 ou dark:border-white/10), un micro-arrondi élégant (rounded-2xl ou rounded-3xl), et un fond subtilement teinté.- PROFONDEUR : Utilise des ombres portées douces et diffuses (shadow-sm ou une ombre personnalisée très légère), pas de noir pur.- HIÉRARCHIE : Un petit badge de catégorie en haut, un titre en texte gras (font-semibold), et une zone de contenu aérée.- EFFETS : Intègre une transition CSS fluide sur le hover (un très léger scale ou un changement subtil de la couleur de bordure) avec transition-all duration-300 ease-out.- ÉTATS D'INTERFACE : Prévois et stylise : état par défaut, survol, sélectionné et chargement (skeleton loader).Fournis le code de manière isolée et propre.
5. Le prompt pour composant de Navigation dynamique (Navbar / Sidebar)
Ce prompt génère un système de navigation superposé, responsive et accessible au clavier.
Génère un composant de [Barre de navigation supérieure (Navbar) OU Menu latéral (Sidebar)] interactif et responsive en [Tailwind CSS / React].
Spécifications techniques et visuelles :- FLUIDITÉ : La navigation doit utiliser un effet de flou en arrière-plan (backdrop-blur-md avec un fond semi-transparent) pour se superposer proprement au reste du site.- ÉTAT ACTIF : L'élément de menu actuellement sélectionné doit avoir un indicateur visuel clair mais subtil (ex: un fond légèrement teinté avec un arrondi parfait ou une fine ligne texturée).- ÉTATS INTERACTIFS : Définis explicitement les styles pour le :hover, :focus-visible (accessibilité clavier), et l'état désactivé (:disabled).- RESPONSIVE : Inclus un bouton menu "burger" fonctionnel pour les écrans mobiles avec une transition d'icône propre.
6. Le prompt pour Tableau de Données avancé (Data Table)
Spécialement adapté aux applications web denses nécessitant des alignements précis, des micro-actions et des statuts visuels désaturés.
Conçois un composant de Tableau de Données (Data Table) haut de gamme et ultra-lisible pour présenter [Insère le type de données, ex: des transactions financières / des utilisateurs actifs].
Règles d'interface pour le tableau :- EN-TÊTE : Un en-tête de tableau discret, en petites majuscules (tracking-wider text-xs font-medium), avec une couleur de texte contrastée mais douce.- LIGNES : Un espacement généreux entre les lignes (padding vertical important). Utilise un effet de surbrillance très léger au survol de la ligne entière (row hover effect).- BADGES DE STATUT : Intègre des composants de badges encapsulés pour les statuts (ex: Succès, En attente, Échec) utilisant des couleurs pastel désaturées (ex: fond vert très clair, texte vert foncé).- ACTIONS : La dernière colonne doit contenir un bouton d'action discret (icône de points de suspension "...") qui ouvre un micro-menu contextuel au clic.
7. Le prompt pour Formulaires et Champs de Saisie premium
Permet d’obtenir des champs de texte, zones de saisie et boutons interactifs respectant les micro-interactions modernes.
Génère un groupe de composants de formulaire comprenant : un champ de texte (Input Text), une zone de texte (Textarea) et un bouton de soumission (Submit Button).
Contraintes de design :- ENROBAGE : Les champs de saisie doivent avoir un fond légèrement grisé au repos, qui devient blanc (ou noir profond en mode sombre) avec une bordure de couleur de marque fine lors du focus (focus:ring-2 focus:ring-brand).- PLACEHOLDERS : Des textes d'exemple discrets qui ne se confondent pas avec la saisie de l'utilisateur.- GESTION DES ERREURS : Inclus une variante du composant en état d'erreur (bordure rouge subtile, message d'erreur aligné en dessous avec une icône d'avertissement).- BOUTON : Le bouton principal doit avoir un effet de micro-dégradé ou une couleur unie forte, avec un état de chargement (spinner ou texte "Chargement...") inclus.
8. Le prompt d’Audit UX critique et de réécriture Micro-Copy
Ce prompt positionne Claude comme un réviseur strict pour détecter les frictions ergonomiques et clarifier les formulations textuelles d’une interface existante.
Agis comme un critique UI/UX impitoyable et un micro-rédacteur. Voici mon interface/code actuel : [Insérer le code ou décrire les étapes du parcours].
1. Analyse l'interface à la recherche de charge cognitive excessive, de frictions visuelles, de problèmes d'alignement ou d'éléments trop typés "générés par IA".2. Réécris les micro-textes (boutons, messages d'erreurs, info-bulles) pour les rendre clairs et engageants.3. Fournis la liste des correctifs classés par sévérité avec le code CSS/Tailwind mis à jour pour améliorer la hiérarchie.
9. Le prompt pour Logo vectoriel en SVG pur
Claude ne produit pas de fichiers .ai ou .eps, mais il peut générer du code SVG mathématiquement optimisé, directement affichable et intégrable.
Agis en tant que Directeur Artistique et Expert en Identité Visuelle. Je veux que tu codes un logo complet en SVG pur pour ma marque.
Détails de la marque :- NOM : [Nom de la marque]- SECTEUR : [Ex: Café de spécialité, IA générative, Mode éco-responsable]- STYLE VISUEL : [Ex: Minimaliste suisse, Logotype typographique, Emblème géométrique]
Spécifications techniques :- Code SVG autonome, valide, viewBox responsive et sans balises superflues.- Crée un symbole géométrique fort associé au nom.- Utilise des tracés (path), cercles (circle) ou polygones (polygon) aux coordonnées précises.- Fournis deux versions : une pour fond clair (Dark Brand Asset) et une pour fond sombre (Light Brand Asset).- Utilise une police système standard haut de gamme (ex: Playfair Display ou Geist Sans) intégrée via CSS dans le SVG si du texte est présent.
10. Le prompt pour Palette de Couleurs et Design Tokens (Règle 60-30-10)
Génère un système chromatique complet prêt à l’emploi pour les feuilles de style et les fichiers de configuration technique.
Crée la charte chromatique et le système de jetons (tokens) visuels pour une marque de [Secteur/Produit] dont l'ambiance se veut [Style, ex: Brutaliste haut de gamme, Calme et organique, Technologique et sérieux].
Fournis un rapport structuré comprenant :1. PALETTE PRIMAIRE & SECONDAIRE : Codes HEX, RGB et HSL avec justification psychologique.2. COULEURS DE SOUTIEN : Gamme de gris teints (warm ou cool grays) pour fonds et bordures.3. VARIABLES : Code sous forme de variables CSS (:root) et objet de configuration Tailwind CSS (tailwind.config.js).4. RÈGLE DE PROPORTION : Application selon la règle UX du 60-30-10 (60% dominante, 30% secondaire, 10% accent).
11. Le prompt pour Guide de Style Typographique
Définit les règles de mise en page textuelle, les contrastes et les critères d’accessibilité pour le web.
Rédige le guide de style typographique officiel pour la marque [Nom de la marque]. Le ton de la marque est [ex: Audacieux et disruptif, Institutionnel et rassurant].
Inclus :- ASSOCIATION DE POLICES : Deux polices complémentaires sur Google Fonts (titres et corps de texte).- ÉCHELLE TYPOGRAPHIQUE : Tailles exactes (rem et px), line-height et font-weight pour H1, H2, H3, Body Text et Captions.- DIRECTIVES D'UTILISATION : 3 règles strictes sur ce qu'il faut faire et NE PAS faire (justification, letter-spacing).
12. Le prompt pour Motifs d’Arrière-Plan et Textures en SVG
Permet de créer des fonds répétables ou asymétriques pour les sites web et les bannières de communication sans alourdir le poids des pages.
Génère le code pour un pattern (motif de fond) abstrait et moderne en SVG ou CSS pour habiller les supports de communication (bannières LinkedIn/Twitter, arrière-plans de site web) de ma marque de [Secteur].
Le motif doit être répétable (seamless) ou structuré de manière asymétrique et élégante. Utilise des transparences (opacity), des formes géométriques épurées ou des lignes fines vectorielles pour donner de la texture sans surcharger l'espace.
13. Le prompt pour Prototypage Bento-Grid interactif (React / Tailwind)
Exploite directement les capacités de rendu interactif de la fenêtre Artifacts pour tester des grilles d’applications complexes.
Design a modern, responsive Bento-Grid dashboard interface using React and Tailwind CSS for [insert use case, e.g., personal finance app].
Ensure the grid cells are micro-components with soft box-shadows, subtle card borders, and varied aspect ratios. Include interactive states for hovers and clicks, and ensure the entire layout adapts flawlessly from mobile to widescreen monitors. Provide the code in a single self-contained block.
14. Le Master Prompt pour Guide de Style de Marque complet (5 Sections)
Structure l’ensemble de l’identité de marque en un document exhaustif couvrant stratégie, actifs graphiques et configuration UI.
Agis en tant que Directeur de Création et Brand Strategist Senior. Conçois le Guide de Style de Marque complet pour mon projet :- NOM : [Nom de la marque] | SECTEUR : [Activité] | CIBLE : [Audience] | VALEURS : [Valeurs clés]
Structure le document selon ces 5 sections :1. STRATÉGIE & ADN : Manifeste (3-4 phrases), Personnalité/Archétype (4 traits), Ton éditorial (tableau Do's / Don'ts avec 3 exemples).2. IDENTITÉ VISUELLE : Palette de 5 couleurs (HEX, RGB, HSL, rôles UI), règle du 60-30-10, Font Pairing Google Fonts avec échelle CSS complète.3. CONCEPTION LOGO : Directives d'exclusion (fond clair/sombre) et code SVG complet, responsive et autonome.4. COMPOSANTS RÉFÉRENCE : Objet theme.extend pour tailwind.config.js et code complet du Bouton Maître (:hover, :focus, :disabled).5. IMAGERIE & ICONOGRAPHIE : Style des icônes (traits, aplats) et direction artistique photographique (cadrage, lumière).
15. Le prompt pour Guide de Style et Contenu Réseaux Sociaux (4 Piliers)
Traduit l’identité visuelle en gabarits techniques et en règles éditoriales pour les plateformes sociales (LinkedIn, Instagram, TikTok, X).
Agis en tant que Social Media Director et Brand Designer Senior. Conçois le "Guide de Style et de Contenu pour les Réseaux Sociaux" basé sur l'identité de marque [Nom / Rappel de la marque].
Structure le guide selon ces 4 piliers :1. COHÉRENCE VISUELLE & TEMPLATES : Spécifications des formats (Carrousels 4:5/1:1, Stories/Reels 9:16, Bannières), code SVG pur d'un template carré (1080x1080) avec zones de texte et logo, et polices de substitution (Canva/Figma/Apps).2. STRATÉGIE DE CONTENU : 3 piliers thématiques avec exemples de titres, et formule anatomique d'une légende (Accroche > Corps > CTA > Hashtags).3. TON SUR LES RÉSEAUX : Tableau d'adaptation par canal (LinkedIn, Instagram, TikTok) et 2 réponses types aux commentaires (compliment et critique).4. PRODUCTION VIDÉO : 3 techniques visuelles/textuelles pour le Hook des 3 premières secondes, identité sonore et style des sous-titres.
Méthodes d’exécution recommandées
| Pratique recommandée | Description de la méthode | Bénéfice concret |
|---|---|---|
| Contraintes négatives | Interdire explicitement le noir pur #000000, les bordures grises par défaut et les dégradés fluo. | Évite les rendus visuels typiques des interfaces générées par IA. |
| Décomposition séquentielle | Faire valider l’ambiance et la palette avant de demander la structure, puis les micro-interactions. | Évite les troncatures de code et garantit la cohérence globale. |
| Déconstruction d’images | Fournir une capture d’écran de référence avec l’instruction d’extraire les proportions et la typographie. | Transfère fidèlement les codes visuels d’une interface existante en code React/Tailwind. |
| Injection de Design Tokens | Fournir ses variables CSS ou classes Tailwind au début du prompt de composant. | Assure une intégration sans rupture stylistique dans un projet existant. |
| Prévisualisation Artifacts | Ajouter la consigne d’isoler le code dans un bloc autonome unique. | Permet d’inspecter directement les boutons, tableaux et SVG dans la fenêtre latérale de Claude. |
| Outils externes | Associer les requêtes à des extensions MCP de rendu ou des outils comme Impeccable. | Visualisation des modifications de style en temps réel sans casser le code source. |