En 2026, un site web se construit en quelques heures avec l’IA. Pas en quelques semaines. Le problème ? Le résultat ressemble presque toujours à la même chose : dégradé violet, police Inter, trois colonnes identiques. Ce guide vous montre comment diriger l’IA pour produire un site qui a une vraie gueule, sans écrire une ligne de code.
Le « Purple Problem » : pourquoi l’IA produit toujours la même chose
Le phénomène a un nom : l’AI slop. Un design instantanément reconnaissable comme généré par l’IA. Sans personnalité. Sans âme.
Adam Wathan, le créateur de Tailwind CSS, a publiquement reconnu le problème en août 2025. Sa déclaration : « Je voudrais m’excuser formellement pour avoir mis bg-indigo-500 sur chaque bouton de Tailwind UI il y a cinq ans, ce qui a conduit à ce que chaque interface générée par l’IA sur Terre soit aussi indigo ».
Ce n’est pas une blague. Des milliers de tutoriels ont copié ces démos. GitHub s’est rempli de boutons indigo-500. Les LLM se sont entraînés sur GitHub. Résultat : v0, Lovable, Bolt, tous les outils de vibe coding produisent le même dégradé violet, sur la même police Inter, avec les mêmes trois cartes alignées sous le hero.
L’IA n’est pas mauvaise en design. Elle est trop bonne pour imiter ce qu’elle a le plus vu. Elle vous donne la moyenne statistique du web.
Pour casser ce cycle, il faut arrêter de demander et commencer à diriger.
Étape 1 : Poser les fondations avant de toucher à l’IA
C’est l’étape que 95 % des gens sautent. C’est exactement pour ça que leurs sites se ressemblent tous.
L’IA est un exécutant puissant. Un exécutant sans direction produit du bruit.
Définir l’objectif principal
Un site sans objectif clair ne convertit pas. Quatre familles existent :
Vendre : produit physique, digital, formation, abonnement. Le design guide vers le bouton d’achat.
Générer des leads : capturer des emails ou des demandes. Le design guide vers le formulaire.
Asseoir une crédibilité : portfolio, agence, consultant. Le design projette expertise et sérieux.
Lancer un SaaS : page marketing et accès produit. Le design explique la valeur et réduit la friction.
Un site ne peut pas servir tous ces objectifs en même temps. Choisissez-en un principal.
Définir la cible et le positionnement
L’IA génère du générique parce qu’on lui donne des instructions génériques. Trois questions à répondre :
À qui s’adresse ce site (âge, secteur, maturité sur le sujet) ?
Quel problème principal résolvez-vous pour eux ?
En quoi votre approche diffère de ce qui existe déjà ?
Un site pour une coach en leadership destinée aux femmes dirigeantes dans la tech ne s’habille pas comme un site pour une agence B2B. L’IA peut faire la différence, mais seulement si vous lui donnez l’information.
Rassembler 3 à 5 références visuelles
L’étape la plus sous-estimée. L’IA travaille infiniment mieux avec des exemples concrets qu’avec des adjectifs abstraits comme « moderne » ou « épuré ».
Plateformes utiles : Dribbble pour des screenshots UI haut de gamme, Awwwards pour des sites primés plus expérimentaux, Land-book spécialisé landing pages, Mobbin pour de l’UI produit réelle.
Notez ce qui vous plaît précisément : palette, hiérarchie typographique, densité de contenu, structure du hero. Pas besoin de jargon. « J’aime comment ce site utilise beaucoup d’espace vide » ou « la couleur principale est un vert foncé mat qui inspire confiance » suffit.
Ces descriptions deviendront vos instructions pour l’étape 3.
Étape 2 : Choisir le bon outil selon votre profil
Il existe une dizaine d’outils IA sérieux pour créer un site comme le propose ici ce prestataire local. Choisir le mauvais pour votre profil peut vous faire perdre beaucoup de temps.
Pour les non-devs qui veulent un site complet
Lovable.dev : référence pour créer un site ou une application web sans écrire une ligne de code. Vous décrivez ce que vous voulez, l’IA génère le code (React + Tailwind), vous itérez en continuant à discuter. Idéal pour landing pages, SaaS légers, portfolios.
Bolt.new : approche similaire avec une interface très rapide. Parfait pour prototyper une idée en moins d’une heure.
Pour les profils créatifs qui veulent un rendu visuel soigné
Framer : l’outil qui produit les interfaces les plus propres pour les non-devs. Son IA intégrée génère des sections depuis une description textuelle, et l’éditeur visuel permet d’affiner sans code. C’est le choix des designers et créateurs qui veulent un site qui impressionne. La courbe d’apprentissage est légèrement plus haute.
Canva Sites : entrée de gamme. Ultra simple, très rapide, mais limité. Design assez générique par défaut. À utiliser pour une présence basique en moins d’une heure.
Pour les profils semi-techniques qui veulent plus de contrôle
v0 de Vercel : génère des composants React/Next.js de qualité production. Pensé pour des profils qui comprennent un peu de code. Moins accessible pour les débutants complets.
Webflow avec IA : haut de gamme du no-code. Contrôle total, hébergement optimisé, CMS intégré. La prise en main demande du temps, mais c’est une compétence qui reste utile longtemps.
Recommandation rapide
Partir de zéro et aller vite : Lovable ou Bolt.
Qualité visuelle prioritaire avec quelques heures devant soi : Framer.
Projet technique en cours : v0 pour les composants, Webflow pour le marketing.
Une stratégie efficace combine les outils : générer la structure avec Lovable ou Bolt, puis utiliser v0 pour les composants UI critiques (hero, pricing, testimonials).
Étape 3 : Créer votre identité visuelle avant de générer
C’est le secret que personne ne mentionne dans les tutoriels.
Donner un prompt direct à l’IA (« Crée-moi une landing page pour mon SaaS ») produit systématiquement de l’AI slop. L’IA comble les vides avec ses patterns les plus fréquents. Ses patterns les plus fréquents, c’est violet, Inter, cartes imbriquées.
La solution : ne pas laisser ces vides. Définir votre identité visuelle en amont et l’injecter dans chaque prompt.
Les Design Tokens, sans jargon
Un Design Token, c’est une décision de design codifiée. « Ma couleur principale est ce vert foncé spécifique, pas un autre vert. » « Ma police de titre est cette fonte précise, pas Inter. » « Mon espacement entre sections est généreux, pas compact. »
Ces décisions semblent mineures. Elles sont ce qui distingue un site générique d’un site mémorable.
La règle 60-30-10 pour la palette
Règle de base du design de couleur, utilisée depuis des décennies.
60 % (dominante). Fond du site. Blanc cassé chaud, crème, gris très clair, ou noir profond. Évitez le blanc pur (#FFFFFF) : trop froid, contrastes trop durs. Un blanc légèrement teinté rend immédiatement le rendu plus premium.
30 % (secondaire). Structure le contenu : fond des sections alternées, sidebar, cards. Harmonieuse avec la dominante, légèrement plus foncée ou colorée.
10 % (accent). Votre couleur de personnalité. Boutons principaux, liens, éléments à remarquer. C’est ici que vous pouvez avoir de la personnalité : terra cotta, vert forêt, bleu encre, orange brûlé.
Nommez vos couleurs sémantiquement, pas avec des codes hexadécimaux. L’IA comprend et maintient mieux la cohérence avec « blanc cassé chaud » qu’avec « #F5F0EB ». Avec « vert forêt profond » qu’avec « #1A3D2B ».
Choisir la typographie
La typographie représente 80 % de l’identité d’un site. C’est aussi le premier endroit où l’AI slop se trahit : Inter, Roboto et Open Sans apparaissent sur des millions de sites générés.
Alternatives gratuites avec du caractère :
Titres : Clash Display (géométrique, impactante en grands formats), Space Grotesk (humaniste avec une légère irrégularité), Syne (expressive, éditoriale).
Corps : Satoshi (propre et moderne, remplace avantageusement Inter), Plus Jakarta Sans (chaleureuse et professionnelle), DM Sans (minimaliste mais plus douce qu’Inter).
Le duo classique efficace : une fonte de titre avec du caractère et une fonte de corps plus neutre. Par exemple Clash Display pour les titres et Satoshi pour le corps.
Le « passeport design » à coller en début de chaque prompt
Design system à respecter sur tout le site :
Couleurs :
– Fond principal : blanc cassé chaud (crème très légèrement teinté)
– Fond secondaire : gris perle chaud
– Couleur d’accent : vert sauge profond
– Texte principal : presque noir (pas noir pur)
– Texte secondaire : gris moyen
Typographie :
– Titres : Space Grotesk (bold pour les H1/H2, medium pour les H3)
– Corps : Satoshi (regular pour le texte courant, medium pour les labels)
– Hiérarchie : H1 en 64px, H2 en 48px, H3 en 32px, corps en 16px
Espacement :
– Espacement généreux entre les sections (80 à 120px)
– Beaucoup d’espace blanc : ne jamais surcharger une section
– Marges latérales confortables sur mobile
Style général :
– Minimaliste et raffiné, pas de décorations superflues
– Pas de gradients violets ou néons
– Pas de cartes imbriquées dans d’autres cartes
– Pas d’icônes génériques en grille de trois colonnes
Ce bloc devient votre passeport design. Collez-le en tête de chaque prompt.
Étape 4 : Générer les pages avec des prompts qui fonctionnent
Avec vos fondations posées et votre design system en main, la qualité de ce que vous obtenez dépend directement de la qualité de vos instructions.
La méthode PRD Design
PRD signifie Product Requirements Document. Appliqué au design IA : ne pas demander à l’IA de coder directement. D’abord lui demander de raisonner sur le design, puis de coder.
Temps 1 : générer le brief design
Tu es un designer senior spécialisé dans les interfaces web premium.
Je dois créer la landing page pour [description de ton projet et ta cible].
Mon design system : [colle ton bloc design system ici].
Mes références visuelles : [décris les sites que tu as trouvés].
Propose-moi la structure de ma page d’accueil : quelles sections inclure, dans quel ordre, avec quel objectif pour chaque section. Ne génère pas de code, raisonne d’abord sur l’architecture de la page.
L’IA propose une structure argumentée. Ajustez, retirez, ajoutez. Ce dialogue préalable améliore considérablement le résultat final.
Temps 2 : générer le code section par section
Une fois la structure validée, générez chaque section séparément plutôt que toute la page d’un coup. Les LLM maintiennent mieux la cohérence sur des éléments ciblés.
Sur la base de la structure que nous venons de définir, génère uniquement la section hero.
Design system : [ton bloc design system]
Section : hero
Objectif : capter l’attention et communiquer la promesse principale en moins de 5 secondes
Headline : [ta headline]
Sous-titre : [ton sous-titre]
CTA : [ton bouton d’action]
Consignes :
– Pas de gradient violet ou néon
– Pas d’image de stock générique
– Typographie impactante pour la headline
– Beaucoup d’espace blanc
Les anti-patterns à interdire explicitement
L’IA a tendance à produire ces éléments par défaut. Interdisez-les dans chaque prompt :
- Les gradients violet, rose ou néon.
- La police Inter ou Roboto comme défaut.
- Les grilles de trois colonnes avec icônes identiques.
- Les sections « dark mode basique » avec fond noir et texte blanc générique.
- Les cartes imbriquées dans d’autres cartes.
- Les hero sections avec image de fond, overlay sombre et texte blanc centré.
- Les animations de confettis ou particules.
- Les boutons avec ombre portée excessive.
L’IA respecte mieux ce qu’on lui dit explicitement de ne pas faire que ce qu’on lui dit implicitement de faire.
La technique Dribbble Mining
L’une des techniques de prompting les plus efficaces pour obtenir un rendu hors du commun.
Trouver : identifiez une interface sur Dribbble, Awwwards ou Mobbin qui capture l’esthétique recherchée.
Décrire : avant de fournir la référence à l’IA, décrivez-la en détail. Quelles couleurs ? Quelle typographie ? Comment l’espace est-il utilisé ? Cette description force l’IA à comprendre l’essence du design, pas juste à copier la surface.
Fournir : passez le screenshot ou le lien à l’IA (si le modèle est multimodal).
Demander l’adaptation : « Adapte cette esthétique à mon projet [description], avec mon design system [bloc design system], pour une section [type de section]. »
La clé est l’adaptation, pas la copie. Vous cherchez à extraire l’esprit d’un design de référence.
Tableau comparatif des outils IA pour créer un site en 2026
Outil
Profil cible
Points forts
Limites
Idéal pour
Lovable
Non-devs
Site complet sans code, itération conversationnelle, vrai code React/Tailwind
Résultat initial souvent générique
Landing pages, SaaS légers, portfolios
Bolt.new
Non-devs pressés
Prototypage ultra-rapide, interface fluide
Moins adapté aux projets complexes
Tester un concept en moins d’une heure
Framer
Créatifs, designers
Interfaces les plus soignées, éditeur visuel précis, IA intégrée au canvas
Courbe d’apprentissage plus haute
Sites qui doivent impressionner visuellement
v0 (Vercel)
Semi-techniques
Composants React/Next.js qualité production
Nécessite des bases en code
Intégration dans un projet existant
Webflow
Perfectionnistes
Contrôle total, CMS, hébergement optimisé
Prise en main longue
Sites pro sans dépendance dev
Ce que les chiffres disent vraiment
Le « Purple Problem » n’est pas une impression subjective. C’est un phénomène documenté publiquement par le créateur de l’un des frameworks CSS les plus utilisés au monde. Adam Wathan a reconnu que le choix par défaut d’indigo-500 dans Tailwind UI a involontairement créé une règle implicite dans les données d’entraînement des LLM : « site web moderne = boutons indigo-500 ».
Des millions de sites Tailwind avec les mêmes couleurs par défaut ont conditionné l’IA à reproduire ces choix à l’infini. Un article sur arXiv a qualifié ce phénomène d’« homogénéisateur universel, imposant probabilistiquement une moyenne esthétique globale ».
L’IA ne fait que reproduire la moyenne statistique de ce qu’elle a vu. Pour obtenir autre chose, il faut lui donner autre chose.
Étape 5 : Affiner pour éliminer l’AI slop
La génération initiale n’est jamais parfaite. C’est dans la phase d’affinement que les meilleurs résultats se construisent.
Auditez le rendu. Demandez à l’IA de critiquer son propre travail. « Vérifie ce résultat contre mon design system. Liste chaque violation. » Le modèle détectera environ 80 % de ses propres tics si on le lui demande de manière adversariale.
Corrigez section par section. Ne demandez pas de tout refaire. Ciblez le hero, puis les features, puis le pricing. Chaque correction ciblée préserve la cohérence du reste.
Remplacez les placeholders. L’IA génère des images de stock génériques. Utilisez des visuels réels, des captures produit, des formes géométriques, des initiales dans des cercles colorés. Tout sauf des photos de banques d’images.
Testez sur mobile. L’IA produit souvent des layouts qui cassent sur petit écran. Vérifiez chaque section.
Étape 6 : Publier et optimiser
Un site qui n’est pas en ligne n’existe pas.
Vérifiez les bases SEO : meta title, meta description, hiérarchie des titres, URLs propres, textes alternatifs. L’IA ne le fait pas automatiquement.
Testez l’accessibilité : contrastes, navigation clavier, structure sémantique. Un site inaccessible exclut une partie de votre audience.
Surveillez la performance : les images lourdes et les scripts inutiles générés par l’IA ralentissent le site. Compressez, lazy-load, nettoyez.
Prévoyez la maintenance : un site IA n’est pas un site jetable. Mettez à jour les contenus, corrigez les bugs, ajustez le design au fil du temps.
Notre avis
La promesse de l’IA pour créer un site est réelle : quelques heures au lieu de quelques semaines. Mais elle cache un piège : la facilité apparente pousse à sauter les étapes qui font la différence.
Les outils ont progressé. Framer Agents travaille directement sur le canvas, ce qui évite la déconnexion entre le prompt et le rendu final. Les modèles de prompting se sont affinés. Pourtant, le résultat dépend toujours de la même chose : la qualité de la direction que vous donnez.
L’IA n’a pas de goût. Elle a des probabilités. Votre travail, c’est de lui imposer vos choix avant qu’elle ne comble les vides avec les siens.
« J’ai généré mon premier site avec Lovable en une heure. C’était propre, fonctionnel, et parfaitement oubliable. J’ai refait le processus en passant deux heures sur les fondations et le design system avant d’ouvrir l’outil. Le deuxième site ne ressemblait à aucun autre. La différence n’était pas l’outil. C’était la préparation. » Françoise gérant d’un commerce à Biarritz
