Pourquoi les sites faits par l'IA se ressemblent

Tu l'as déjà vu cent fois

Un grand titre centré. Un dégradé violet sur fond blanc. Trois cartes identiques aux coins arrondis, avec la même ombre grise. Un petit mot en capitales au-dessus de chaque titre, et une flèche au bout de chaque bouton.

Tu reconnais ce site en une seconde : c'est celui qu'une IA produit quand on lui demande « un site moderne et propre ». Il n'est pas laid. Il est juste celui de tout le monde.

Je l'ai vécu sur ma chaîne. Pour une nouvelle version de mes promos de sites, le premier fond proposé m'a fait dire : « on remarque directement que c'est Claude ». Je raconte la suite dans la formation Bien parler à Claude.

Pourquoi : les choix « sûrs » gagnent

Anthropic a publié la réponse le 12 novembre 2025, dans un article sur le design des interfaces. Le phénomène porte un nom : la convergence distributionnelle.

Claude écrit en prédisant la suite la plus probable, d'après ce qu'il a lu pendant son entraînement. Or sur le web, les choix « sûrs », ceux qui marchent partout et ne choquent personne, sont de loin les plus nombreux. Sans direction, Claude pioche dans ce milieu. D'où les polices du type Inter, les dégradés violets sur fond blanc et les animations minimales.

Le guide d'Anthropic pour Claude Sonnet 5 ajoute un détail qui change tout. Une consigne vague comme « n'utilise pas cette couleur » ou « fais propre et minimaliste » ne crée pas de variété : elle déplace Claude vers une autre palette fixe. Tu remplaces un réflexe par un autre.

Les cinq familles listées par Anthropic

Anthropic publie un skill officiel de design, frontend-design. Un skill, c'est un dossier d'instructions que Claude charge quand la tâche s'y prête. Celui-ci liste les cinq familles de looks vers lesquelles les sites générés convergent aujourd'hui. Je les traduis.

Avant, un mot de vocabulaire. Une couleur s'écrit souvent en hexadécimal : un # suivi de six caractères, deux pour le rouge, deux pour le vert, deux pour le bleu, de 00 à FF. #FFFFFF est le blanc, #000000 le noir.

Le crème et la terre cuite : un fond crème chaud (autour de #F4F1EA), un grand titre à empattements très contrasté, un accent terre cuite (autour de #D97757). Les empattements sont les petits pieds au bout des lettres, comme dans Times. Le skill précise que #D97757 est l'accent qu'Anthropic utilise dans l'interface de Claude : sur le site d'un client, il trahit l'outil.
Le noir et un seul accent vif : un fond presque noir, avec une seule couleur vive, vert acide ou vermillon.
La page de journal : des filets très fins, aucun coin arrondi, des colonnes serrées.
Le kit « SaaS » : le contenu découpé en cartes identiques, le même arrondi partout, la même ombre grise douce sous chaque carte, des dégradés posés en décoration.
L'habillage de modèle : un petit libellé en capitales espacées au-dessus de chaque titre, des infos séparées par des points (« A · B · C »), un noir teinté comme #0B0B0B ou #111 à la place du noir, une police à chasse fixe pour les petits chiffres, et une flèche « → » au bout des liens et des boutons.

Les tics de texte et de mouvement

Le skill liste aussi des tics plus discrets, qu'il appelle les indices les plus fréquents d'une page générée :

un seul mot du titre mis en valeur, en italique, en gras ou dans une autre couleur ;
des libellés en capitales, et des libellés inutiles au-dessus du contenu ;
des numéros 01, 02, 03 alors que le contenu n'est pas une suite d'étapes ;
un grand chiffre avec un petit libellé, des statistiques et un dégradé en haut de page.

Côté mouvement, deux réflexes reviennent : chaque section qui apparaît en glissant vers le haut, et un effet au survol sur chaque carte. Le skill conseille l'inverse : un seul moment orchestré, par exemple à l'ouverture de la page.

Le test en trente secondes

Ouvre un site et pose-toi ces questions :

La police est-elle Inter, Roboto, Arial ou celle du système ?
Les couleurs tombent-elles dans une des cinq familles ?
Le contenu est-il découpé en cartes toutes pareilles ?
Y a-t-il des capitales espacées au-dessus des titres, et des flèches au bout des boutons ?
Toutes les sections bougent-elles de la même façon en apparaissant ?

Si tu coches plusieurs cases, le site n'a pas été dessiné : il a été laissé par défaut. Fais l'exercice sur ton dernier site généré. C'est souvent instructif.

Le cas de ce site : un fond presque noir, assumé

Regarde l'accueil de formation.linedev.fr. La galerie a un fond #0B0C10, presque noir et légèrement teinté, avec un seul accent : un or, #F5C451. C'est presque mot pour mot la famille 2, avec le noir teinté de la famille 5.

Alors, look par défaut ? Le skill répond lui-même. Tous ces traits sont légitimes pour certains projets : le problème, c'est qu'ils apparaissent quel que soit le sujet. Quand le brief fixe une direction, Claude doit la suivre exactement, même si c'est un de ces looks.

Ce qui fait de notre galerie un choix, c'est qu'il est écrit, avec ses raisons et ses limites, dans les règles du projet que Claude relit :

chaque couleur a un nom et un rôle : fond #0B0C10, surface #15171D, texte #F4F2EC, texte doux #C2C3CA, filets #3A3D46 ;
l'or n'a droit qu'à trois places : le badge « Gratuite », les puces des listes, et le choix coché dans l'encadré sous une leçon réservée ;
la galerie reste toujours sombre, mais les pages de lecture, comme celle-ci, suivent le mode clair ou sombre de ton appareil ;
les titres sont en Archivo élargi, le texte en Atkinson Hyperlegible Next, une police conçue pour les lecteurs malvoyants ;
les contrastes visent le niveau le plus exigeant des règles d'accessibilité.

Un réglage par défaut arrive tout seul. Un choix se décide, s'écrit, et a des limites. Un look n'est générique que quand il n'est pas choisi.

Ce que la suite t'apporte

La leçon suivante, offerte elle aussi, installe le skill officiel frontend-design dans Claude Code. Tu verras ce qu'il demande à Claude avant d'écrire une ligne : un plan, une relecture contre les looks par défaut, puis une critique sur captures.

Ensuite, la formation te donne la méthode complète :

Le bon brief : un brief en huit parties prêt à copier, quatre directions visuelles à comparer avant de coder, et une palette, des polices et un mouvement lisibles par tous.
Ton propre style : le skill de ta marque, pour que chaque page garde la même identité, un en-tête animé avec GSAP ou une scène 3D avec Three.js qui ne fait pas ramer, et une vérification dans le navigateur au téléphone, en mode sombre et avec les animations réduites.

Sources

Pages officielles vérifiées le 19 octobre 2026 :

Ton ordinateur

Tes comptes

À installer

Ce que tu sais déjà faire