Comment créer un site web avec Claude Code sans qu'il soit moche

Réponse rapide : vous pouvez créer avec Claude Code un site qui paraît conçu plutôt que généré, mais seulement si vous l'empêchez de retomber sur ses réglages par défaut. Donnez-lui un vrai design system sous forme de tokens, écrivez vos règles dans un fichier CLAUDE.md et dans un cahier des charges, construisez par petites phases validées par une personne, et ajoutez des contrôles de contraste, de tokens, d'accessibilité et de rapidité qui font échouer le build dès que quelque chose dérive.

La plupart des marketeurs qui essaient obtiennent le même résultat. La première page arrive vite et semble correcte au premier coup d'œil. Puis vous remarquez la police Inter, le dégradé violet, le titre centré au-dessus de deux boutons et les trois cartes identiques, et vous réalisez que vous avez déjà vu ce site exact bien des fois.

Ce guide s'adresse aux marketeurs et aux fondateurs qui veulent créer ou refondre un site marketing avec Claude Code et obtenir quelque chose qui ressemble à leur marque. Il explique pourquoi les sites créés par l'IA paraissent génériques, ce qu'il faut donner à Claude avant qu'il écrive la moindre ligne, comment le garder sur la bonne voie pendant la construction, et comment remplacer un ancien site sans perdre de trafic de recherche. L'étude de cas qui sert de fil rouge est saas-hackers.com lui-même, migré de Webflow vers Claude Code en novembre 2026. Tous les résultats cités pour ce projet proviennent de ses propres relevés.

Peut-on créer avec Claude Code un site web qui soit réellement beau ?

Claude Code est un outil de programmation par IA qui lit votre projet, écrit et modifie le code, exécute des commandes et vérifie son propre travail. Pour un site marketing, cela signifie qu'il peut installer le framework, construire les composants, connecter un CMS et lancer les tests, pendant que vous décidez de ce que le site doit être et si chaque étape est suffisamment bonne.

Oui, si vous faites le bon travail autour. Claude Code est bon en ingénierie et rapide sur les parties répétitives d'un projet. Il ne connaît ni votre marque, ni vos acheteurs, ni les décisions prises par votre équipe en réunion, et il comblera ces vides avec le choix le plus courant qu'il ait rencontré. Ce qui détermine si le site est beau, c'est le travail que vous faites avant et autour de la construction : le design system, les règles écrites et les contrôles.

Si vous n'avez pas encore décidé ce que le site doit apporter à votre pipeline, commencez par notre guide de stratégie de site web pour les SaaS B2B. Ce guide suppose que vous savez de quelles pages vous avez besoin et que vous voulez les construire correctement.

Pourquoi les sites web créés par l'IA se ressemblent-ils tous ?

Les sites créés par l'IA se ressemblent parce que les modèles de langage choisissent l'option suivante la plus probable, et en design web, l'option la plus probable est la plus sûre. Anthropic appelle cela la convergence distributionnelle : les choix de design sûrs dominent les données d'entraînement, donc sans consigne, le modèle puise dans ce centre à forte probabilité (Anthropic, 2025).

L'équipe frontend d'Anthropic décrit le résultat sans détour. À qui lui demande une landing page sans consignes, un modèle « se conformera presque toujours aux polices Inter, aux dégradés violets sur fond blanc et aux animations minimales » (Anthropic, 2025). Leur point est que cela nuit à l'identité de marque et rend les interfaces créées par l'IA faciles à reconnaître et à écarter.

Ces signes sont faciles à repérer une fois qu'on les connaît :

• Inter, Roboto ou des polices système partout, avec des graisses qui varient à peine entre les titres et le corps de texte
• Des dégradés violets ou mauves, et des titres remplis d'un dégradé
• Un hero centré avec un badge en forme de pilule, un titre, un sous-titre et deux boutons
• Trois cartes identiques sous le hero, quel que soit le contenu
• Les mêmes coins arrondis et la même ombre grise douce sur tout
• Des émojis ou des icônes en trait génériques à côté de chaque point

Les mêmes recherches indiquent aussi la sortie. Claude est très orientable : dites-lui quels réglages par défaut éviter et quoi utiliser à la place, et le résultat s'améliore aussitôt (Anthropic, 2025).

Anthropic a mis ces conseils sous la forme d'une skill de design frontend et d'un plugin Claude Code, et précise que vous pouvez créer votre propre skill à partir du design system de votre entreprise. Cette dernière possibilité est celle qui compte pour un site d'entreprise.

