Comment créer un site web avec Claude Code en 2026 ?

Votre site est-il visible par les IA ? Faites le test gratuitement, ça prend 2 minutes.

Depuis 2026, je crée tous mes sites clients avec Claude Code. Dans ce guide, mon objectif est de vous montrer, étape par étape, comment je m’y prends, quels pièges éviter et à quels résultats vous attendre.

Ce n’est pas un guide magique pour sortir un site en 30 minutes. C’est une vraie méthode de travail, une marche à suivre rigoureuse pour arriver à un bon résultat.

Dans quel environnement je fais tourner Claude Code ?

Avant la méthode, un mot sur l’outil sous lequel je travaille au quotidien. Je n’utilise pas Claude Code seul dans un terminal, je le fais tourner à l’intérieur d’Antigravity, l’éditeur de code de Google. Pour faire simple, c’est un cousin de Visual Studio Code (l’éditeur de code de Microsoft, le plus utilisé au monde) dans lequel on installe une extension Claude. Et qui intègre nativement d’autres IA.

Deux raisons à ce choix :

• Travailler en parallèle. J’ouvre plusieurs fenêtres en même temps, donc plusieurs chantiers avancent en parallèle pendant que Claude code (refonte d’une page d’un côté, audit SEO de l’autre, rédaction d’une étude de cas sur une troisième). Quand on facture au projet et pas à l’heure, ce gain de productivité change tout.
• Croiser plusieurs IA dans la même interface. Quand Claude Code bloque sur un bug, ou que je veux un second avis sur une décision technique, je pose la même question à Gemini 3.1 ou à ChatGPT sans changer d’outil. Soit ça confirme, soit ça ouvre une autre piste. Très utile sur les sujets pointus (sécurité, perf, dette technique). Le réflexe « vérifier le travail d’une IA avec une autre IA » devient naturel.

Rien n’empêche d’utiliser Claude Code dans un terminal classique ou dans VS Code (Anthropic distribue les deux). Mais si vous comptez créer un site complet, Antigravity rend l’expérience nettement plus fluide.

Comment je crée un site avec Claude Code en 6 étapes ?

Depuis janvier 2026, tous mes projets clients en création de site passent par Claude Code. Et plus j’enchaîne les projets, plus je me rends compte que la méthode compte autant que l’outil. Voici la mienne, étape par étape, avec les pièges que j’ai vus se présenter sur le terrain.

Précision importante avant de commencer : ce guide est pensé pour les sites vitrine d’entreprise de service, pas pour l’e-commerce ou les apps métier. Comptez 80 % des PME et indépendants suisses. Si vous avez besoin de comptes clients, de paiements, d’API Stripe ou de connexions à un CRM, faites-vous accompagner par un développeur. Claude Code n’est pas infaillible, et sur ces sujets, une faille peut vous coûter cher.

1. Choisir la bonne stack technique

La stack, c’est l’ensemble des technologies sur lesquelles repose le site. Mon arbitrage est simple :

• Moins de 20 pages : HTML / CSS / JavaScript. C’est simple, léger, ultra rapide à charger, « aucune » faille, « aucune » maintenance dans le temps. Parfait pour un site vitrine d’indépendant ou un portfolio.
• Plus de 20 pages : Astro + Tailwind + MDX. Astro fait du rendu côté serveur (excellent pour le SEO), Tailwind accélère le travail sur le design, et MDX permet de gérer le contenu comme des fichiers texte versionnés (pas de back-office à maintenir). C’est la stack d’ascense.ch.

Pourquoi pas WordPress ? J’y reviens plus bas, mais en gros : Claude Code ne brille pas sur WordPress, l’écosystème est pensé pour un éditeur visuel et des plugins. Vous perdez 80 % de l’intérêt de l’outil.

Si vous hésitez sur la stack à choisir, lancez simplement ce prompt à Claude :

J'ai tel projet (décris ici le projet, la cible, les fonctionnalités attendues, le budget, le délai).

Pose-moi toutes les questions nécessaires pour définir la meilleure stack technique pour créer ce site, puis propose plusieurs alternatives avec les avantages et les inconvénients de chacune.

