Pourquoi tous les sites générés par IA se ressemblent

Il est tentant de décrire cela comme un problème de goût — le modèle a vu un milliard de landing pages et converge vers leur moyenne. C'est en partie vrai, mais ce n'est pas le mécanisme, et cela pousse les utilisateurs vers la mauvaise solution (de meilleurs prompts). Le mécanisme est plus banal et bien plus concret : un agent de code à qui l'on demande de construire une UI s'appuie sur une bibliothèque de composants, et cette bibliothèque livre des valeurs par défaut. Ces valeurs ont été conçues pour être neutres, ce qui est précisément ce qui les rend universelles.

Demandez un tableau de bord à cinq outils différents — Claude Code, Cursor, v0, Lovable, Bolt — sans autre instruction. Vous obtiendrez cinq mises en page et une seule identité visuelle. Ils ne se copient pas. Ils font chacun, indépendamment, le choix le plus rationnel avec le même matériau de départ.

Le thème par défaut de shadcn/ui est basé sur l'échelle zinc de Tailwind, avec slate et gray comme alternatives courantes. C'est un gris froid, légèrement teinté de bleu. Une fois qu'on l'a remarqué, on ne voit plus que ça : c'est le fond de la plupart des produits créés par IA ces deux dernières années. C'est un neutre réellement efficace, et c'est là le problème — il est assez bon pour que personne ne le remplace.

L'indice n'est pas le gris en soi, mais son *uniformité*. Une interface designée oriente généralement ses neutres légèrement vers la teinte de la marque, pour que les gris semblent liés à la couleur d'accentuation. Une interface par défaut utilise une rampe pure juxtaposée à un accent sans rapport, et les deux ne semblent jamais appartenir au même ensemble.

Inter est une excellente police pour l'UI, c'est pourquoi elle est partout et pourquoi elle est désormais perçue comme un défaut plutôt que comme un choix. Quand ce n'est pas littéralement Inter, c'est la pile système font-sans, qui aboutit à une grotesque quasi identique sur la plupart des machines. Dans les deux cas, la page utilise une seule famille pour tout : titres, corps de texte, labels, chiffres.

C'est l'utilisation d'une seule famille qui est l'indice, plus encore que le choix de la famille elle-même. Un design system associe presque toujours — une police de titrage avec du caractère pour les titres et une police utilitaire pour le corps, ou au minimum un contraste délibéré de graisse et de largeur au sein d'une même superfamille. Les pages à famille unique paraissent plates, même quand toutes les autres décisions sont justes.

Le --radius par défaut de shadcn est 0.5rem, et il se propage aux boutons, aux champs de saisie, aux cartes, aux dialogues et aux popovers. Un rayon uniforme pour toutes les tailles d'éléments n'est pas le comportement d'un design system : un bouton de 44px et une carte de 400px avec le même rayon de coin rendent la carte trop douce et le bouton informe, car le rayon est perçu relativement à l'élément sur lequel il s'applique.

:root {
  /* The line most AI-built projects never touch */
  --radius: 0.5rem;
}

Une section Hero, puis trois cartes égales, puis un bandeau de témoignages, puis un CTA. Ici, il s'agit d'une véritable gravité liée aux données d'entraînement plutôt que d'un défaut de configuration — c'est la structure de page marketing la plus courante sur le web, c'est donc la forme qu'un modèle produit quand le brief n'en suggère pas une autre. Ce n'est pas faux. C'est simplement la mise en page qui ne donne aucune information sur votre produit.

La réponse courante est d'écrire un prompt plus long : *utilise une palette chaude, associe un titrage serif avec un corps grotesque, varie le rayon.* Cela fonctionne. Cela fonctionne pour un écran, et généralement pour le deuxième et le troisième.

Ensuite, cela se dégrade, et d'une manière spécifique. L'agent n'ignore pas vos instructions — il mène une conversation de plus en plus longue dans laquelle votre paragraphe de style est en compétition avec tout ce qui a suivi. Au cinquième écran, il se souvient de *chaud* mais a perdu les valeurs hexadécimales, alors il improvise. L'improvisation donne un chaud légèrement différent. Le sixième écran improvise sur l'improvisation.

Certains appellent cela le *design drift* (dérive du design), et c'est la raison pour laquelle une application codée au feeling qui semblait nette le vendredi paraît avoir été assemblée par un comité le lundi. L'instruction vivait dans la conversation, et les conversations s'estompent.

Un design system empêche la dérive pour la même raison qu'il l'empêche au sein d'équipes humaines : les valeurs sont stockées dans un support durable et consultées, plutôt que de reposer sur la mémoire de quelqu'un. Pour un agent de code, ce support est un fichier DESIGN.md associé à un ensemble de tokens dans le repo. Les deux sont relus au début de chaque session, garantissant ainsi que le vingtième écran utilise exactement le même --primary que le premier — et non une valeur similaire.

C'est tout l'intérêt de fournir à un agent un véritable système plutôt qu'une meilleure description de celui-ci. La couche de tokens sémantiques importe plus que la palette : --primary et --muted-foreground survivent à une refonte, contrairement à un blue-600 dispersé dans le markup.

La plupart du temps non, et c'est le constat le plus dérangeant. Nous avons analysé 299 fichiers DESIGN.md publics sur GitHub — le fichier dont le rôle unique est d'empêcher cela — et mesuré leur contenu.

Parmi les 72 décrivant un design system visuel, 21 % spécifient une échelle de radius et 26 % spécifient l'élévation. Ce sont deux des quatre indices mentionnés plus haut, laissés par défaut par trois quarts des personnes s'étant spécifiquement penchées sur la rédaction d'un contrat de design. 69 % omettent totalement le mode sombre, laissant l'agent inventer l'intégralité du second thème. Enfin, 86 % nomment les couleurs par teinte ou listent des hex bruts au lieu d'utiliser des rôles sémantiques, ce qui signifie que le fichier ne peut être appliqué à aucun composant qu'il n'a pas explicitement décrit.

Il existe une version dérivée du même problème : 54 % des fichiers contiennent au moins un adjectif vague en guise de valeur, en tête desquels *clean* (39 %) et *modern* (36 %). Un adjectif ne remplace pas un réglage par défaut. Il demande à l'agent d'en choisir un.

1. 1

   Analyser l'arrière-plan

   Récupérez l'hex de l'arrière-plan de votre page. S'il s'agit de #09090b, #18181b, #0f172a ou #020617, vous utilisez une palette zinc ou slate non modifiée.

2. 2

   Compter les familles typographiques

   Ouvrez les styles calculés d'un H1 et d'un paragraphe de corps de texte. Si la font-family est identique, une seule famille remplit toutes les fonctions.

3. 3

   Comparer deux radius

   Mesurez le radius des coins d'un bouton et de votre plus grande carte. Des valeurs identiques signifient que le radius n'a pas été adapté à la taille de l'élément.

4. 4

   Comparer votre premier et dernier écran

   Placez le tout premier écran créé à côté du plus récent. Listez chaque valeur divergente : cette liste représente votre dérive design.

5. 5

   Déterminer où réside la source de vérité

   Pour chaque divergence, demandez-vous si la valeur correcte existe dans un support durable. Si la réponse honnête est « dans le prompt que j'ai écrit en mars », c'est là qu'il faut intervenir.