Une IA dessine des références web en cinq styles, du fintech au Web 1.0

Habr a publié une expérience de génération de références de design web avec une IA. L'auteur produit des assets pour cinq thématiques : jeu vidéo, fintech, esthétique Web 1.0, écologie et services d'IA. La publication se présente comme un premier essai, et le mot « conventionnels » figure d'emblée dans l'annonce. Le cadrage est honnête : il s'agit de matière pour l'inspiration et les moodboards, pas de remplacer un designer.

La partie ouverte de l'article ne mentionne ni noms de modèles, ni versions, ni textes de prompts. Nous n'analysons donc pas ci-dessous les résultats de l'auteur, mais ce que ce choix de thématiques permet de tester et la façon dont on s'y prend d'ordinaire.

Pourquoi ces cinq styles

L'ensemble est conçu pour tirer du modèle des langages visuels aussi différents que possible. Chaque thématique impose son propre vocabulaire de formes, de couleurs et de typographie :

• Jeu vidéo. Fonds sombres, néon ou textures fantasy, accents agressifs, grandes images héros.
• Fintech. Palette sobre, beaucoup d'espace, cartes, graphiques, une impression de confiance et d'ordre.
• Web 1.0. Cadres, boutons en dégradé, tableaux serrés, polices par défaut. Le modèle doit imiter une esthétique que plus personne ne conçoit sérieusement aujourd'hui.
• Écologie. Textures naturelles, vert doux et tons terreux, formes organiques, photographies plutôt qu'illustrations.
• Services d'IA. Dégradés, halos lumineux, motifs « neuronaux » abstraits. Ici, le modèle risque de livrer un cliché déjà vu des centaines de fois.

Le duo le plus intéressant est Web 1.0 et services d'IA. Le premier teste la précision de la stylisation ; le second montre si le modèle sait s'écarter de l'image la plus éculée de l'IA.

Où les modèles génératifs butent d'ordinaire

Le design web est plus difficile que l'illustration pour trois raisons. La première : le texte. Dans les images générées, les titres, les libellés de boutons et les menus se changent souvent en pseudo-lettres. La deuxième : la grille. Le modèle dessine « quelque chose qui ressemble à un site », mais l'alignement, les marges et la hiérarchie se défont fréquemment dès qu'on regarde de près. La troisième : la cohérence. À partir de cinq images d'un même projet, il est difficile d'obtenir un ensemble unifié, avec les mêmes couleurs, les mêmes arrondis et les mêmes icônes.

Il est donc plus raisonnable de considérer ces résultats comme de la matière première. On peut en retenir une composition, un schéma de couleurs ou une ambiance, puis assembler à la main le texte, la grille et les composants dans Figma ou dans le code.

Comment l'appliquer dans votre travail

Si vous voulez reproduire l'expérience, commencez par une formule de prompt : thématique, type de page (landing page, dashboard, catalogue), ambiance, palette, époque ou genre de référence. Demandez des blocs séparés, par exemple une section hero ou une carte de tarif, plutôt que le site entier. Les détails sont ainsi plus faciles à contrôler.

Ensuite, notez les paramètres qui fonctionnent et réutilisez-les dans toutes les variantes : même format, même description de l'éclairage et de la palette. Cela augmente les chances d'obtenir un style commun.

Enfin, ne jugez pas la beauté de l'image, mais le temps gagné. Si, en 20 minutes, vous obtenez dix pistes à discuter avec le client, l'outil a fait ses preuves, même si aucune maquette n'est utilisable en production. Pour les résultats complets, les outils employés et les prompts de l'auteur, mieux vaut se reporter à l'original sur Habr : c'est là qu'on verra à quel point chacune des cinq thématiques est convaincante.