Et c’est là que Claude Code devient vraiment puissant : c’est un travail d’itération. Vous répondez aux questions, vous challengez les recommandations, vous testez plusieurs angles, et vous arrivez ensemble à la stack qui colle vraiment à votre projet, pas à un choix par défaut.

2. Trouver son inspiration design (sans tomber dans le design IA générique)

C’est la partie qui mérite le plus de temps, et c’est aussi celle que la plupart des gens bâclent. Un bon design, c’est un site qui inspire confiance, qui convertit, qui se démarque. Un mauvais design IA, c’est un site qui ressemble à 50 autres et qui sera repéré comme tel dès le premier coup d’œil.

Si vous demandez à Claude Code « fais-moi un site moderne et élégant », vous aurez un résultat très IA, très vu et revu. L’outil est un modèle de langue, il remâche ce qu’il connaît. Plus vous êtes flou, plus vous obtenez du générique.

Ma méthode :

1. Sources d’inspi classiques : Awwwards, Webflow Showcase, Framer Gallery, Behance. Utiles mais surreprésentés dans les données d’entraînement.
2. Sources plus profondes : je demande à Claude ou ChatGPT de me formuler des requêtes Google précises pour trouver des sites réels d’entreprises d’un secteur précis dans des pays précis. Par exemple, pour mon client Burotel (mobilier de bureau), j’ai trouvé des sites d’hôtels en Italie et d’agences immobilières en Espagne avec un super design qui transposait très bien. Ce genre d’inspi sort du circuit court de l’IA.
3. Travailler en sections et templates : les sections sont des blocs réutilisables (témoignages, grille de tarifs, liste de services, galerie photos). Les templates sont des styles de page récurrents (page de service, étude de cas, ressource, page membre d’équipe). Sur ascense.ch, j’ai un template pour les pages de service, un pour les études de cas, un pour les pages ressources. Penser en système rend le projet cohérent et accélère tout le reste.
4. Sobre et intemporel, pas tendance. Le bento, le glassmorphism, les blobs animés, c’est cool pendant 18 mois. Après, il faut refaire le design. Visez la sobriété, vous gagnerez 4-5 ans avant la prochaine refonte.

Pour gagner du temps sur l’étape 2, voici le prompt que j’utilise :

Je veux créer un site pour mon entreprise (décris ici l'activité, la cible, le positionnement, l'ambiance recherchée).

Propose-moi une vingtaine de recherches Google précises pour trouver des inspirations design. Je veux principalement des entreprises avec une esthétique proche de celle que je vise, dans d'autres pays et pas forcément dans mon secteur.

Le but n'est pas de copier mes concurrents directs, mais de récupérer des références visuelles intéressantes qui sortent du circuit court de l'IA.

Le design bien pensé pour la conversion reste un travail humain. Claude exécute, vous décidez de l’orientation.

3. Réfléchir à la structure du site et à la hiérarchie

C’est l’étape la plus négligée, et celle qui coûte le plus cher quand on la rate. Si vous changez la structure en cours de projet, vous devrez créer des redirections, refaire le maillage interne et vous risquez de perdre du SEO.

Le travail à faire avant de toucher au code :

• Comprendre la cible et ses besoins : qui vient sur le site, qu’est-ce qu’il cherche, quelle action vous attendez de lui ?
• Réfléchir aux dossiers principaux. Sur ascense.ch, j’ai /services/, /etudes-de-cas/, /ressources/, etc.
• Réfléchir aux sous-dossiers. Toujours sur ascense : /ressources/seo-ia/, /ressources/outils/, /ressources/site-web/, etc.
• Choisir le template de page pour chaque dossier. Un dossier = un template, ça aide à la cohérence.

Et pour avancer en collaboration avec Claude plutôt que de partir de la page blanche, voici le prompt que j’utilise :