Des conseils généraux sur des « polices intéressantes » vous donnent un autre site générique. Votre propre design system vous donne le vôtre.

Partir d'un design system, pas d'un prompt

Un design system pour une création par IA est un ensemble de décisions nommées que Claude peut lire : couleurs, polices, tailles de texte, espacements, rayons d'arrondi et points de rupture, chacun avec un rôle. Écrites sous forme de design tokens dans un fichier, elles deviennent les seules valeurs que le site a le droit d'utiliser.

La différence avec un PDF de charte graphique, c'est que les tokens sont lisibles par une machine. Un PDF dit que votre couleur d'accent est l'orange. Un fichier de tokens dit que brand.flame vaut #df4e32 et qu'elle sert pour le logo, les flèches, les filtres actifs et le focus des champs, et rien d'autre. Claude peut suivre la seconde formulation à la lettre, et un script peut vérifier qu'il l'a fait.

Ce que contient un design system exploitable pour un projet Claude Code :

• Des tokens de couleur avec un rôle. Fond, texte, titres, texte atténué, bordures, une couleur d'accent, et les thèmes (par exemple un thème sombre et un thème clair) qui les associent.
• La typographie. Les polices de la marque sous forme de fichiers que vous avez le droit d'héberger vous-même, une échelle typographique aux écarts de taille réels, et les graisses utilisées à chaque niveau.
• Espacements, rayons et points de rupture. Une échelle d'espacement, un rayon par rôle (boutons, cartes, sections) et les largeurs d'écran auxquelles la mise en page change.
• Des composants avec un seul nom chacun. Un bouton, une carte ou un hero porte le même nom dans le fichier de design, dans le code et dans le CMS, pour que personne n'ait à traduire.

D'où cela vient-il ? Si vous avez un designer ou une bibliothèque Figma, exportez les tokens à partir de là.

Si vous avez un site existant qui vous plaît, les tokens peuvent être lus dans sa feuille de style, ce qui s'est passé pour la refonte de SaaS Hackers. Si vous n'avez ni l'un ni l'autre, payez un designer pour cette partie avant de construire quoi que ce soit. Une journée de décisions de design coûte moins cher qu'un site qui ressemble à tous les autres.

Un choix technique fait tenir le système. Si vous utilisez Tailwind CSS, n'importez pas son thème par défaut. Générez plutôt le thème à partir de votre fichier de tokens, pour que les seules couleurs, tailles et polices présentes dans le projet soient les vôtres. Claude ne peut pas piocher un violet standard qui n'existe pas.

Comment formuler vos règles par écrit pour Claude ?

Claude Code lit un fichier appelé CLAUDE.md au début de chaque session : c'est donc là que vous placez les règles du projet. Un CLAUDE.md de projet se trouve dans le dépôt et est partagé, via la gestion de versions, avec tous ceux qui y travaillent (documentation de Claude Code, 2026).

Les conseils d'Anthropic pour le rédiger sont pratiques. Gardez chaque CLAUDE.md sous les 200 lignes environ, car des fichiers plus longs consomment plus de contexte et réduisent la fidélité avec laquelle Claude les suit.

Formulez des instructions assez concrètes pour être vérifiées : « Exécute npm test avant de valider » plutôt que « teste tes modifications ». Regroupez les règles sous des titres et supprimez celles qui se contredisent (documentation de Claude Code, 2026).

Vous n'avez pas non plus à partir d'une page blanche : la commande /init rédige un fichier de départ à partir de votre base de code.

Pour la création d'un site web, le CLAUDE.md qui fonctionne couvre cinq points :

1. Ce que vous construisez et avec quoi. La stack, l'hébergement et l'endroit où se trouve le contenu.
2. La liste des interdits. Ce qui ne doit pas arriver : modifier une URL en ligne, valider des secrets dans le dépôt, ajouter un service payant ou un script tiers sans demander, écrire dans le mauvais projet CMS.
3. Les standards. Aucune couleur, taille ou police hors des tokens. Un seul nom de composant partout. Sortie statique par défaut. WCAG 2.2 AA. Anglais britannique ou américain.
4. Des règles de rédaction pour tout texte ajouté par Claude. Un langage simple, aucun texte inventé, et un marqueur impossible à manquer (les mots COPY NEEDED en majuscules, plus ce qui manque) là où les mots n'existent pas encore.
5. Les commandes. Comment lancer le serveur de développement, le build et chaque contrôle. Les bonnes pratiques d'Anthropic présentent la commande qui exécute vos contrôles comme la ligne la plus utile du fichier (documentation de Claude Code, 2026).

