Créer ou refaire son site web avec Claude Code : la méthode en 10 étapes (retour d'expérience)

TL;DR : j'ai refait mon site entièrement avec Claude Code. 3 jours pour clarifier mon positionnement, moins de 2 jours pour construire, une mise en ligne en une journée. Coût en outils : 0 € de plus que mon abonnement Claude. Résultat : de 66 URL à 11. Voici la méthode en 10 étapes, les 3 prompts à copier, et tout ce qui a cassé en route.

Ouvre ton sitemap, celui que Google lit, et compte les URL.

Je l'ai fait sur le mien en juillet. Je pensais avoir une dizaine de pages. J'en avais 66 : des offres que je ne vends plus, des formations d'un autre cycle, des articles d'avant le blog, et une home qui essayait de tout dire à tout le monde. Un vrai foutoir.

Mon site tournait sur Dorik, un outil NoCode, après des années de WordPress. Un outil NoCode t'aide à publier. Il ne t'aide jamais à supprimer. Un site se dégrade par accumulation, pas par obsolescence technique, et changer d'outil ne règle pas l'accumulation.

J'ai donc tout refait avec Claude Code. Quand je dirigeais mon agence, un site mobilisait au moins 5 personnes : un chef de projet, un designer, un rédacteur, un développeur back-end, un développeur front-end. Sur cette refonte, Claude a tenu les 5 rôles. J'ai gardé le seul que l'IA ne peut pas jouer : le client exigeant qui sait ce qu'il veut.

Pour qui est cette méthode ? Pour un site vitrine de 5 à 20 pages qui change peu : indépendant, TPE, PME, consultant. Pas pour toi si tu as une boutique, un espace membre ou une équipe qui publie tous les jours. Reste sur un CMS.

0. Avant de commencer : ce qu'il te faut

Un abonnement Claude payant. Claude Code est inclus dès le plan Pro (20 $ par mois, 17 $ en paiement annuel). Le plan gratuit ne le donne pas. Tu n'as besoin ni du terminal ni de savoir coder : Claude Code s'utilise aussi dans l'application de bureau Claude et dans le navigateur. Si tu ne l'as jamais ouvert, commence par mon guide complet de Claude Code.

Le bon modèle. Choisis un modèle qui raisonne longtemps plutôt qu'un modèle rapide. J'ai fait ma refonte en juillet avec Claude Fable 5 en effort élevé. Aujourd'hui, je te conseille Claude Opus 5.5. Sur un chantier de dix pages, le gain ne se voit pas sur une page isolée. Il se voit sur le nombre d'allers-retours évités.

Le temps. Compte une semaine. L'essentiel part dans le positionnement et les contenus, pas dans la technique.

Le budget. Rien de plus que ton abonnement si tu choisis un hébergement gratuit, quelques euros par mois sinon. Je compare les options à l'étape 8.

Le bon outil pour ton cas. Trois questions :
→ Moins de 15 pages qui changent rarement ? Site statique, cette méthode est faite pour toi.
→ Un blog actif ? Garde ton CMS de blog à côté (le mien reste sur Ghost, sur un sous-domaine).
→ Une boutique, des comptes clients, une équipe qui édite tous les jours ? Reste sur un CMS.

1. Préparer le projet dans Claude Code : dossier et CLAUDE.md

Claude Code s'ouvre sur un dossier vide et un curseur. Pas de gabarit, pas de formulaire. Ce dossier, c'est ton projet. Prépare-le ainsi :

mon-site/
├── CLAUDE.md            ← le cerveau du projet
├── positionnement.md    ← étape 2
├── design-system.md     ← étape 4
├── contenus/            ← étape 3, une fiche par page
└── site/                ← le site lui-même

Le fichier le plus important s'appelle CLAUDE.md. Claude le relit automatiquement au début de chaque session. Tu y mets qui tu es, ce que tu vends, la technique choisie, tes règles d'écriture, ta façon de travailler. Et surtout ton journal de décisions : chaque choix tranché, daté, avec sa raison et les options écartées.

Pourquoi c'est décisif ? Un site se construit en plusieurs sessions, parfois à plusieurs jours d'intervalle. Sans mémoire écrite, chaque session repart de zéro et tu tranches deux fois les mêmes questions. Avec ce fichier, Claude arrive en sachant déjà que la home ne porte qu'un seul bouton de vente. Il ne te le redemande jamais.

Et ce fichier sert bien après la mise en ligne. Dans 3 mois, tu rouvres Claude Code et tu dis « change le prix de cette offre ». Il retrouve le positionnement, la charte et les décisions prises. Le site reste cohérent avec lui-même.

Chez moi : le CLAUDE.md faisait 20 lignes au départ. À la fin, il pesait 82 Ko et contenait 22 décisions datées.

Si tu ne retiens qu'une chose de cet article : tiens un journal de décisions, et fais-le lire à ton IA.

À ton tour → copie ce modèle à la racine de ton dossier et remplis la partie « Qui je suis ».

# Projet : site [nom de domaine]

## Qui je suis
[3 lignes : activité, cible, ce qui me différencie]
→ Détail : positionnement.md

## Ce qu'on construit
- Site vitrine statique (HTML/CSS, sans framework), hébergé sur [Netlify].
- [Le blog reste sur … : on n'y touche pas.]
- Pages : voir contenus/arborescence.md

## Règles de travail
- Une page à la fois. Pose-moi 4 à 5 questions avant de coder.
- Relis design-system.md avant chaque page.
- Challenge-moi, ne me suis pas. Note mes idées de 1 à 10 quand je te le demande.
- Ne supprime ni ne publie rien sans mon accord.

## Règles de rédaction
- [Tutoiement ou vouvoiement], phrases courtes, [mots interdits], [ponctuation].

## Règles SEO / GEO
- Title et meta description uniques, un seul H1, texte alternatif sur chaque image.
- FAQ et données structurées sur les pages d'offre.
- Tenir à jour sitemap.xml, robots.txt et llms.txt à chaque nouvelle page.

## Journal de décisions
| Date | Décision | Pourquoi | Alternatives écartées |
|---|---|---|---|
| AAAA-MM-JJ | … | … | … |

2. Clarifier son positionnement avant de construire

Avec l'IA, construire 10 pages propres prend un après-midi. Savoir quoi y mettre, à qui le dire et à quel prix, c'est ça qui prend du temps. Si tu inverses l'ordre, tu obtiens un site brouillon plus vite.

J'ai donc passé 3 jours à ne pas construire mon site.

Commence par toi, pas par tes offres. Claude doit savoir où tu veux aller avant de juger quoi que ce soit. Six questions : ton parcours, tes clients actuels, ce que tu fais bien et ce que tu aimes faire, les missions où tu as le plus d'avis positifs, ce que tu ne veux plus faire, où tu veux aller. Sans ce contexte, Claude aurait trouvé mon programme pour freelances de plus de 45 ans très bien construit. Avec ce contexte, il a vu tout de suite qu'il n'avait plus rien à faire sur mon site.

Puis une offre à la fois. Si tu colles tes 6 offres en vrac en demandant de tout réorganiser, tu obtiens en 30 secondes un document flatteur : tes propres idées, mieux présentées. Rien n'est tranché. Travaille offre par offre : Claude t'interroge, rédige une fiche sur un gabarit fixe, puis la note.

Demande une note, pas un avis. Une IA à qui tu demandes son avis va dans ton sens. Une IA à qui tu demandes une note sur 10 devient froide : un 6, c'est un 6, et elle doit justifier chaque point manquant. La discussion change de nature. On ne débat plus de « est-ce que c'est bien ? » mais de « comment passer de 6 à 9 ? ».

Chez moi : 6 offres pour 3 cibles au départ. À l'arrivée, une cible (les TPE et PME) et une échelle de 3 offres aux prix affichés. Ma cinquième formation a pris un 4/10 : elle recréait exactement la dispersion que je voulais corriger. Elle a fini dans le footer.

Le prompt n°1 · Positionnement

Avant de construire quoi que ce soit, aide-moi à clarifier mon positionnement.

Étape 1. Interroge-moi sur moi, une question à la fois :
mon parcours, mes clients actuels, ce que je fais bien et ce que j'aime faire,
les missions où j'ai le plus d'avis positifs, ce que je ne veux plus faire,
où je veux aller dans 2 ans. Attends chaque réponse.

Étape 2. Voici mes offres actuelles : [colle tes pages, ta plaquette ou une liste].
Travaille une offre à la fois. Pour chacune, pose-moi 5 questions :
à qui je vends, quel problème je règle, ce que le client reçoit concrètement,
à quel prix, et ce qui se passe pour lui après l'achat.

Étape 3. Note chaque offre de 1 à 10 au regard de mon objectif.
Justifie chaque point manquant et dis ce qu'il faut changer pour atteindre 9.
Signale les offres qui se cannibalisent et propose une échelle de 3 offres maximum.

Ne me suis pas : contredis-moi quand je me trompe.
Quand une décision est prise, ajoute-la au journal de décisions de CLAUDE.md
(date, décision, raison, alternatives écartées).
À la fin, écris positionnement.md : cible, problème, promesse en une phrase,
les 3 offres (pour qui, livrables, prix, suite), preuves, ton.

À ton tour → tant que tu ne peux pas écrire en une phrase à qui tu vends quoi, à quel prix, et ce qui se passe après l'achat, ne passe pas à l'étape 3.

Si tu préfères faire ce travail accompagné, c'est exactement ce que je livre dans Le Cap.

3. Concevoir l'arborescence et le contenu de chaque page

Une page, un objectif, une action principale. C'est la règle qui évite le retour du foutoir.

Liste tes pages. Pour un site vitrine : la home, une page par offre, à propos, contact, mentions légales, et les pages de remerciement après chaque formulaire.

Une seule action de vente sur la home. La mienne ne propose qu'un appel de cadrage et une inscription à ma newsletter. J'avais ajouté en cours de route un second formulaire, un « diagnostic » gratuit. Je l'ai retiré 2 jours plus tard : les visiteurs se répartissaient entre les deux au lieu de rejoindre la newsletter.

Écris le contenu avant le code. Une fiche par page dans le dossier contenus/ : promesse, pour qui, ce qu'on reçoit, prix, preuve, appel à l'action. Le même gabarit pour toutes les offres rend les incohérences visibles d'une fiche à l'autre. Claude peut rédiger le premier jet à partir de ton positionnement. Toi, tu relis et tu tranches.

Si c'est une refonte : l'inventaire et les redirections

C'est la partie qui fait peur, à raison. Une refonte mal gérée efface des années de référencement. La parade tient en trois temps.

1. L'inventaire. Exporte ton sitemap. Pour chaque URL, relève le trafic des 12 derniers mois (Search Console) et le nombre de backlinks. Claude Code sait faire cet audit SEO.
2. Le tri en 3 familles. Les pages qui auront un équivalent direct. Les anciennes offres à rediriger vers les nouvelles. Les pages à supprimer.
3. La table de redirections, écrite avant la bascule. Chaque ancienne URL renvoie vers sa nouvelle adresse (redirection 301) ou disparaît volontairement (410).

Chez moi : 66 URL, dont 46 redirigées et 20 supprimées. Découverte critique : une seule ancienne page, un article sur la délivrabilité des emails, portait 663 backlinks. Impossible de la laisser mourir. Elle redirige aujourd'hui vers son équivalent sur le blog. Autre piège évité de justesse : ma landing de sponsoring vivait sur un sous-domaine. Si j'avais supprimé l'ancien projet avant de poser la redirection, l'URL et ses liens seraient morts.

À ton tour → écris une ligne par page : URL · objectif · action principale. Si tu refais un site, ajoute la colonne « ancienne URL ».

4. Créer son design system

Un design system, c'est un seul fichier qui décrit ta charte et ses règles d'usage. Claude le relit avant de créer chaque page. C'est ce qui garantit que la page créée en août ressemble à celle créée en juillet.

Ce qu'il contient : les couleurs en hexadécimal avec leur rôle, les polices et leurs graisses, l'échelle des titres, les espacements, les arrondis, les boutons, les cartes, les formulaires. Et surtout les règles d'usage.

Deux chemins pour l'obtenir.
→ Tu as déjà une identité (un site, un logo, une plaquette) : Claude l'extrait de l'existant. Tu relis et tu corriges. C'est du travail de relecture, pas de création.
→ Tu pars de zéro : va chercher de l'inspiration avant de prompter. One Page Love pour les sites d'une page, Godly pour le design contemporain, SaaS Landing Page pour les pages d'offre. Choisis 3 références, dis à Claude ce qui te plaît dans chacune, et demande-lui 3 palettes en maquette. Tu choisis à l'écran, pas sur description.

Chez moi : je voulais un rafraîchissement, pas un rebranding. Claude m'a maquetté 3 palettes. J'ai retenu un bleu nuit et un seul accent doré, avec une police choisie parmi 4 sur une maquette comparative.

Écris les règles que l'IA ne peut pas deviner. Mon design system précise que mon or n'est lisible que sur fond sombre, et qu'il doit basculer sur une version plus profonde sur fond clair. Sans cette ligne, Claude produisait des liens dorés illisibles une page sur deux.

Le prompt n°2 · Design system

Crée le design system de mon site dans design-system.md.

Si j'ai déjà une identité : analyse [URL de mon site actuel / logo / plaquette en pièce jointe]
et extrais couleurs, polices et styles existants.
Si je pars de zéro : voici 3 sites dont j'aime le style [3 URL] et ce qui me plaît
dans chacun [1 ligne par site]. Propose-moi 3 palettes sous forme d'une page HTML
de comparaison que j'ouvre dans mon navigateur. Je choisis à l'écran.

Le fichier doit contenir :
- les couleurs en hexadécimal, chacune avec son rôle (fond, texte, accent, action, alerte) ;
- les polices, graisses et l'échelle des titres (H1 à H4, texte, petit texte) ;
- les espacements, rayons, ombres ;
- les composants : boutons (principal, secondaire), cartes, formulaires, encadrés ;
- les règles d'usage que tu ne peux pas deviner : contrastes minimaux,
  ce qui est interdit, ce qui est réservé à la vente.

Vérifie le contraste de chaque couple texte/fond (WCAG AA) et signale ceux qui échouent.
Relis ce fichier avant de créer ou modifier chaque page.

Pour aller plus loin sur le sujet, j'ai détaillé la méthode dans mon article sur le design system.

À ton tour → dépose design-system.md à côté de ton CLAUDE.md. Ce sont les deux fichiers que Claude doit relire à chaque fois.

5. Intégrer le SEO, l'AEO et le GEO dès la conception

Mets ces règles dans le gabarit avant de produire la première page. C'est dix fois plus simple que de corriger quinze pages après coup.

Le SEO, pour Google. Un title et une meta description uniques par page. Un seul H1. Des URL courtes. Un texte alternatif sur chaque image. Un sitemap.xml, un robots.txt, une balise canonical.

L'AEO, pour les réponses directes. Une réponse claire dès le début des pages clés. Une FAQ sur chaque page d'offre. Des données structurées : qui tu es (Organization, Person), ce que tu vends (Service), tes questions-réponses (FAQPage).

Le GEO, pour les IA comme ChatGPT ou Perplexity. Quand quelqu'un demande à une IA de lui recommander un prestataire, elle lit des sites et en tire ce qu'elle peut. Plutôt que de la laisser deviner ton activité en parcourant ton menu, écris-lui noir sur blanc ce qu'elle doit retenir :
→ un fichier llms.txt à la racine du site : 20 lignes en texte simple sur qui tu es, ce que tu vends, à quel prix, pour qui, avec les liens vers tes pages clés ;
→ une page « Et si vous êtes une IA » qui dit la même chose, lisible par un humain qui tomberait dessus (la mienne) ;
→ un robots.txt qui autorise GPTBot, ClaudeBot et PerplexityBot. Attention, certains hébergeurs et services les bloquent par défaut : Cloudflare le fait sur les nouveaux domaines depuis juillet 2025. Vérifie le réglage.

Je n'ai pas encore assez de recul pour chiffrer ce que ça rapporte, et je me méfie de ceux qui l'affirment déjà. Mais ça se fait en une demi-heure, ça ne coûte rien, et tes concurrents ne l'ont pas fait. Le sujet complet est dans mon guide AEO et GEO.

À ton tour → recopie ces règles dans la partie « SEO / GEO » de ton CLAUDE.md. Elles s'appliqueront à chaque page sans que tu aies à le redemander.

6. Lancer la production du site

Tout est prêt : le contexte, le positionnement, les contenus, la charte, les règles SEO. La production devient la partie la plus rapide du projet. Voici le premier message à envoyer, adapté de celui que j'ai utilisé pour mon site :

Tu m'aides à construire le site [ton domaine]. Lis d'abord CLAUDE.md :
il contient qui je suis, mon positionnement et toutes les décisions prises.
Relis aussi design-system.md et les fiches du dossier contenus/.

[Le blog reste sur … : on n'y touche pas.]
On construit un site statique (HTML/CSS, sans framework), hébergé sur [Netlify].

Méthode : une page à la fois, en commençant par la home. Avant de coder,
pose-moi 4 à 5 questions sur ce que la page doit faire. Montre-moi le
résultat dans le navigateur, j'ajuste sur écran. Respecte mes règles
de style définies dans CLAUDE.md.
Challenge-moi, ne me suis pas.

Trois choses à retenir de ce prompt :
→ Il fait lire le contexte d'abord. Claude sait qui tu es avant d'écrire une ligne.
→ Il fixe le périmètre et la technique en 2 phrases. Un site statique, ce sont de simples fichiers HTML et CSS : rien à mettre à jour, rien à pirater, un chargement rapide. Et Claude ne part pas sur un outil que tu ne saurais pas maintenir.
→ Il impose le rythme. Une page à la fois, des questions avant le code, une validation à l'écran.

Commence par la home, puis une page par session. Tu valides chaque page dans ton navigateur avant de passer à la suivante.

Chez moi : 9 pages au lancement, en moins de 2 jours. Aujourd'hui, 17 fichiers avec les landings, les pages de remerciement et les mentions légales, dont 11 pages publiques dans le sitemap.

Le compromis assumé : il n'y a plus d'éditeur visuel. Pour changer quelque chose, tu ouvres Claude Code et tu lui dis quoi faire. Ça m'a fait hésiter au départ. Un mois plus tard, c'était devenu plus rapide qu'avant : « remplace le lien de prise de rendez-vous sur toutes les pages » prend 30 secondes, là où je modifiais 10 pages à la main.

7. Vérifier en local et optimiser

Avant de mettre quoi que ce soit en ligne, teste le site sur ton ordinateur. Claude Code lance un aperçu local : tu navigues sur ton site comme un visiteur, sans que personne ne le voie.

La checklist : l'affichage sur mobile, les liens cassés, chaque formulaire, le poids des images, le score PageSpeed, les données structurées, les titles, les contrastes.

Le prompt n°3 · Audit avant mise en ligne

Le site est terminé en local. Avant de le mettre en ligne, fais un audit complet
et rends-moi un tableau : point vérifié · statut (OK / à corriger) · page · correctif proposé.

1. Chaque page : title et meta description uniques, un seul H1, URL propre, canonical.
2. Liens internes et externes cassés, ancres vides.
3. Images : poids, format, attribut alt.
4. Affichage mobile à 375 px : débordements, boutons, menus.
5. Formulaires : attributs requis par l'hébergeur, page de remerciement, test d'envoi.
6. sitemap.xml, robots.txt (GPTBot, ClaudeBot, PerplexityBot autorisés), llms.txt.
7. Données structurées : valides et cohérentes avec le contenu.
8. Performance : lance un audit Lighthouse si tu le peux et liste les 3 gains les plus importants.
9. Cohérence avec design-system.md et le ton défini dans CLAUDE.md.
10. Si refonte : chaque ancienne URL de la table de redirections a une destination.

Ne corrige rien sans mon accord. Commence par les points bloquants.

Chez moi : sur iPhone, les boutons des formulaires débordaient de leur carte. Une capture d'écran envoyée à Claude, un correctif, c'était réglé. Plus sournois : mon score PageSpeed mobile oscillait entre 60 et 84. Le coupable était l'animation de particules en haut de la home, jolie, mais qui consommait 7 secondes de processeur sur un téléphone lent. Cadence divisée par deux, animation coupée sur mobile : 85 sur mobile, 100 sur ordinateur.

Ce que j'en retiens dépasse mon site. Claude teste beaucoup de choses tout seul, mais il ne voit pas ce qui se passe hors du code. Tu ne deviens pas développeur en créant ton site avec l'IA. Tu deviens le chef de projet le plus exigeant de l'équipe, et c'est précisément ce qui fait la différence.

8. Choisir son hébergement

Un site statique, ce sont de simples fichiers. Il s'héberge presque partout, souvent gratuitement. Mais les offres gratuites ont des conditions que personne ne lit, et deux d'entre elles interdisent un site professionnel. Voici ce que j'ai vérifié en octobre 2026.

Mon conseil si tu débutes : Netlify, c'est ce qui demande le moins de réglages. Avec une règle à connaître. Le plan gratuit donne 300 crédits par mois, et chaque mise en ligne en production en consomme 15. Tu as donc environ 20 mises en ligne par mois, un peu moins si ton site a du trafic. Les prévisualisations, elles, ne coûtent rien. Demande à Claude de publier d'abord en prévisualisation, et de ne passer en production qu'une fois par lot de modifications. Si ton site vit beaucoup, le plan Personal à 9 $/mois enlève le stress.

Si tu veux un hébergement gratuit sans compter : Cloudflare Pages. Le trafic est illimité. Il te faudra simplement un service pour tes formulaires de contact. Pour la newsletter, le formulaire de ton outil d'emailing (Kit, Brevo…) fonctionne partout.

Si tu tiens à un hébergement en France, avec ton domaine et tes emails au même endroit : un mutualisé. Claude peut t'aider pour chaque réglage, mais il y en a plus.

Quel que soit ton choix, déploie d'abord sur l'adresse temporaire que te donne l'hébergeur. Tu vérifies tout en conditions réelles avant de toucher à ton nom de domaine.

Chez moi : Netlify en plan gratuit. La moitié des crédits consommée le mois de la mise en ligne, bien moins depuis. Le premier bug est arrivé là : j'ai envoyé 3 tests depuis mon formulaire, aucune notification. Le HTML était parfait. Netlify désactive simplement la détection des formulaires sur les nouveaux sites. Un réglage à activer, une nouvelle mise en ligne, affaire réglée.

À ton tour → sur l'adresse temporaire, soumets chaque formulaire pour de vrai et vérifie que tu reçois bien le message.

9. Configurer son DNS sans casser ses emails

Le DNS, c'est l'annuaire qui dit à Internet où se trouve ton site quand on tape ton nom de domaine. Le modifier, c'est faire pointer ton domaine vers ton nouvel hébergeur. L'opération prend quelques minutes. Elle peut aussi casser des choses qui n'ont rien à voir avec ton site.

Touche seulement aux enregistrements du site. Ce sont les lignes de type A ou CNAME, sur le domaine et sur www. Ton hébergeur te dit exactement quoi saisir.

Ne touche à rien d'autre. Les lignes MX, SPF, DKIM et DMARC font fonctionner tes emails. Si tu les supprimes ou les écrases, tes messages ne partent plus ou finissent en spam. C'est l'erreur la plus fréquente et la moins connue d'une refonte. J'ai écrit un article entier sur la délivrabilité si tu veux comprendre ce qui se joue là.

Repère tes sous-domaines (blog, landing, outil) avant de commencer, pour ne pas les couper au passage.

Choisis une version (avec ou sans www) et fais rediriger l'autre vers elle. Puis attends le certificat HTTPS avant d'annoncer quoi que ce soit.

Chez moi : le DNS a basculé en 4 minutes. Je n'ai touché ni au sous-domaine du blog, ni aux enregistrements email.

À ton tour → fais une capture d'écran de ta zone DNS avant toute modification. C'est ta marche arrière.

10. Mettre en ligne et suivre

La mise en ligne se fait dans un ordre précis. Chaque étape vérifie la précédente :

1. Site validé sur l'adresse temporaire.
2. Domaine attaché chez l'hébergeur.
3. Bascule du DNS.
4. Certificat HTTPS actif.
5. Test des redirections, une par une, si c'est une refonte.
6. Sitemap soumis à Google Search Console, en dernier.

Branche tes outils de mesure. Dans Google Search Console : la propriété de ton domaine, le sitemap, et une demande d'indexation pour tes pages clés. Dans Google Analytics : le suivi installé sur chaque page, et ton inscription newsletter ou ta prise de rendez-vous déclarée comme événement clé. Sans ça, tu ne sauras jamais si ton nouveau site fait mieux que l'ancien.

Fais la recette en vrai. Chaque formulaire envoyé, chaque page ouverte sur ton téléphone, un dernier test PageSpeed.

Surveille. À J+7 puis à J+30, regarde les pages en erreur 404 dans Search Console. Une ancienne URL oubliée dans ta table de redirections se repère là.

Chez moi : mise en ligne le 23 juillet. Les 66 redirections ont répondu correctement. Mais les deux champs d'inscription à la newsletter de la home, qui marchaient en local, renvoyaient « Bad request » en production. Un attribut oublié, réglé en 10 minutes. Sans test réel, je l'aurais découvert des semaines plus tard, en me demandant pourquoi plus personne ne s'inscrivait.

Faire vivre son site : une modification, une session

Ce qui m'a le plus surpris, c'est ce que je peux faire maintenant. Le site n'est plus une chose figée qu'on refait tous les 5 ans. Il bouge chaque semaine, sans friction.

En un mois : un menu burger sur mobile, un bouton newsletter dans l'en-tête, un lien remplacé sur 31 occurrences en une seule passe. Puis une landing complète pour une nouvelle formation en ligne : page de vente, page de remerciement, conditions générales, paiement et séquence email. Une session de travail, zéro impact sur le reste du site, même charte, même ton. En agence, ce lot aurait été un projet à part entière avec un bon de commande.

C'est là que le journal de décisions prend tout son sens. Claude savait déjà que cette formation reste hors du catalogue principal, que le prix s'affiche, et que le bouton doré plein est réservé à la vente.

La question que je ne sais pas encore trancher : la maintenabilité. Mon site, ce sont 17 fichiers HTML. Quand je change le pied de page, Claude modifie les 17 en une passe. Ça marche. Mais je ne sais pas si ça tiendra à 50 pages. Si le site doit grossir, la réponse existe : un générateur de site statique comme Astro, qui définit l'en-tête et le pied de page une seule fois. Je n'en ai pas besoin aujourd'hui. Le jour où j'en aurai besoin, je saurai quoi faire.

Le bilan : coûts, temps, résultats

Coût en outils : 0 € de plus. Netlify en plan gratuit. Mon abonnement Claude existait déjà et sert à tous mes projets.

Coût en temps : 5 jours. 3 jours de positionnement, moins de 2 jours de construction, plus quelques heures de retouches étalées sur le mois. La dernière refonte que j'ai pilotée en agence avait duré plus de 6 mois.

Résultat : de 66 URL à 11. C'est vérifiable en deux clics, mon sitemap est public. Le site ne dit plus qu'une chose, à une seule cible.

Ce que je referais autrement : rien. Je m'attendais à écrire ici une liste de regrets. Il n'y en a pas. On décide, on voit le résultat dans la minute, on ajuste. Je n'avais pas pris autant de plaisir sur mon propre site depuis des années.

Récap : les 10 étapes en un coup d'œil

0. Avant de commencer : un abonnement Claude Pro, Claude Opus 5.5, une semaine devant toi.
1. Prépare le projet : un dossier, un CLAUDE.md, un journal de décisions.
2. Clarifie ton positionnement : une cible, 3 offres maximum, prix affichés.
3. Conçois l'arborescence et les contenus : une page, un objectif. Refonte : inventaire et table de redirections.
4. Crée ton design system : un fichier que Claude relit avant chaque page.
5. Intègre SEO, AEO et GEO dès le gabarit : title, FAQ, données structurées, llms.txt.
6. Lance la production : une page à la fois, des questions avant le code.
7. Vérifie en local : mobile, formulaires, PageSpeed, l'audit avant mise en ligne.
8. Choisis ton hébergement et teste sur l'adresse temporaire.
9. Configure ton DNS sans toucher à tes emails.
10. Mets en ligne dans l'ordre, puis surveille les 404 à J+7 et J+30.

Commence cette semaine : ouvre ton sitemap et compte tes URL. Si le chiffre te surprend autant que moi, tu sauras que le chantier en vaut la peine.

Chaque jeudi, je raconte dans ma newsletter SYSTEMIA une expérimentation de ce genre, avec le prompt pour la refaire chez toi.

Le foutoir ne se range pas tout seul. Mais tu n'as plus besoin d'une équipe de 5 pour le faire.

FAQ

Peut-on créer un site web avec Claude Code sans savoir coder ?

Oui, à condition de tenir le rôle de chef de projet : décrire ce que tu veux, vérifier le résultat, poser les questions de bon sens (« pourquoi je n'ai pas reçu le formulaire ? »). Tu n'écris pas le code, mais tu dois savoir lire une page et la tester. Le vrai prérequis, c'est une offre claire, pas une compétence technique.

Faut-il utiliser le terminal pour se servir de Claude Code ?

Non. Claude Code fonctionne aussi dans l'application de bureau Claude (Mac et Windows) et dans le navigateur. Le terminal reste une option pour ceux qui y sont à l'aise, il n'est pas nécessaire pour créer un site vitrine.

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

En outils, presque rien : un abonnement Claude Pro (20 $ par mois, 17 $ en paiement annuel) suffit, le plan Max (à partir de 100 $) si tu l'utilises beaucoup. L'hébergement peut être gratuit (Netlify, Cloudflare Pages) ou coûter quelques euros par mois. Le vrai coût, c'est ton temps : 5 jours dans mon cas, surtout sur le positionnement.

Combien de temps faut-il pour créer son site avec Claude Code ?

Moins de 2 jours pour construire et mettre en ligne une dizaine de pages, une fois l'offre et les contenus tranchés. Compte une semaine en tout si tu inclus le positionnement et la préparation SEO, contre plusieurs mois pour une refonte classique en agence.

Claude Code ou Wix, Webflow, WordPress : que choisir ?

Pour un site vitrine de 5 à 20 pages qui change peu, Claude Code produit un site statique plus rapide, plus sûr et souvent gratuit à héberger, que tu modifies en lui parlant. Choisis un CMS comme WordPress si tu as une boutique, un espace membre ou une équipe qui publie tous les jours. Un constructeur comme Wix ou Webflow reste pertinent si tu veux un éditeur visuel et ne rien gérer.

Comment ne pas perdre son SEO lors d'une refonte avec l'IA ?

Inventorie toutes tes URL, mesure le trafic et les backlinks de chacune, écris une table de redirections 301 avant la bascule, et teste chaque redirection après. Soumets le nouveau sitemap à Search Console en dernier, puis surveille les erreurs 404 pendant 30 jours.

Faut-il un design system pour un site de 5 pages ?

Oui, et c'est justement là qu'il coûte le moins cher à écrire. Un fichier avec tes couleurs, tes polices, tes espacements et tes règles de boutons suffit. Sans lui, chaque nouvelle page dérive un peu, et au bout de 5 pages ton site ne ressemble plus à rien.

Un site construit avec l'IA est-il maintenable dans le temps ?

Pour une vingtaine de pages, oui : chaque modification passe par une session avec Claude, qui relit le journal de décisions et le design system. Au-delà de 50 pages, un générateur de site statique comme Astro devient utile pour ne pas dupliquer l'en-tête et le pied de page dans chaque fichier.

Tu me lis souvent ? Ajoute Captain Marketing à tes sources préférées Google