Créer un site avec Claude Code : la méthode pro en 4 étapes

Tu veux créer un site avec Claude qui ait l'air pro, pas d'un énième site généré par l'IA ? Bonne nouvelle : avec Claude Design et Claude Code, c'est possible en quelques prompts, écrits avec tes propres mots. Je te montre ma méthode en 4 étapes, de la maquette à la mise en ligne. Et je vais plus loin que la plupart des tutos : on rend ensuite ton site visible sur Google et dans ChatGPT grâce à ChatSEO.

Le tuto en vidéo

Tu préfères regarder ? Toute la méthode est dans la vidéo, étape par étape, sur un site démo pour une agence marketing.

▶ YouTube · 35 min Regarder la vidéo sur YouTube

Les 3 outils pour créer un site avec Claude

Trois outils suffisent, et ils se connectent entre eux : Claude Design pour la maquette, Claude Code pour le site et la mise en ligne, ChatSEO pour le SEO. Tu ajoutes un hébergement web et un nom de domaine pour que ton site soit accessible à tout le monde.

Certains liens sont affiliés : ça ne te coûte rien de plus et ça soutient mes tutos gratuits.

Avant de commencer : l'étude de marché avec ChatSEO

Avant de dessiner quoi que ce soit, demande à ChatSEO une lecture rapide de ton marché. Ça t'évite de construire un beau site à côté de ce que les gens recherchent vraiment.

ChatSEO, c'est un outil IA qui se comporte comme un consultant SEO, créé par trois fondateurs français dont un consultant SEO. Tu crées ton compte gratuitement (connexion avec Google), tu as des crédits offerts, et tu lui parles comme à une IA classique.

Je vais créer un site pour [ton activité, ta cible, ta zone géographique]. Donne-moi des recommandations : l'état du marché sur cette niche, les opportunités à saisir, et sur quoi je devrais me positionner en priorité.

Étape 1 : créer une maquette premium dans Claude Design

Claude Design génère une maquette professionnelle, adaptée à ton activité, qui se démarque des designs génériques de l'IA. Le secret : lui donner des inspirations et la bonne compétence (skill).

Trouve 1 ou 2 inspirations

Va sur Dribbble ou Framer et cherche le mot clé de ta niche en anglais (par exemple marketing agency). Ce sont de vrais designs créés par des designers. Enregistre 1 ou 2 visuels qui te plaisent (clic droit, « Enregistrer l'image sous »).

Lance ta maquette

Dans Claude, ouvre Design dans la barre latérale de gauche, puis « Visiter la page d'accueil autonome ». Clique sur le + pour joindre tes inspirations, puis + › Skills › Frontend Design : cette compétence aide encore plus Claude à éviter les designs génériques. Choisis le modèle le plus avancé (Opus) avec l'effort maximal : c'est un travail de qualité, il le mérite.

Crée un site vitrine pour mon [activité] "[nom]" basée à [ville].

Nous faisons [ce que tu fais] pour [ta cible], avec 3 offres phares : [offre 1, offre 2, offre 3].

Le design doit être moderne, vivant et haut de gamme, avec une identité qui marque les esprits.

Le site doit être pensé pour convertir : proposition de valeur forte dès le hero, textes courts et impactants, des éléments de confiance bien placés, des boutons d'action visibles, et un parcours qui pousse naturellement à nous écrire.

Inspire-toi des sites en PJ pour la direction artistique.

Réponds aux questions de Claude Design

Avant de créer la maquette, Claude Design te pose une série de questions pour bien comprendre ton site. Mes conseils :

• Structure : commence toujours par une seule page. Elle sera bien plus soignée, et tu créeras les autres ensuite.
• Sections : proposition de valeur, logos clients, chiffres clés, offres détaillées, témoignages, équipe, FAQ, formulaire de contact.
• Images : Claude Design ne génère pas d'images, il met des emplacements vides. Prépare tes visuels à l'avance (Pexels et Unsplash ont de belles images libres de droits) et ajoute-les : il les place au bon endroit.
• Variantes : demande 2 versions du hero, la première section, celle qui fait l'effet « waouh ». Tu choisiras ta préférée.

Ajuste ta maquette

Tu as deux façons de la modifier. Pour les petits changements (texte, couleur, taille, typographie), clique sur Edit, sélectionne l'élément, modifie, puis Save. Pour les gros changements (refaire une section, changer la typo partout), écris un prompt.

Étape 2 : générer ton site avec Claude Code

Claude Code transforme ta maquette en vrai site, à l'identique : il crée tous les fichiers dans un dossier de ton ordinateur. Tu n'as qu'un prompt à écrire.

1. 1

   Exporte ta maquette

   Dans Claude Design, en haut : Share › Export › Project HTML. Tu récupères un fichier zip.

2. 2

   Installe Claude Code

   Télécharge l'application Claude sur ton ordinateur (Claude Code ne fonctionne pas depuis le navigateur pour ce tuto) et connecte-toi à ton compte.

3. 3

   Crée ton dossier de projet

   Crée un dossier sur ton ordinateur (le nom de ton projet), ouvre-le dans Claude Code et clique sur « Faire confiance à l'espace de travail ». C'est là que ton site sera stocké.

4. 4

   Lance la création

   Joins le zip de ta maquette avec le +, choisis le modèle le plus avancé avec l'effort maximal, et envoie ce prompt :

   Prompt 3 · Générer le site Copier

   Crée mon site exactement comme la maquette en PJ exportée de Claude Design.

   Quand c'est terminé, ouvre le fichier index.html : c'est la page principale de ton site.

Étape 3 : mettre ton site en ligne avec Hostinger Connector

Pour l'instant, ton site est sur ton ordinateur : toi seul y as accès. Pour le mettre en ligne, il te faut un hébergement web (l'espace de stockage de ton site sur internet) et un nom de domaine (son adresse, comme nomadicsteph.com).