CLAUDE.md est une recommandation, pas une contrainte. Claude le traite comme du contexte et peut juger qu'une consigne ne s'applique pas. Pour tout ce qui doit se produire à chaque fois, comme lancer le formateur ou ne jamais lire un fichier de secrets, Claude Code propose des hooks et des règles de permission que l'outil applique lui-même (documentation de Claude Code, 2026).

Placez le brief détaillé dans un fichier de spécifications distinct. Anthropic recommande de demander à Claude de vous interviewer jusqu'à ce qu'il puisse rédiger la spécification, de l'enregistrer sous le nom SPEC.md, puis de lancer une nouvelle session pour construire à partir de ce fichier. Ainsi, la construction démarre avec un contexte propre et une définition écrite de ce qui sera considéré comme terminé (documentation de Claude Code, 2026). Pour les règles de marque et de design qui ne s'appliquent que de temps en temps, une skill les met de côté jusqu'au moment où elles servent. Notre guide sur les Claude Skills pour les équipes marketing explique leur fonctionnement.

Construire par petites phases validées par une personne

Un site web construit avec Claude Code dérape de la même manière qu'un site construit par un développeur junior : trop de choses à la fois, et personne ne regarde avant la fin. La solution est la même aussi. Découpez la construction en phases, relisez chacune d'elles et ne démarrez pas la suivante tant que la précédente n'est pas validée.

Voici un ordre de phases qui fonctionne pour un site marketing :

1. Mise en place. Framework, styles, CMS et hébergement connectés, avec une page vide déployée sur un lien de prévisualisation.
2. Modèle de contenu et migration. Schémas du CMS, et contenus existants transférés sous forme de brouillons.
3. Design system. Tokens, polices et tous les composants, présentés sur une seule page de catalogue.
4. Templates et pages. Chaque type de page construit à partir des composants et rempli avec du vrai contenu.
5. SEO. Balises head, données structurées, sitemap, redirections et vérifications par rapport à l'ancien site.
6. Publication. Prévisualisations, workflow des éditeurs et tout ce qui reconstruit le site quand le contenu change.

Chaque phase se termine par une pull request et un lien de prévisualisation sur lequel une personne peut naviguer. La pull request indique ce qui a été construit, ce qui a été vérifié et ce que les vérifications ont révélé, ce que Claude a supposé, et ce qui reste à faire. Cette dernière rubrique est l'endroit où les questions en suspens remontent, au lieu d'être réglées discrètement au hasard.

Pourquoi un catalogue de composants est utile

Le catalogue est une page unique qui présente chaque composant dans chacun de ses états : chaque style de bouton, chaque carte, l'en-tête ouvert et fermé, les champs de formulaire avec erreurs, chaque bloc de section avec un contenu d'exemple. C'est là que vous validez l'aspect visuel avant qu'un template ne l'utilise. Corriger une carte une seule fois dans le catalogue coûte bien moins cher que de la découvrir défaillante sur 200 pages. Gardez le catalogue hors du sitemap et paramétrez-le en noindex.

Regardez le catalogue en largeur mobile autant qu'en version desktop. La plupart des sites générés par IA à l'allure générique s'effondrent d'abord sur mobile : texte trop petit, cartes trop serrées, menus qui se chevauchent.

Quels contrôles gardent un site créé par l'IA sur la bonne voie ?

Ce sont les vérifications qui empêchent un bon départ de virer à un résultat générique. Les bonnes pratiques d'Anthropic le résument simplement : Claude s'arrête quand le travail lui semble terminé. Donnez-lui donc un contrôle dont le résultat est réussi ou échoué, et il pourra corriger ses propres erreurs avant que vous les voyiez (documentation de Claude Code, 2026).

Pour un site marketing, voici les vérifications qui valent la peine d'être intégrées. Faites en sorte que la construction du site les exécute elle-même, pour qu'un échec bloque le déploiement au lieu de s'ajouter à une liste de tâches.

