Une image vaut mille tokens

Une partie de mon travail chez Repaint consiste à faire en sorte que l'IA génère des sites web qui soient vraiment beaux. C'est étonnamment difficile. Les modèles d'IA ont tendance à retomber dans les mêmes clichés visuels encore et encore. C'est tellement constant qu'un "site web IA" devient une esthétique reconnaissable.

Nous avons testé des dizaines de façons de briser ce schéma. En cours de route, nous avons acquis une compréhension bien plus profonde des modèles, que nous voulions partager.

Voici un site web IA assez standard : style générique, contenu minimal et mises en page trop utilisées. Et bien sûr, l'occasionnel bouton illisible.

Je ne lui ai donné qu'un minimum de direction. Cela peut sembler injuste, mais je pense que c'est un bon test. Évidemment, si vous continuez à donner des instructions, vous pourriez progressivement transformer cela en un super site web. Mais alors c'est vous qui faites tout le design. Le modèle ne fait que coder. La plupart des gens ne savent pas faire cela. La vraie percée, c'est quand l'IA peut faire du design sans qu'un humain spécifie chaque détail.

Le style par défaut de l'IA est fondamentalement un problème universel. On le voit ici sur un site de thérapeute. On pourrait penser qu'un site de thérapeute aurait un aspect radicalement différent. Mais non, il produit à peu près le même site avec des boutons verts.

Comment peut-on améliorer les sites web IA ?

Systèmes de design

Un premier mouvement évident : pré-construire les couleurs, polices, arrondis et ombres. Ces décisions sont difficiles à bien faire quand on ne regarde que du code. Démarrer l'IA avec un bon ensemble signifie moins de façons de se tromper.

Cela aide un peu. On obtient moins d'erreurs de couleur flagrantes. Et ici, il a utilisé une image en arrière-plan. Mais dans l'ensemble, les mises en page, la densité du contenu et la structure générale sont fondamentalement les mêmes. Un système de design donne au modèle une palette ; il ne lui apprend pas à composer.

Coaching

Une autre approche : donner au modèle un grand ensemble d'instructions sur comment designer. Lui indiquer de faire des choses qu'il ne ferait pas normalement. Le chatbot principal de Claude AI a une compétence qui fait exactement cela :

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this interface solve? Who uses it?
Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (framework, performance, accessibility).
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

Frontend Aesthetics Guidelines
Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

C'est une vraie amélioration. La mise en page générale est similaire à avant. Mais on dirait enfin un vrai site de thérapeute, avec des polices plus douces et un style de bouton unique. Si vous changiez votre image, vous pourriez tout à fait le publier.

Dans nos tests, nous avons constaté que les instructions personnalisées ne corrigent pas la répétition. Le modèle retombe toujours dans les mêmes schémas, donc ça ressemble toujours au site IA standard. Juste une version beaucoup plus jolie.

De plus, il est plus difficile d'éviter les schémas surexploités que le prompt de Claude ne le laisse penser. Ils disent :

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts)

Alors à la place, le modèle surexploite d'autres polices comme Jost et Cormorant Garamond. Et maintenant il ne peut pas gérer les situations où Inter est le bon choix. En gros, vous pouvez forcer l'élimination de ses mauvaises habitudes, mais d'une manière ou d'une autre, il va faire les mêmes choses de façon répétée.

Images de référence

Et si on sautait les mots entièrement et qu'on montrait simplement au modèle ce qu'on veut ? Lui fournir une capture d'écran d'un design qu'on aime et lui demander de construire quelque chose de similaire.

C'était la première tactique où le modèle a créé de nouvelles mises en page en dehors des 2-3 mêmes qu'il fait toujours. Il ne fait jamais une image à mi-écran de lui-même.

Les images sont un moyen super efficace de partager beaucoup d'informations. Le modèle capte la mise en page, l'espacement, les relations de couleur et la densité, le tout en même temps : des choses auxquelles on ne penserait jamais dans un prompt. Mais c'est fragile. Il ne peut pas reproduire des mises en page complexes ou des animations. Et si le modèle doit remplir plus de contenu en dehors de la référence, il revient au style par défaut.

Modèles de code et de style

C'est peut-être l'idée la plus brutale. Il suffit de lui donner du code. C'est ce que ChatGPT fait en ce moment. Il utilise une bibliothèque de modèles quand il crée des sites.

