Comment faire un beau design de site avec l'IA

Tu as demandé un site à Lovable, à v0 ou à ChatGPT. En trente secondes, il est là, il marche, tu es content. Puis tu le regardes vraiment, et quelque chose cloche.

Tu n'arrives pas à mettre le doigt dessus, mais c'est moche. Ou plutôt : c'est fade. Ça ressemble à un site, sans ressembler à ton site.

Tu retapes un prompt. « Fais-le plus beau. » « Plus moderne. » « Plus premium. » Et tu obtiens exactement la même chose avec une autre couleur.

Le problème n'est pas ton prompt. Il est ailleurs, et une fois que tu l'as compris, tu arrêtes de tourner en rond.

Pourquoi les sites faits avec l'IA sont tous moches

Ils ne sont pas moches au sens de ratés. Ils sont moches au sens d'interchangeables.

Ouvre trois sites générés par trois personnes différentes cette semaine. Tu verras le même grand titre centré, le même dégradé violet, la même rangée de trois cartes avec une petite icône, la même section témoignages avec des visages inventés, le même pied de page en quatre colonnes.

La raison est simple et technique : tous ces outils s'appuient sur les mêmes briques. Tailwind pour les styles, shadcn/ui pour les composants. Ce sont d'excellents outils, utilisés par la moitié du web. Mais quand personne ne touche aux valeurs par défaut, tout le monde sort la même page.

L'IA ne choisit pas un style. Elle prend le style le plus probable, c'est-à-dire le plus vu. Demander « plus beau » ne l'aide pas, parce que « beau » ne veut rien dire pour une machine. C'est un mot d'humain.

Ma technique : donner de la matière à l'IA

Le déclic tient en une phrase : arrête de décrire, montre.

Une IA est très mauvaise pour inventer une direction artistique. Elle est excellente pour reproduire une direction qu'on lui met sous le nez. Donc au lieu de lui demander un beau design, tu lui donnes trois ou quatre sites que tu trouves beaux, et tu lui demandes d'en extraire les règles.

Concrètement, ça se passe en trois temps :

1. Tu vas piocher trois ou quatre sites qui te plaisent dans une galerie, dans ton secteur ou pas
2. Tu récupères leur matière : les couleurs exactes, les polices, les tailles, les espacements
3. Tu donnes tout ça à l'IA avant de lui demander quoi que ce soit d'autre

La différence entre « fais un site premium pour un cabinet comptable » et « voilà quatre sites que j'aime, voilà leurs couleurs et leurs polices, construis-moi un cabinet comptable avec ces règles » est spectaculaire. Ce n'est plus la même sortie.

Où trouver de beaux sites à copier

Pas copier au sens voler. Copier au sens s'inspirer, comme tous les designers depuis toujours.

Voici les galeries que j'ouvre, et ce que chacune sert le mieux :

• Lapa Ninja : plus de 7 300 landing pages classées, avec les captures en pleine page. La plus généreuse pour démarrer, et elle est gratuite
• Saaspo : des pages de SaaS classées par secteur et par section. Tu cherches juste une belle section tarifs ou un beau bloc de témoignages, c'est là
• Land-book : très bonne pour explorer des directions de couleur et des styles entiers plutôt que des pages isolées
• Godly : le haut du panier, des sites très travaillés. Attention, c'est inspirant mais souvent trop ambitieux à reproduire
• Mobbin : pour les applications et pas les sites. Des parcours complets, écran par écran, dans de vrais produits

Ma méthode de sélection, pour un débutant : prends trois sites qui te plaisent, et un quatrième que tu détestes. Le quatrième sert à dire à l'IA ce que tu ne veux surtout pas. C'est souvent plus efficace que les trois autres réunis.

Les extensions Chrome pour récupérer un design

Une fois que tu as tes références, il faut en extraire la matière. À l'œil, tu vas te tromper : tu croiras que c'est bleu foncé alors que c'est un bleu-gris très précis, et ton site aura l'air d'une photocopie ratée.

Quatre extensions gratuites font le travail :

• CSS Peeper : la plus utile des quatre. Tu cliques sur n'importe quel élément et tu lis ses styles, ses couleurs, ses polices, avec les images téléchargeables. C'est fait exactement pour ça, récupérer le système d'un site
• WhatFont : tu survoles un texte, il te donne la police, la taille, la graisse, l'interlignage et la couleur. Le plus rapide pour la typo
• ColorZilla : la pipette à couleurs, avec l'historique et la génération de palettes. Pour ne plus jamais approximer un code couleur
• VisBug : l'outil de Google, en libre accès. Il transforme une page en plan de travail modifiable et surtout, il affiche les espacements entre les éléments. C'est le détail que tout le monde oublie et qui fait la moitié de l'impression de qualité

Le résultat de dix minutes de collecte tient en un petit bloc que tu colles dans ton prompt : deux ou trois couleurs avec leur code exact, une police pour les titres, une pour le texte, une échelle de tailles, et un pas d'espacement.

Le prompt qui change tout

Avec cette matière, ton premier message ne ressemble plus à rien de ce que tu écrivais avant. Voilà la trame que j'utilise :

Avant de coder quoi que ce soit, voilà mon système de design, applique-le partout. Couleurs : #1B1B3A pour le fond sombre, #F4F1EA pour les fonds clairs, #D97757 pour les accents. Rien d'autre. Typographie : titres en [police], texte en [police]. Titres à 48px, sous-titres à 24px, texte à 16px. Espacements : uniquement des multiples de 8 pixels. Style : sobre, éditorial, beaucoup de blanc. Aucun dégradé, aucune ombre portée, aucune icône décorative. Confirme que tu as compris ces règles avant de commencer.

Trois principes derrière cette trame, et ils valent pour n'importe quel outil :

Contrains au lieu de décrire. « Aucun dégradé » pilote mieux que « moderne ». Une interdiction est comprise sans ambiguïté, un adjectif non.

Donne des chiffres. Des codes couleur exacts, des tailles en pixels, un pas d'espacement. C'est ce que l'IA sait exécuter.

Mets ton vrai contenu tout de suite. Le faux texte tire le design vers le générique, parce que l'IA compose une mise en page pour du remplissage. Avec tes vrais titres, souvent trop longs, elle est obligée de faire de vrais choix.

Et si tu construis sur Lovable, tout ça se range une fois pour toutes dans le Knowledge du projet plutôt que d'être répété à chaque message. J'explique où ça se met dans mon guide sur Lovable.

Et pour les visuels, pas le site

Un site n'est pas que sa mise en page. Il lui faut des images, des schémas, parfois des illustrations, et c'est souvent là que ça retombe dans le moche : une banque d'images générique, ou pire, des visuels générés qui ne vont pas ensemble.

C'est le terrain de Claude Design, qui sert à produire des visuels cohérents à partir d'une même charte plutôt qu'image par image. Même logique que tout ce qui précède : tu poses le système une fois, tu génères ensuite.

Ce qu'il faut retenir

Ton site généré n'est pas moche parce que l'IA est mauvaise. Il est fade parce que tu ne lui as donné aucune contrainte, et qu'en l'absence de contrainte elle produit la moyenne de ce qu'elle a vu.

La séquence qui marche tient en quatre gestes : tu choisis trois références, tu en extraies les couleurs, les polices et les espacements avec une extension, tu poses ces règles en premier dans ton prompt, et tu mets ton vrai contenu.

Ça prend vingt minutes la première fois. C'est vingt minutes de plus que la plupart des gens, et c'est exactement ce qui sépare un site qui fait sérieux d'un site qui fait template.