• Tokens à jour. La feuille de style générée correspond au fichier de tokens, de sorte que personne n'a modifié l'un sans l'autre.
• Contraste. Chaque association de couleurs pour le texte, les champs de formulaire et le focus, dans chaque thème, respecte le niveau AA des WCAG 2.2. Cela représente au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (W3C, 2023). L'anneau de focus et les bordures qui délimitent un contrôle doivent aussi atteindre 3:1.
• Lint des tokens. Un script qui échoue dès qu'une couleur, une taille ou une police du code n'est pas un token : pas de codes hexadécimaux, pas de rgb(), pas de tailles en pixels saisies dans un composant, pas de noms de polices.
• Noms des composants. Chaque bloc de section du CMS a un composant du même nom, et inversement.
• Analyse d'accessibilité. Une analyse automatisée comme axe sur chaque type de page, plus un contrôle au clavier : pouvez-vous atteindre et utiliser chaque menu, filtre et formulaire sans souris ?
• Vitesse. Lighthouse sur mobile pour la page d'accueil et les principaux templates, exécuté plusieurs fois. Notre guide sur les Core Web Vitals explique ce que mesurent les scores de vitesse.
• Mise en page aux largeurs réelles. Captures d'écran ou analyse de débordement aux largeurs mobile, tablette et desktop, pour repérer le texte qui déborde de son conteneur.

Demandez à Claude des preuves à chaque fois : la commande exécutée et son résultat. Un simple « toutes les vérifications passent » ne dit pas grand-chose, et lire le résultat est plus rapide que de relancer la commande vous-même (documentation de Claude Code, 2026).

Regardez ensuite les pages de vos propres yeux. Les vérifications automatiques détectent ce qui est mesurable. Elles ne peuvent pas vous dire qu'une page a l'air d'un template.

Comment remplacer un site existant sans perdre de trafic de recherche ?

Remplacer un site en production est une migration, et le risque est de perdre des positions plutôt que de faire mauvaise impression. La règle qui vous protège est la suivante : chaque URL de l'ancien site garde exactement la même adresse sur le nouveau, ou reçoit une redirection permanente vers la bonne page.

Claude Code est bien adapté à ces vérifications, car elles sont répétitives et exactes. Lors d'une refonte, mettez en place trois contrôles avant la bascule :

• Contrôle des routes : chaque adresse de l'ancien sitemap renvoie un code 200 sur la prévisualisation du nouveau site, et une adresse inconnue renvoie un code 404.
• Contrôle de parité : pour chaque adresse, comparez le title, la meta description, la balise canonical, le H1 et les données structurées avec la page en ligne, et signalez un échec dès que quelque chose a disparu.
• Contrôle des redirections : chaque redirection gérée par l'ancienne plateforme est recréée, les chaînes sont aplaties et aucune redirection ne pointe vers une page qui redirige à son tour.

Ne laissez pas Claude modifier un slug « pour faire le ménage ». Ajoutez « ne jamais modifier une URL qui existe sur le site en ligne » à la liste des interdits. Notre guide de la stratégie SEO présente la vue d'ensemble. Si le site est volumineux ou si le trafic compte beaucoup, une agence de notre liste des agences de migration SEO peut piloter le plan de migration pendant que Claude s'occupe de la construction.

En pratique : comment SaaS Hackers a été refait avec Claude Code

SaaS Hackers (géré par Team 4) est passé de Webflow à Astro, Tailwind CSS, TypeScript, Sanity et Netlify en novembre 2026, avec Claude Code pour la construction. Le brief était clair sur l'aspect visuel : reconstruire le design actuel, sans refonte. Il n'y avait ni fichier Figma ni design system, donc le design system a été construit à partir du site en ligne.

Cela a déterminé l'approche. Les couleurs, polices, espacements et rayons ont été extraits de la feuille de style en ligne dans un fichier de tokens, qui contient au final 26 tokens de couleur et trois thèmes (sombre, noir et clair). La police d'affichage de la marque, Heming, dispose d'une licence autorisant l'auto-hébergement, et Inter est open source : les deux ont donc été auto-hébergées.

Le thème par défaut de Tailwind n'a pas été importé, si bien que les tokens étaient les seules valeurs disponibles. L'en-tête, le pied de page, les cartes, les éléments des profils d'experts, les champs de formulaire, le corps des articles et 14 blocs de section ont été construits avec des blocs CMS correspondants et présentés dans un catalogue de composants.

Les quatre vérifications de design (tokens, contraste, lint des tokens et noms des composants) s'exécutent au début de chaque construction et l'arrêtent si l'une d'elles échoue. Les composants ont été validés en largeur mobile et desktop avant qu'un template ne les utilise.

Les propres relevés du projet montrent comment il a tenu :