Quand on fait cela, évidemment la qualité monte beaucoup. On ne fait que donner les réponses à l'IA. Mais la plupart des gens n'ont pas de code existant pour ce qu'ils veulent. Donc c'est surtout une tactique pour les constructeurs de plateformes, qui créent un outil pour d'autres personnes.

Cependant, il y a un piège :

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

Si vous donnez des exemples à l'IA, elle génère des sites web qui se ressemblent remarquablement, et fait les ajustements minimaux nécessaires pour correspondre au contexte. Donc quand ChatGPT crée des sites en ce moment, quel que soit le prompt, ça ressemble à la même startup tech.

Malheureusement, même avec toutes ces tactiques, je ne suis pas sûr que nous ayons fait quelque chose de mieux qu'un modèle générique de Wix.

Auto-itération

Pourquoi ne pas laisser le modèle regarder sa propre production et l'améliorer ? Un designer de Wix peut faire beaucoup d'itérations après tout.

En théorie, cela résout tout. En pratique, il travaille pendant 20 minutes, dépense 10 $ en tokens et plafonne rapidement. Par exemple, je l'ai fait itérer sur le site Lighthouse de tout à l'heure. Il n'a même pas remarqué le bouton illisible.

L'auto-itération est probablement le futur. Mais les modèles actuels ne sont pas tout à fait prêts.

Après avoir exploré toutes ces approches, nous avions de vraies options pour améliorer le style. Mais au-delà de cela, nous avions l'impression de comprendre le fonctionnement des modèles d'IA à un niveau bien plus profond.

Ce que nous avons appris sur les modèles d'IA

Les modèles préfèrent vraiment le style par défaut

Il y a une esthétique par défaut intégrée dans les modèles. C'est comme le site web moyen dans les données d'entraînement. Chaque fois qu'il prend une décision, il utilise le style par défaut sauf s'il a une raison explicite de ne pas le faire. C'est pourquoi les sites IA sont si reconnaissables, et pourquoi l'auto-itération ne mène nulle part. Le modèle ne converge pas vers un design unique. Il converge vers le style par défaut. Si vous voulez que l'IA brise le schéma, vous devez lui donner quelque chose qui l'éloigne du défaut, comme des images de référence ou des exemples de code.

Les images ont plus de bande passante que les mots

Il est difficile de guider le modèle avec des mots. Vous pouvez écrire un paragraphe sur votre envie de quelque chose de "propre, moderne, avec beaucoup d'espace blanc", mais c'est presque inutile. Vous finissez toujours avec le style par défaut. Les images peuvent amener le modèle à créer des designs uniques parce qu'elles transportent plus d'informations. Une capture d'écran encode des centaines de micro-décisions sur l'espacement, les couleurs et les mises en page que vous ne pouvez pas définir avec des mots. Donc, à moins d'avoir des exemples de code, les images de référence sont le meilleur moyen de guider l'IA.

Pré-construire est un compromis

Chaque tactique que nous avons essayée était une forme de prise de décisions préalable pour l'IA. Quand on lui donne plus, on peut élever le plafond de qualité, mais on perd en flexibilité. Se préparer à chaque cas d'usage potentiel n'est important que pour une plateforme générale comme Repaint. Si c'est juste pour vous, vous pouvez (et devriez) donner à l'IA des références spécifiques pour maximiser la qualité visuelle.

Comment faire de meilleurs designs avec l'IA

La façon la plus simple d'éviter le générique est de donner à l'IA des références visuelles uniques, comme des images de sites que vous aimez, des exemples de code, ou les deux. Une fois que vous avez le style, l'IA devrait pouvoir générer d'autres sections qui correspondent. C'est bien plus efficace que de simplement donner des instructions encore et encore, ce que la plupart des gens font.

Ou si trouver des références et construire un style vous intimide, vous pourriez essayer Repaint. Nous avons construit une grande bibliothèque de styles avec des exemples de code et des variables de design. L'IA n'est pas forcée dans un seul style parce que nous avons beaucoup d'options.

Plus largement, dans n'importe quel outil visuel d'IA, que ce soit le design d'applications, la génération d'images ou la génération de vidéos, au lieu de dire "rends-le plus premium", essayez de lui donner plus de captures d'écran et d'exemples. C'est considérablement plus efficace.