Je veux réfléchir à la structure et à la hiérarchie de mon site (décris ici l'activité, les services, les cibles, les contenus prévus).

Pose-moi toutes les questions nécessaires pour définir l'arborescence des dossiers, des sous-dossiers, des URL et des templates de page associés.

L'objectif : une structure cohérente, pensée à la fois pour la cible et pour le SEO.

Cette étape demande de comprendre votre cible et le SEO. Si vous n’êtes pas à l’aise avec la partie SEO, lisez d’abord ce qui fait un bon site web avant d’attaquer la structure.

4. Créer des systèmes autour de la marque (skills et agents)

C’est l’étape qui fait la différence entre un site « fait avec l’IA » et un site qui sonne comme votre marque. Au lieu de réécrire à chaque page « notre voix, c’est X, notre persona c’est Y, nos faits c’est Z », vous les enregistrez une fois pour toutes dans le projet sous forme de skills et d’agents Claude.

Les skills que je crée pour mes clients (et pour ascense) :

• Voix et style : tutoiement ou vouvoiement, expressions locales, formules à privilégier, formules à éviter
• Anti-IA : mots, expressions, structures, ponctuations à bannir pour éviter les textes qui sonnent ChatGPT
• Connaissances : tous les faits importants et chiffrés (chez ascense, mes données SEO actualisées)
• Témoignages et études de cas : tous les avis et résultats clients regroupés à un endroit, citables n’importe où
• Persona : qui est le client type, ses problèmes, ses envies, son vocabulaire
• Positionnement : ce qui différencie l’entreprise, ce qu’on met en avant (chez ascense : approche SEO orientée résultats business, pédagogie, KPIs clairs)
• Infos entreprise : adresse, horaires, tarifs, contact, mais aussi outils utilisés, marques de matériaux, places de parc disponibles, langues parlées…

Une fois ces systèmes en place, demander à Claude de créer une nouvelle page revient à appuyer sur un bouton : la voix est cohérente, les faits sont justes, le persona est respecté. Sans ça, vous repartez de zéro à chaque page et vous perdez en cohérence.

5. Créer les premières pages et tout vérifier

Avant de créer 100 pages, créez-en 2 ou 3 et passez-les au crible. Plus vous laissez d’erreurs dans le système au début, plus vous payerez cher à la fin (corriger 100 pages à la main, c’est long).

Ce que je vérifie sur les premières pages :

• SEO de base avec les extensions Chrome Detailed ou RankFlow : balise title, meta description, hiérarchie Hn, canonical, index/noindex
• Rendu HTML sans JavaScript ni CSS : je désactive JS et CSS dans le navigateur, et je vérifie que le contenu reste lisible. Si ce n’est pas le cas, c’est mauvais signe pour Google et les IA
• Versions tablette et mobile : manuellement, dans les devtools, pas seulement dans Lighthouse
• Performance avec PageSpeedInsights et GTmetrix : on vise vert, pas la chasse au 100/100 (cf. pourquoi la performance d’un site compte vraiment)
• Formulaires, popups, CTA : je teste chaque interaction réelle, pas juste à l’œil

En plus des tests manuels, je demande régulièrement à Claude Code de faire un audit complet. Le prompt que j’utilise :

Analyse le projet en entier. Y a-t-il des failles de sécurité, des bugs, des mauvaises pratiques d'accessibilité, des problèmes de performance, des erreurs SEO ?

Fais une analyse complète et précise, et établis un plan de correction avec les actions par ordre de priorité.

Le but : déceler un maximum de bugs avant de scaler à 30, 100 ou 200 pages. Une erreur dans le template = la même erreur sur toutes les pages dérivées.

6. Profiter de la puissance de Claude Code au quotidien

C’est ici que la magie opère, mais seulement parce que les 5 étapes précédentes ont été bien faites. À partir de ce moment, ajouter une page, un témoignage, une fonctionnalité prend des minutes au lieu d’heures.

Quelques exemples concrets sur ascense.ch ces derniers mois :

• Ajouter un témoignage client : 2 minutes
• Ajouter une étude de cas complète : 5 à 10 minutes (hors rédaction)
• Ajouter une case au formulaire de contact : quelques dizaines de secondes
• Ajouter un quiz ou un simulateur sur une page spécifique : 30 minutes
• Compresser 200 images, les convertir en WebP / AVIF et générer les balises ALT : 10-20 minutes

Pas besoin de copier-coller depuis Google Docs. Pas besoin de paramétrer 12 plugins. Pas besoin de toucher aux balises Hn manuellement. Vous décrivez ce que vous voulez, Claude exécute, vous validez.

D’ailleurs, l’article que vous lisez en ce moment ? Environ 70 % du travail a été fait par Claude Code. J’ai conçu le système d’orchestration, défini les règles de contenu, validé les chiffres, ajusté le ton. Claude Code a écrit le brouillon et mis en page l’ensemble. C’est exactement ce qu’on attend d’un bon stagiaire.

Pour aller plus loin sur l’usage de Claude Code côté contenu et SEO (audit de balises, compression d’images, import de données Google), je détaille tout ça dans Claude Code pour le SEO, 10x plus vite sur votre contenu.

Claude Code ou WordPress ?

Question qui revient souvent. Je ne suis pas dans le camp anti-WordPress (j’y ai passé des années), mais sur la création d’un nouveau site, voici les trois différences qui font basculer mon choix vers Claude Code aujourd’hui.

Le rapport à l’outil change. Sur WordPress, vous réfléchissez à ce que vous voulez créer, vous le créez manuellement (à la souris, dans un éditeur visuel), vous vérifiez, vous maintenez. Avec Claude Code, vous réfléchissez, vous parlez à l’outil, vous validez. L’aspect « parler » change tout. Les tâches rébarbatives (copier-coller du texte, paramétrer des balises, mettre à jour 30 fiches produits) disparaissent. C’est comme avoir un stagiaire technique à plein temps.

La maintenance s’effondre. Sur WordPress, vous avez les mises à jour du cœur, des thèmes, des plugins, les failles de sécurité, les backups, la base de données qui grossit. Chaque fonctionnalité demande un plugin (souvent payant), même les plus basiques. Avec un site Astro fait avec Claude Code, vous avez les fichiers en local, pas de base de données pour un site vitrine, pas de mises à jour critiques tous les mois.

Les performances suivent par défaut. Tous les sites que j’ai créés avec Claude Code sont au vert sur PageSpeed et GTmetrix « out of the box », même avec des animations et des images. Obtenir le même résultat sur WordPress demande de la configuration, des plugins de cache, parfois un CDN. Et même là, ça reste souvent en dessous.

Si vous voulez creuser : WordPress reste-t-il une bonne solution en 2026 ?.

Comment héberger un site web créé avec Claude ?

L’hébergement, c’est l’endroit où vivent les fichiers du site, accessible 24/7 sur internet. Deux options selon votre profil et votre tolérance à la technique.

Hostpoint (Suisse). C’est ce que j’utilise depuis des années pour mes projets personnels et la majorité de mes clients suisses. Interface plus claire qu’Infomaniak (avis personnel), tarifs corrects, support en français, serveurs en Suisse (utile pour la conformité NLPD). Idéal si vous préférez un hébergement classique avec un panneau d’administration simple et un support humain joignable.

Vercel. Plan gratuit très généreux pour un site statique, déploiement automatique depuis Git (vous poussez le code, le site se met à jour tout seul), parfait techniquement pour les projets Astro. L’inconvénient : si vous n’êtes pas à l’aise avec Git et les outils de développement, l’interface peut intimider. Mais une fois la première mise en place faite (en général par votre développeur ou par Claude Code), c’est l’expérience la plus fluide qui existe.

Mon arbitrage en général : Hostpoint pour un client qui veut garder la main et avoir un interlocuteur suisse, Vercel pour un projet où je m’occupe de la technique de A à Z.

Faut-il remplacer votre agence web par Claude Code ?

Question délicate, je vais répondre cash.

Pour qui Claude Code remplace l’agence, partiellement ou totalement :

• Vous avez déjà des bases en développement web et vous voulez accélérer
• Vous êtes indépendant·e ou freelance et vous voulez gérer votre site vous-même
• Vous êtes une PME avec une personne en interne suffisamment techo pour piloter l’outil
• Vous êtes prêt·e à investir du temps (15 à 30 heures minimum) sur la phase initiale

Pour qui Claude Code ne remplace pas l’agence :

• Vous ne savez pas coder et n’avez aucune envie d’apprendre, même les bases
• Vous voulez un site « clé en main » avec accompagnement, stratégie de contenu, SEO et conseils
• Vous lancez un e-commerce, un service avec comptes clients, ou une plateforme avec des APIs sensibles
• Vous n’avez pas le temps de tester, vérifier, corriger : pour vous, un site doit « juste marcher »

Pour ces profils, l’IA reste utile, mais en outil d’accélération pour votre prestataire, pas en remplacement. Chez ascense, par exemple, j’utilise Claude Code sur tous les sites que je livre — vous bénéficiez de la vitesse de l’outil sans avoir à le piloter vous-même. Et le site inclut la stratégie, les 15-30 pages de contenu rédigé, l’optimisation SEO et un an de maintenance.

L’outil ne remplace pas l’expertise. Il la rend juste plus efficace.

Quelles sont les précautions à prendre lors de la création d’un site avec Claude ?

Cinq points de vigilance que je vois revenir sur tous les projets que je récupère ou que j’audite.

Le design IA générique. Si vous demandez « un site moderne et minimaliste » sans inspiration précise, vous aurez ce que tout le monde voit déjà. Les utilisateurs commencent à reconnaître les sites IA au premier coup d’œil. Donnez à Claude des références concrètes : URL d’un site que vous aimez, palette de couleurs, typographies, structure de page. Plus vous êtes précis, moins le résultat sera générique.

La sécurité dès qu’il y a des APIs ou des données sensibles. Sur un site vitrine sans données utilisateur, le risque est faible. Mais dès que vous touchez à du paiement, des comptes clients, des APIs tierces (Stripe, CRM, base de données), Claude peut laisser passer des failles exploitables. Kevin Lesieutre a publiquement raconté comment il s’est retrouvé avec un problème d’API Stripe sur un projet vibe-codé : ce genre d’incident est plus fréquent qu’on le pense. Faites-vous accompagner par un développeur pour ces sujets.

Le SEO toujours à vérifier à la main. Même si vous dites à Claude « optimise le SEO », il fera des erreurs. Vérifiez systématiquement : title (60 caractères max, mot-clé en début), meta description (160 caractères max), canonical, directives index/noindex, hiérarchie Hn correcte, contenu lisible sans JavaScript. Une extension comme Detailed ou RankFlow vous fait gagner du temps.

Le mobile et les bugs d’affichage. Claude rend une version mobile correcte la plupart du temps, mais des bugs glissent : padding qui casse à 375px, image qui déborde, formulaire qui devient illisible. Testez manuellement dans les devtools sur 3 largeurs (mobile 375, tablette 768, desktop 1280).

La posture stagiaire. Le résumé de toutes les précautions tient en une phrase : Claude Code est un stagiaire à qui vous déléguez du travail, jamais un collègue autonome. Vous lui dites quoi faire, vous lisez ce qu’il a produit, vous corrigez ce qui ne va pas. Sans cette boucle de relecture, vous accumulez les erreurs sans les voir.

Mes derniers sites créés avec Claude Code

Pour donner une idée des temps réels et de ce que ça donne :

• ascense.ch : 30 heures de travail, ~50 pages, design très travaillé, voix éditoriale poussée
• calculsuisse.ch : 20 heures, ~200 pages, design volontairement standard (objectif SEO local, pas de différenciation visuelle)
• campingauxcailloux.be : 15 heures, collaboration client (récolte d’infos, allers-retours sur les textes) qui prend toujours plus de temps que le code
• hypnose-saviese.ch : 15 heures, première position sur « hypnose Savièse » deux semaines après la mise en ligne

Et un cas plus ancien qui illustre ce qui compte vraiment au-delà de l’outil : Marlène, institut de beauté à Martigny. Ancien site fait par une agence, inutilisable. Refonte orientée conversion, budget total 7’500 CHF, résultat : de 0 à 15+ prospects par mois et un trafic doublé en 30 jours. Ce site n’a pas été créé avec Claude Code (projet de début 2025), mais il rappelle que la stratégie et le contenu font le résultat, pas l’outil.