Je te recommande Hostinger, pour son très bon rapport qualité-prix et surtout pour Hostinger Connector : cette extension connecte Claude Code à ton hébergement. Tu demandes « mets mon site en ligne », « ajoute cette page », et Claude Code s'occupe de tout.

1. 1

   Prends ton hébergement

   Sur Hostinger Connector, clique sur « Obtenir un plan » et choisis Unlimited : sites illimités et nom de domaine offert la 1re année (offre au moment de la vidéo). Prends au moins 12 mois ; 48 mois est le plus rentable si ton projet est sérieux. Ajoute le code NOMADICSTEPH pour -10 %.

2. 2

   Choisis ton nom de domaine

   Sur ton tableau de bord Hostinger, clique sur « Obtenir le nom de domaine » et choisis l'adresse de ton site.

3. 3

   Connecte Claude Code à Hostinger

   Retourne sur la page Hostinger Connector, clique sur « Installer l'extension », choisis Claude Code et copie le bout de code proposé. Colle-le dans Claude Code : une page s'ouvre pour te connecter à ton compte Hostinger. Autorise, c'est connecté.

4. 4

   Publie ton site

   Prompt 4 · Publier le site Copier

   Mets mon site en ligne sur mon nom de domaine [ton-domaine] avec Hostinger.

Tu préfères garder une copie de ton code en ligne, indépendante de ton hébergeur ? Tu peux aussi passer par GitHub : je te montre cette autre méthode dans mon guide rapide Claude Code et GitHub.

Étape 4 : rendre ton site visible avec ChatSEO

Un site en ligne n'est pas encore un site visible. Cette étape, c'est celle que la plupart des tutos oublient : on prévient Google, puis on construit ta stratégie SEO avec ChatSEO, branché directement sur Claude Code. (Pour aller plus loin, j'ai aussi détaillé mon plan pour optimiser le SEO d'un site neuf.)

Connecte Google Search Console

Google Search Console envoie ton site à Google et te donne les vraies données de ton SEO (requêtes, clics, positions). Ajoute ton site, copie l'enregistrement TXT proposé, puis dans Hostinger : Nom de domaine › DNS › Enregistrements DNS, type TXT, nom @, colle le code, laisse 14400 et ajoute. Retourne sur Search Console et clique sur « Valider » (si ça ne marche pas tout de suite, patiente quelques minutes).

Demande ensuite à Claude Code de générer un sitemap (le plan de ton site), puis envoie son adresse complète dans Search Console, rubrique Sitemaps.

Enregistre ton site dans ChatSEO

Dans ChatSEO, va dans Gérer mes sites, ajoute ton adresse et suis l'assistant : il analyse ton positionnement, ton style de rédaction et ton sitemap. Connecte ensuite ta Search Console : ChatSEO travaille alors sur les vraies données de ton site.

Donne-moi ma stratégie SEO pour les 3 prochains mois. Classe par impact et dis-moi par quoi commencer cette semaine.

ChatSEO te renvoie un diagnostic, les meilleurs mots clés de ta niche et une feuille de route par mois. Il te dit aussi ce qui est hors de portée pour l'instant (sur un site neuf, les mots clés très concurrentiels), pour que tu ne perdes pas des mois dessus. C'est tout l'intérêt : il se concentre sur les 20 % d'actions qui apportent 80 % des résultats.

Connecte ChatSEO à Claude Code (MCP)

