Noter les soumissions Show HN sur les patterns de design IA
(adriankrebs.ch)- Avec la hausse récente des soumissions Show HN, des landing pages à l’apparence similaire sont apparues de façon répétée, et les patterns communs ont été notés à partir des 500 pages Show HN les plus récentes
- Le barème repose sur 15 critères couvrant les polices, les couleurs, la mise en page et des patterns CSS, avec des éléments comme le hero centré, le VibeCode Purple, la bordure colorée à gauche, shadcn/ui et le Glassmorphism
- La détection a été effectuée en chargeant les pages avec un navigateur headless basé sur Playwright, puis en lisant le DOM et les styles calculés ; la méthode consistant à faire juger des captures d’écran par un LLM n’a pas été utilisée
- Les résultats se répartissent en Heavy slop 21 %, Mild 46 % et Clean 33 % ; un site n’est pas qualifié de généré par IA sur la base d’un seul pattern, les catégories étant définies selon le nombre de patterns remplis
- Cette tendance relève moins d’un problème grave que d’un manque d’inspiration, et à l’avenir il pourrait devenir nécessaire de soigner davantage le design pour se démarquer parmi des productions similaires
Hausse des Show HN et notation des patterns de design
- Le nombre de soumissions Show HN a fortement augmenté, au point que l’équipe de Hacker News a restreint les soumissions Show HN pour les nouveaux comptes
- Dans les projets Show HN récents, une impression générique et aseptisée revient régulièrement ; au lieu d’en rester à une impression subjective, elle a été quantifiée sur la base de 500 pages
- La notation a porté sur les 500 landing pages Show HN les plus récentes, classées selon des patterns de design IA récurrents
Critères des patterns de design IA
- Les patterns communs relèvent globalement des polices, des couleurs, des particularités de mise en page et de patterns CSS
- La bordure colorée à gauche a servi de signal fort d’un design généré par IA, et elle apparaît effectivement de manière répétée sur plusieurs pages
-
Polices
- Inter est largement utilisée, en particulier dans les titres hero centrés
- Les LLM utilisent aussi souvent des combinaisons comme Space Grotesk, Instrument Serif et Geist
- Sont également incluses les compositions de hero centrées sur Inter où un seul mot est mis en avant en serif italic
-
Couleurs
- Le VibeCode Purple revient de manière répétée
- Les combinaisons mode sombre permanent, texte courant gris moyen et libellés de section en majuscules sont fréquentes
- En thème sombre, certains cas incluent un contraste du texte courant qui dépasse à peine le seuil recommandé
- L’usage excessif de dégradés, les grands halos colorés et les box-shadows colorées font aussi partie des patterns
-
Particularités de mise en page
- Le hero centré avec une police sans serif générique revient souvent
- La présence d’un badge juste au-dessus du H1 du hero apparaît fréquemment
- Le pattern de bordure colorée sur le haut ou le bord gauche des cartes est également pris en compte
- Des feature cards identiques avec une icône en haut sont disposées de manière répétée
- Les séquences numérotées 1, 2, 3, les rangées de bannières de statistiques, les sidebars ou navigations avec icônes emoji, ainsi que les titres et libellés de section en majuscules, font aussi partie des critères
-
Patterns CSS
-
shadcn/ui
- Glassmorphism
-
Méthode de détection et résultats
- Chaque site a été chargé avec un navigateur headless basé sur Playwright, et un petit script embarqué dans la page a lu le DOM et les styles calculés pour vérifier les patterns
- Tous les patterns ont été traités par des vérifications déterministes du CSS ou du DOM ; la méthode consistant à prendre des captures d’écran puis à laisser un LLM juger visuellement n’a pas été utilisée
- Cette méthode peut produire des faux positifs, mais lors du QA manuel ils ont été estimés à environ 5 à 10 %
- Le code de notation pourrait être rendu public pour permettre la reproduction, l’amélioration ou l’évaluation de son propre site pour ceux que cela intéresse
- Un site n’est pas considéré comme généré par IA à partir d’un seul pattern ; il est réparti dans l’une des 3 catégories selon le nombre de patterns satisfaits parmi les 15
- Heavy slop : 5 patterns ou plus, 105 sites, 21 %
- Mild : 2 à 4, 230 sites, 46 %
- Clean : 0 à 1, 165 sites, 33 %
- Ces résultats relèvent moins d’un problème grave que d’un manque d’inspiration
- Pour valider une idée business, un design flamboyant n’a jamais été l’élément central, et même avant l’IA beaucoup de sites se ressemblaient, comme avec Bootstrap
- La différence est nette entre les cas où le design est retravaillé à la main et ceux où la sortie par défaut du LLM est publiée presque telle quelle
- Même avant les LLM, utiliser tel quel un template CSS/HTML produisait un phénomène similaire
- À l’avenir, il pourrait redevenir nécessaire de soigner davantage le design pour se distinguer dans ce slop
- En parallèle, si les principaux utilisateurs du web deviennent des agents IA, l’importance qui restera au design demeure très incertaine
Aucun commentaire pour le moment.