Il y a une raison pour laquelle les apps faites avec l'IA ont parfois l'air amateur, même si elles fonctionnent : elles n'ont pas de système de design. Chaque écran que l'IA génère de son côté utilise des couleurs différentes, des espacements différents, des boutons différents — et le résultat donne l'impression d'avoir été fait par cinq personnes qui ne se sont pas parlé. La solution n'est pas de « soigner » davantage chaque écran ; c'est de construire UNE fois un système de design et de faire en sorte que l'IA le respecte toujours. Et l'erreur la plus courante, c'est de le laisser pour la fin : la PREMIÈRE chose que tu dois demander à ton IA, avant le moindre écran, c'est de construire ton système de design. Dans ce guide, tu verras quelles sections il doit contenir (les mêmes que celles utilisées par les produits premium), à quoi ressemble un vrai système professionnel, et deux prompts prêts à l'emploi pour que ton IA — Claude, Codex, Cursor, v0 — te construise le tien avec un niveau digne de la Silicon Valley.
Tu demandes un écran à l'IA et il est réussi. Tu en demandes un autre, et elle utilise un autre ton de violet, une autre taille de bouton, un autre espacement. Un troisième, et une ombre apparaît qui n'était nulle part ailleurs. Chaque écran, pris séparément, n'est pas mauvais — mais ensemble, ton app a l'air d'avoir été faite par cinq personnes qui ne se sont pas mises d'accord. C'est ça qui donne un air amateur à quelque chose, même si ça fonctionne parfaitement.
Un système de design est un document unique contenant TOUTES les règles visuelles de ton produit : quelles couleurs existent et pour quoi, quelles tailles de texte, combien d'espace entre les choses, comment sont les boutons, les cartes, les animations. L'IA le lit, et à partir de là tout écran qu'elle génère sort cohérent — parce qu'elle n'invente plus, elle suit les règles.
Voici l'erreur que presque tout le monde commet : demander d'abord des écrans et penser au design « après, quand j'aurai le temps ». À ce moment-là tu as déjà vingt écrans incohérents et les corriger devient un rafistolage éternel. La PREMIÈRE chose que tu dois demander à ton IA, avant le premier écran, c'est de construire ton système de design. Ainsi tout ce qui vient ensuite naît cohérent. C'est la décision qui élève le plus le fini de ton produit, et elle ne coûte presque rien.
Un système de design sérieux, ce n'est pas « une palette de couleurs ». C'est exhaustif. Voici les sections que contiennent les systèmes de niveau enterprise (les mêmes qu'utilisent des produits comme Linear, Vercel ou Raycast), et que ton prompt doit demander :
Pour que tu voies le NIVEAU de détail que tu dois exiger, voici un extrait du type de système qu'on utilise pour construire des produits premium. Remarque la précision — il ne dit pas « utilise du violet », il dit exactement quel violet et avec quelle opacité pour chaque situation :
COLOR DE MARCA (acento) — aparece SOLO en lo interactivo/activo, nunca decorativo Primary: #8B5CF6 · Light: #A78BFA (texto/iconos) · Deep: #7C3AED (presionado) SUPERFICIES (5 niveles de profundidad, no "negro plano"): surface-1 #0A0A0A (fondo) · surface-2 #0D0D0D (sidebar) · surface-3 #111111 (tarjetas) surface-4 #1A1A1A (dropdowns) · surface-5 #222222 (activo sobre elevado) TEXTO (por opacidad, no por color): Primario #FFFFFF · Secundario rgba(255,255,255,0.70) · Terciario 0.45 · Apagado 0.28 TIPOGRAFÍA — Inter · base 14px · pesos SOLO 400/500/600/700 (nunca 300/800/900) BODY 12px · TITLE 16px · HERO 24px · letter-spacing 0.07em en labels en mayúscula ESPACIADO — grid de 8px (4px micro). Nunca números impares (3,7,9,11px). RADIUS — inputs 8px · tarjetas 12px · modales 16px (los hijos SIEMPRE menos que el padre) ANIMACIÓN — solo opacity/transform/box-shadow · hover scale 1.02–1.05 · nunca animar width/height
Si tu n'as pas de marque définie, laisse l'IA proposer l'esthétique et monter le système complet. Copie-le et colle-le à ton agent de design/code :
Avant de construire le moindre écran, je veux qu'on crée le SYSTÈME DE DESIGN de mon produit, pour que tout ce que tu génères ensuite soit cohérent. Mon produit est : [décris ton app et à qui elle s'adresse]. L'esthétique que j'aime : [ex. "sombre premium style Linear" / "claire et conviviale" / "je ne sais pas, propose toi-même"]. Crée un document de système de design COMPLET et exhaustif, avec ces sections, chacune avec des VALEURS EXACTES (pas d'approximations) : 1. Philosophie/identité et piliers de design. 2. Couleur : couleur de marque + échelle de surfaces/fonds par niveaux + échelle de texte par opacité + bordures + couleurs sémantiques (succès/erreur/avertissement/info) + palette de graphiques. 3. Typographie : police, échelle de tailles exacte, graisses autorisées, hauteurs de ligne, letter-spacing. 4. Espacement et grille (unité de base et multiples). 5. Border-radius par type d'élément. 6. Ombres/élévation par niveaux. 7. Composants (boutons, cartes, inputs, modales, badges, tooltips, dropdowns) avec leurs valeurs. 8. Mouvement/animation (durées, easing, ce qui s'anime et ce qui ne s'anime pas). 9. États (repos, hover, focus, actif, désactivé, erreur, succès). 10. Iconographie, layout/grille, états vides et une liste d'ANTI-PATTERNS (ce qu'il ne faut jamais faire). IMPORTANT : indique clairement ce qui est FLEXIBLE (adaptable, ex. la couleur de marque) et ce qui est NON-NÉGOCIABLE (les valeurs exactes qu'on ne touche pas). L'objectif : que le résultat soit indiscernable d'un produit premium de la Silicon Valley. Sauvegarde ce système et respecte-le sur CHAQUE écran qu'on construira à partir de maintenant.
Si tu as déjà des couleurs, un logo ou une identité, utilise celui-ci pour que l'IA monte le système complet en les respectant :
Je veux créer le SYSTÈME DE DESIGN complet de mon produit à partir de ma marque actuelle, avant de construire des écrans. Ma marque : couleur(s) [colle tes couleurs/hex], typographie [si tu en as une], et ce style/cette sensation [décris : sérieux, amusant, luxueux, etc.]. Mon produit est [décris-le]. À partir de ma marque, construis un système de design COMPLET et exhaustif avec des valeurs EXACTES, couvrant : philosophie, couleur (ma marque + surfaces + texte + bordures + sémantiques + graphiques), typographie (échelle, graisses, hauteurs), espacement/grille, border-radius, ombres, composants (boutons, cartes, inputs, modales, badges, tooltips), mouvement/animation, états, iconographie, layout, états vides et anti-patterns. Règles : respecte mes couleurs de marque comme base ; dérive les variantes (claires, sombres, opacités) à partir d'elles ; indique ce qui est flexible et ce qui est non-négociable ; et que le fini ait l'air premium. Une fois terminé, respecte-le sur chaque écran qu'on construira.
Pour que tu ne partes pas de zéro, voici un système de design complet et professionnel — esthétique dark premium, neutre et générique. Copie-le en entier, colle-le à ton IA, et dis-lui « construis tout en respectant ce système ». Ou change la couleur de marque (la seule chose flexible) et fais-le tien. C'est le même niveau de rigueur qu'utilisent les produits de la Silicon Valley : chaque valeur est affinée, rien n'est laissé au hasard.
Construis TOUT en respectant ce système de design. La seule chose flexible est la couleur de marque ; le reste, ce sont des valeurs exactes, ne les change pas. === PHILOSOPHIE === Interface sombre premium, minimaliste et précise (style Linear/Vercel). Profondeur par couches, pas plat. La couleur de marque apparaît SEULEMENT dans l'interactif/actif, jamais comme décoration. Hiérarchie par taille+graisse+opacité, pas par couleur. === COULEUR === Marque (FLEXIBLE — remplace-la par la tienne) : Primary #8B5CF6 · Light #A78BFA (texte/icônes) · Deep #7C3AED (pressé). Surfaces (5 niveaux de profondeur) : surface-1 #0A0A0A (fond) · surface-2 #0D0D0D (sidebar) · surface-3 #111111 (cartes) · surface-4 #1A1A1A (dropdowns/tooltips) · surface-5 #222222 (actif sur élevé). Ne saute jamais de niveaux. Texte (par opacité blanche) : primaire #FFFFFF · secondaire rgba(255,255,255,0.70) · tertiaire 0.45 · quaternaire 0.28 · atténué 0.20. Bordures (blanc avec opacité) : forte 0.20 · normale 0.10 · subtile 0.08 · hairline 0.06. Sémantiques : succès #10B981 · avertissement #F59E0B · erreur #EF4444 · info #3B82F6 (fond à 0.07-0.10, bordure 0.15-0.22, texte couleur pleine). === TYPOGRAPHIE === Police : Inter (variable), antialiased, tabular-nums sur les chiffres. Base 14px. Échelle (px) : micro 9 · caption 10 · small 11 · body 12 · base 13 · subhead 14 · title 16 · heading 18 · display 20 · hero 24. Graisses SEULEMENT : 400 (corps) · 500 (labels/nav) · 600 (titres/boutons) · 700 (chiffres/KPIs). JAMAIS 300, 800 ni 900. Hauteurs de ligne : labels/boutons 1.0-1.2 · corps 1.55 · code 1.6. Labels en majuscule : 10-11px, graisse 600-700, letter-spacing 0.07em, couleur opacité 0.28-0.40. Jamais le corps en majuscule. === ESPACEMENT === Grille de 8px (4px seulement micro-espacement interne). Valeurs : 4·8·12·16·20·24·32·40·48·64. JAMAIS de nombres impairs (3,7,9,11px) pour le layout. === BORDER-RADIUS === badges 4-6px · inputs/dropdown-items 8px · cartes 12-14px · modales 16px · hero 20px · cercle 50%. Règle : les enfants TOUJOURS avec un rayon inférieur à celui du parent. === OMBRES === cartes : seulement bordure (sans ombre) · dropdowns : 0 8px 28px rgba(0,0,0,0.55) · modales : 0 32px 80px rgba(0,0,0,0.75). Glow de marque au hover sur cartes interactives : 0 0 0 1px rgba(MARQUE,0.40), 0 8px 32px rgba(MARQUE,0.16). === COMPOSANTS (valeurs exactes) === Bouton standard : padding 8px 16px, radius 8px, font 12px graisse 600. Primaire : bg rgba(MARQUE,0.20), bordure rgba(MARQUE,0.40), texte Light. Ghost : bg rgba(255,255,255,0.05), bordure 0.08, texte 0.45. Carte : padding 12-16px, radius 12-14px, bordure rgba(255,255,255,0.05), bg rgba(255,255,255,0.02). Hover : bg 0.045. Input : padding 8px 12px, radius 8px, bg rgba(255,255,255,0.04-0.06), bordure 0.10. Focus : bordure rgba(MARQUE,0.40) + ombre 0 0 0 3px rgba(MARQUE,0.12). Modale : bg #111111, bordure 0.10, radius 16px, overlay rgba(0,0,0,0.72). Badge : 9px graisse 700, padding 2px 6px, radius 4px. Nav item actif : bg rgba(MARQUE,0.15), texte Light, graisse 600. Repos : transparent, texte 0.45, graisse 400. === MOUVEMENT === Anime SEULEMENT opacity, transform (scale/translate) et box-shadow. JAMAIS width/height/padding/margin (causent un reflow). Durées : tap 0.08s · tooltip 0.12s · entrée/sortie 0.15s · transition standard 0.18-0.22s · ambiance (pulsation) 2s+. Hover bouton : scale 1.02-1.05 · tap : scale 0.93-0.97. Easing standard : cubic-bezier(0.16, 1, 0.3, 1). === ÉTATS (chaque élément interactif) === Repos · Hover (teinte + scale, 80-180ms) · Focus (bordure marque + anneau) · Actif (scale 0.93-0.97) · Désactivé (opacité 0.35-0.50, sans pointeur) · Erreur (bordure rouge + texte erreur) · Succès (flash vert 1800ms). === ICÔNES / LAYOUT / VIDES === Icônes : lucide, 12-16px standard, couleur héritée du texte. Layout : sidebar 64px (icône) ou 176px (dépliée), panneaux 280-320px, contenu flex-1, max 1440px. État vide : icône atténuée 0.15 + titre 0.35 + sous-titre 0.20 + CTA ghost. === ANTI-PATTERNS (jamais) === Jamais graisse 300/800/900 dans l'UI · jamais de couleur grise nommée (utilise rgba blanc) · jamais de nombres impairs d'espacement · jamais animer le layout · jamais "transition: all" · jamais la couleur de marque sur plus de 15-20% de l'écran · jamais le même rayon (ou supérieur) sur un enfant que sur son parent. Objectif : que le résultat soit indiscernable d'un produit premium de la Silicon Valley. Respecte ces valeurs sur CHAQUE écran.
#8B5CF6) pour la tienne. Si tu veux quelque chose de plus sur mesure, utilise les Prompts 1 ou 2 ci-dessus pour que ton IA t'en génère un propre avec cette même structure.CLAUDE.md (ou le fichier d'instructions de ton agent) et, de temps en temps, demande-lui de vérifier si un écran est sorti des règles. L'habitude : aucun nouvel écran sans qu'il respecte le système. C'est la même chose que le protocole C-A-R, mais pour le design.Join 4,200+ builders. No credit card. Build your first app with AI in minutes.