C'est là que tout devient fluide : au lieu de copier-coller entre les deux outils, tu demandes tout à Claude Code, et il discute directement avec ChatSEO. Il te faut le plan Pro de ChatSEO, le seul qui inclut ce connecteur (appelé MCP).

1. Dans ChatSEO, en bas à gauche : MCP, puis copie l'adresse fournie.
2. Dans Claude Code : Paramètres › Connecteurs › Ajouter › Connecteur personnalisé, nomme-le « ChatSEO », colle l'adresse, puis Connecter.
3. Autorise la connexion et choisis « Toujours autoriser », sinon Claude Code risque d'être bloqué en cours de route.

Crée tes pages optimisées

Demande à Claude Code de créer une page avec l'aide de ChatSEO : ChatSEO choisit le mot clé, vérifie qu'aucune page de ton site ne le vise déjà, analyse les résultats Google et construit le plan ; Claude Code rédige la page dans le style de ton site, ajoute les données structurées, met à jour le sitemap et fait les liens internes.

Crée la landing page [ton offre] avec l'aide du MCP ChatSEO, et garde la même direction artistique que le reste de mon site. Ne la publie pas encore : pose-moi d'abord des questions pour ajouter mon expérience, mes études de cas et mes preuves.

Mon retour d'expérience

Le site sur lequel tu lis cet article a été créé avec cette méthode : une maquette dans Claude Design, transformée en site par Claude Code, hébergée chez Hostinger. Et cet article ? Son brief SEO vient de ChatSEO, connecté à Claude Code. Je ne te recommande que ce que j'utilise vraiment.

Ce que j'ai retenu après plusieurs sites :

• Le design fait la différence. Avec des inspirations et la skill Frontend Design, Claude Design sort des maquettes qui ne ressemblent pas aux sites « faits par l'IA ».
• ChatSEO te libère du temps et de l'énergie. Ses réponses sont simples et structurées : tu sais quoi faire, tu passes à l'action.
• Le contenu rédigé reste à personnaliser. ChatSEO te donne une très bonne base, mais ton expérience, tes exemples et ta voix, c'est toi qui les ajoutes.
• Les liens vers ton site (backlinks), c'est à toi de les obtenir, pour le moment en tout cas.

Les erreurs à éviter quand tu crées ton site avec Claude

La plupart des sites ratés avec l'IA tombent dans les mêmes pièges. Les voici, avec la parade.

• Lancer Claude Design sans inspiration : tu obtiens un design générique. Donne-lui 1 ou 2 visuels de Dribbble ou Framer.
• Demander tout le site d'un coup : la qualité baisse. Commence par la page d'accueil, puis ajoute les pages une par une.
• Oublier les images : Claude Design laisse des emplacements vides. Prépare tes photos avant de commencer.
• Publier en noindex : ton site reste invisible sur Google. Vérifie-le au moment de la mise en ligne.
• Publier sans vérifier l'adresse de la page : dans la vidéo, Claude Code a publié ma page sur une autre adresse que celle recommandée par ChatSEO. Relis toujours le slug (la fin de l'URL) avant de valider.
• Copier-coller le contenu de l'IA tel quel : ajoute ton expérience et tes preuves. C'est ce qui te démarque, pour tes visiteurs comme pour Google.

Combien coûte un site créé avec Claude Code ?

Compte 18 à 24 € par mois pour Claude selon ta formule, quelques euros par mois pour l'hébergement, et ChatSEO gratuit au départ. Voici le détail (prix constatés en octobre 2026) :

Côté temps : la maquette et le site se font en quelques heures. Le SEO, lui, se construit sur la durée : sur un site neuf, compte au moins 3 mois avant les premiers résultats sur Google.

Et après ?

Ton site est en ligne et ta stratégie SEO est lancée. La suite, c'est publier régulièrement des contenus optimisés et faire en sorte que les IA comme ChatGPT recommandent ton site. Et si tu veux commencer à vendre tes produits ou tes services avant même d'avoir ton site, je te montre comment vendre en ligne sans site en quelques clics. Tu préfères WordPress, pour gérer ton site seul dans l'admin ? Je te montre aussi comment créer un site WordPress avec Claude Code, avec ses avantages et ses limites. Et pour ajouter une fonctionnalité sur mesure à un site WordPress, tu peux créer un plugin WordPress avec l'IA. Si tu bloques à une étape ou si tu veux aller plus vite, je peux t'accompagner.

Questions fréquentes

Écrit par

Stéphanie Canovas

Je crée des tutos et formations pour aider les entrepreneurs à créer et optimiser leur site web. +8 000 entrepreneurs formés.

Mon parcoursYouTube ↗LinkedIn ↗