• axe n'a relevé aucune violation sur 13 pages à la fin des templates.
• Les 409 adresses concernées ont toutes renvoyé un code 200 sur la prévisualisation à ce même stade.
• Les 409 adresses ont fait mieux que les pages Webflow en ligne au contrôle de parité (title, description, canonical, H1 et schema), sans aucune perte.
• Lighthouse mobile en production, trois exécutions chacune sur la page d'accueil en anglais et en allemand, un article et un profil d'expert, a donné de 99 à 100 en performance et 100 en accessibilité et en bonnes pratiques.
• Une analyse de débordement sur 11 types de pages, en 7 langues et à 4 largeurs d'écran, n'a révélé aucun problème.

Ce qui a fait la différence est simple. Claude n'a jamais eu à choisir une couleur ou une police, car le fichier de tokens avait déjà choisi. Et une personne a relu chaque phase avant le début de la suivante, si bien que les problèmes ont été repérés dans le catalogue plutôt que sur les pages en ligne. Ce que Claude a fait plus vite qu'une équipe, c'est la partie répétitive : la migration des contenus, les 134 redirections en place au lancement, et la réexécution des mêmes vérifications après chaque modification. Le fonctionnement quotidien du site, avec ses agents et ses garde-fous, est détaillé dans notre guide sur la stack technique Claude Code pour un site web agentique.

Erreurs courantes et comment les éviter

La plupart des constructions de sites web par IA qui échouent pèchent pour l'une des quelques mêmes raisons. Chacune a une solution simple.

Commencer par « construis-moi une page d'accueil ». Claude comble chaque lacune avec une valeur par défaut, et la page d'accueil donne le ton de tout ce qui suit. Rédigez d'abord le design system et le CLAUDE.md, puis construisez les composants, puis les pages.

Décrire la marque avec des adjectifs. « Audacieux, moderne, digne de confiance » ne signifie rien d'exploitable pour un modèle. Donnez-lui des tokens, des fichiers de polices et une capture d'écran d'une page qui vous plaît. La documentation d'Anthropic suggère de coller directement la capture d'écran du design dans le prompt.

Tout construire en une seule session. Les longues sessions perdent le fil des premières décisions. Travaillez par phases, lancez de nouvelles sessions à partir de la spécification et gardez chaque modification assez petite pour être relue.

Se fier au « terminé ». Claude rapporte ce qu'il croit. Faites en sorte que le build lance les vérifications, demandez le résultat, et regardez vous-même l'aperçu en largeur mobile avant de valider quoi que ce soit.

Laisser du texte apparaître de nulle part. Une construction par IA écrit des titres et des témoignages plausibles pour remplir l'espace. Interdisez le texte inventé dans CLAUDE.md et utilisez des textes provisoires bien visibles, pour qu'aucun faux contenu n'arrive sur le site en ligne. Notre guide sur l'utilisation de Claude pour la rédaction explique comment écrire les vrais textes.

Quand faire appel à un designer ou à une agence ?

Claude Code fait gagner beaucoup de temps de développement. Il ne remplace pas le jugement d'un designer. Faites appel à un designer quand vous n'avez pas de design system, quand la marque elle-même doit être retravaillée, ou quand le site est le principal moyen pour les acheteurs de vous évaluer et que « correct » ne suffit pas.

Un partage raisonnable consiste à payer un designer pour le système et les maquettes des pages clés, puis à laisser Claude Code les construire en respectant les vérifications ci-dessus. Un designer vous donne aussi un point de comparaison : une maquette sur laquelle contrôler Claude vaut toujours mieux qu'une description. Parcourez notre liste de web designers pour les marques SaaS B2B pour trouver des freelances capables de prendre en charge cette partie.

Faites appel à une agence quand vous avez besoin que tout soit pris en charge : stratégie, design, développement, migration et quelqu'un de responsable en cas de panne. Demandez comment elle utilise l'IA dans son processus de développement et quelles vérifications sont lancées avant toute mise en ligne. Si vous préférez confier tout le projet, comparez les meilleures agences de web design pour le SaaS B2B avant de briefer qui que ce soit.

À propos de SaaS Hackers

SaaS Hackers est une communauté de spécialistes du SaaS B2B qui partagent des enseignements concrets, créée par ceux qui font la croissance sur le terrain. Elle publie des guides pratiques, des modèles et un annuaire sélectionné d'agences et d'experts à l'expérience avérée en marketing digital pour le SaaS B2B. SaaS Hackers est géré par Team 4, et ce site a été reconstruit avec Claude Code selon l'approche décrite dans ce guide.