Créer un site avec Claude Code : guide étape par étape

01 La méthode, en 4 temps

Brief → première version → itération → mise en ligne. On la déroule ci-dessous en cinq étapes concrètes (installation de Claude Code comprise), chacune avec son prompt à copier. Adapte les crochets, valide chaque étape, puis avance : ne demande pas tout le site d'un coup.

01

Brief

Tu cadres l'objectif, les pages, le style et les contraintes.

02

Première version

Tu décris ton site, Claude Code génère la structure et la première version.

03

Itération

Tu corriges en français, page par page, jusqu'au bon rendu.

04

En ligne

Contrôle qualité, puis déploiement gratuit sur un hébergeur statique.

Avant de lancer Claude Code

Claude Code peut lire, créer, modifier des fichiers et exécuter des commandes : travaille dans un dossier dédié, vérifie le dossier courant avant de lancer claude et relis les changements importants. Le cadre général est précisé dans les mentions et la note d'usage.

Avant de commencer

Travaille dans un dossier vide dédié au projet. Demande des petits changements vérifiables plutôt qu'un site complet en un seul prompt : c'est plus facile à relire et à corriger.

Schéma d'un site statique généré avec Claude Code, du brief au déploiement — Sortie attendue : un site statique multipage, sans framework, prêt à déployer.

02 Préparer le brief du site

Avant de générer du code, on cadre l'objectif, les pages, le style et les contraintes. Un bon brief évite de refaire le site trois fois.

Prompt · Brief du site (ChatGPT / Claude)

Aide-moi à cadrer le brief d'un site statique avant de le créer avec Claude Code.

Projet :
- Objectif du site :
- Cible :
- Pages souhaitées :
- Style visuel (ambiance, couleurs, typo) :
- Ton éditorial :
- Contraintes : site statique, HTML/CSS, pas de framework, pas de dépendance JS externe, utilisable sans JavaScript, responsive, accessible.

Donne-moi :
1. Une arborescence de pages claire
2. Le contenu principal de chaque page (titres, sections, CTA)
3. Les recommandations de structure HTML et de design system
4. Une liste de points de contrôle qualité avant mise en ligne

Ce que tu dois décider avant d'ouvrir Claude Code

Claude Code peut générer vite, mais il ne devine pas ton positionnement. Plus le brief est clair, moins tu passes de temps à corriger.

Objectif du site: Présenter une activité, vendre une offre, publier des méthodes, montrer un portfolio, capter des demandes.
Pages souhaitées: Liste les pages réelles dès le départ, même si elles sont simples : accueil, ressources, outil, contact, à propos.
Contraintes techniques: Indique explicitement site statique, HTML/CSS, sans framework, sans build, utilisable sans JavaScript.
Style: Donne 3 à 5 adjectifs concrets et des références de structure, pas seulement “premium”.

03 Installer et lancer Claude Code

On installe Claude Code, on l'ouvre dans le dossier du projet, puis on lui donne le brief comme point de départ.

Terminal · Installation et lancement

npm install -g @anthropic-ai/claude-code

mkdir mon-site && cd mon-site

claude

Comprendre chaque commande

Cette étape sert à installer Claude Code, créer ou ouvrir le dossier du site, puis lancer Claude Code au bon endroit.

npm install -g @anthropic-ai/claude-codeInstalle Claude Code globalement sur ta machine. npm vient avec Node.js. Le flag -g signifie “global”, donc la commande claude devient disponible depuis ton terminal.

mkdir mon-siteCrée un nouveau dossier appelé mon-site. Remplace ce nom par le nom réel de ton projet, par exemple monsieur-prompt, portfolio-julien ou landing-formation.

cd mon-sitecd veut dire “change directory” : aller dans un dossier. Après cette commande, ton terminal travaille à l'intérieur du dossier mon-site. C'est important, car Claude Code lira et modifiera les fichiers du dossier où tu te trouves.

claudeLance Claude Code dans le dossier courant. Si tu es dans le mauvais dossier, arrête-toi : Claude Code pourrait créer ou modifier les fichiers au mauvais endroit.

Si ton site existe déjà

Ne fais pas mkdir mon-site. Va directement dans le dossier exact du site avec cd.

Exemple Windows : cd C:\Sites\monsieur-prompt.com

Exemple Mac/Linux : cd ~/Sites/monsieur-prompt.com

Règle simple : le dossier où tu lances claude doit être la racine du site statique, c'est-à-dire l'endroit où se trouve généralement index.html.

04 Générer la structure du site

On demande la base du site en précisant bien les contraintes techniques. On vérifie le rendu avant d'aller plus loin.

Prompt · Structure du site (Claude Code)

Crée un site statique multipage à partir de ce brief :

[COLLER LE BRIEF DE L'ÉTAPE 1]

Contraintes techniques strictes :
- HTML et CSS uniquement, pas de framework, pas de build step
- aucune dépendance JavaScript externe
- le site doit rester utilisable sans JavaScript
- responsive (mobile, tablette, desktop)
- accessible : balises sémantiques, attributs alt, contraste suffisant
- un seul fichier styles.css partagé comme design system
- chaque page : title unique, meta description, canonical, Open Graph

Commence par créer l'arborescence des fichiers et la page d'accueil,
puis montre-moi le résultat avant de continuer.

Ce que Claude Code doit créer au départ

Pour un site statique simple, la base doit rester lisible. Tu dois pouvoir ouvrir les fichiers et comprendre à quoi ils servent.

index.html: La page d'accueil du site.
styles.css: Le design system commun : couleurs, typo, boutons, cards, responsive.
script.js: Seulement si une interaction utile existe, comme un menu mobile ou un bouton de copie.
Dossiers de pages: Par exemple methodes/index.html ou a-propos/index.html pour garder des URLs propres.
assets/: Images, icônes, visuels Open Graph et autres fichiers médias.

Si Claude Code propose React, Vite, Next.js, Tailwind ou une librairie externe alors que tu veux un site statique simple, refuse et rappelle la contrainte : HTML/CSS, pas de build step.

05 Itérer page par page

On fait évoluer le site par petits changements vérifiables : une page, une section, un réglage de style à la fois.

Prompt · Itération ciblée (Claude Code)

Ajoute la page [NOM DE LA PAGE] en réutilisant le design system de styles.css.

Pour cette page :
- garde la même navigation et le même pied de page que les autres pages
- structure : [SECTIONS SOUHAITÉES]
- title, meta description et canonical propres
- liens internes vers les pages liées
- ne touche pas aux autres pages

Quand c'est fait, liste ce que tu as modifié et ce que je dois vérifier.

Comment itérer sans perdre le contrôle

Le bon rythme consiste à demander une modification courte, vérifier le rendu, puis seulement ensuite demander la suite.

Demande une seule page ou une seule section.
Ouvre le fichier modifié et vérifie que le contenu correspond au brief.
Teste les liens, le menu mobile et les CTA.
Corrige avant d'ajouter une nouvelle page.

Évite les prompts du type “améliore tout le site”. Préfère : “sur la page ressources, améliore uniquement la section méthode publiée sans toucher au header”.

06 Contrôler la qualité, puis déployer

Avant la mise en ligne, on vérifie le rendu sans JavaScript, l'accessibilité, le responsive et le SEO de base. Puis on déploie sur un hébergeur statique.

Prompt · Contrôle qualité (Claude Code)

Fais une passe de contrôle qualité sur tout le site avant déploiement :

1. Vérifie que chaque page a un title unique, une meta description et un canonical
2. Vérifie la hiérarchie des titres (un seul H1 par page)
3. Vérifie les attributs alt des images
4. Vérifie que le site reste lisible sans JavaScript
5. Vérifie le responsive et le contraste
6. Vérifie les liens internes et corrige les liens cassés
7. Crée un robots.txt et un sitemap.xml

Liste les problèmes trouvés et corrige-les un par un.

Comment vérifier avant de publier

Un site statique peut être testé localement avant d'être mis en ligne. L'objectif est de repérer les liens cassés, les images manquantes et les erreurs visibles.

Ouvrir en local: Double-clique sur index.html pour vérifier que les liens relatifs fonctionnent en mode fichier.
Serveur local: Lance python -m http.server 4173 --bind 127.0.0.1, puis ouvre http://127.0.0.1:4173/.
Sans JavaScript: Les contenus principaux doivent rester lisibles même si les interactions sont désactivées.
Déployer: Sur Netlify, GitHub Pages ou Cloudflare Pages, tu envoies le dossier du site, pas seulement un fichier isolé.

07 La checklist avant de publier

À passer en revue avant chaque mise en ligne. C'est ce qui sépare un site « généré » d'un site propre.

Chaque page a un title unique, une meta description et un canonical absolu.
Un seul H1 par page, hiérarchie H2/H3 logique.
Le site reste lisible et navigable sans JavaScript.
Images : attributs alt présents et descriptifs.
Responsive vérifié sur mobile, tablette et desktop.
Liens internes valides, ancres descriptives.
Commandes relues avant exécution, surtout si elles installent, déplacent ou modifient des fichiers.
robots.txt et sitemap.xml présents et cohérents.

08 Ce que tu dois obtenir à la fin

L'objectif n'est pas un bout de code jetable, mais un site clair que tu peux relire, modifier et remettre en ligne quand tu veux.

01

Un site statique multipage

HTML et CSS propres, sans framework ni dépendance JavaScript externe.

02

Une structure claire

Des fichiers rangés, un design cohérent et des pages reliées entre elles.

03

Une base réutilisable

Un point de départ pour ajouter des pages, sans repartir de zéro à chaque fois.

09 À qui sert cette méthode ?

Créateurs & solopreneurs
Freelances
Formateurs
Débutants en code

10 Les outils à sortir de l'étagère

Une méthode légère : un agent de code, un LLM pour le brief, un terminal et un hébergeur statique.

Claude Code: Génère et modifie le site directement dans le projet.
ChatGPT / Claude: Cadrer le brief, l'arborescence et les contenus.
Terminal + éditeur: Lancer Claude Code et relire les fichiers générés.
Netlify / GitHub Pages: Mettre le site en ligne gratuitement, sans serveur.

Si tu ne veux pas gérer les fichiers ou le terminal, compare une alternative no-code comme Bolt et une alternative no-code comme Lovable. Elles accélèrent le premier prototype, mais donnent moins de contrôle direct sur l'architecture produite.

Tu retrouves ces outils sur l'étagère d'outils IA, section code et agents de code.

11 Ce qui fait rater un site généré avec l'IA

01

Tout demander d'un coup

Un site complet en un seul prompt devient impossible à relire. Avance par petits changements vérifiables.

02

Ne pas fixer les contraintes

Sans « pas de framework, sans dépendance JS », l'agent peut ajouter des libs inutiles et alourdir le site.

03

Ne pas relire le code

Garder la main : relis ce qui est généré, valide chaque étape, ne déploie pas à l'aveugle.

12 Décliner la méthode

La même logique de brief, génération, itération et contrôle qualité s'applique à d'autres formats.

01

Landing page

Une seule page orientée conversion : hero, preuve, offre, CTA.

02

Portfolio

Une home, une page projets et des pages cas par cas.

03

Site de méthode

Une collection de pages tutoriels reliées, comme cet atelier.

13 Résultat final

À la fin de cette méthode, tu as un site statique propre, une structure claire et une façon de travailler réutilisable pour ajouter des pages au fil du temps.

Un site statique multipage en ligne
Un design system réutilisable
Une checklist de contrôle qualité
Des prompts réutilisables pour la suite

14 Questions fréquentes

Qu'est-ce que Claude Code ?

Claude Code est un agent de code en terminal : il lit, écrit et modifie les fichiers de ton projet, exécute des commandes et travaille en plusieurs étapes. Pour un site, il génère le HTML, le CSS et la structure des fichiers à partir d'instructions en langage naturel.

Faut-il savoir coder pour créer un site avec Claude Code ?

Non, pas pour démarrer. Tu décris le résultat attendu et Claude Code produit le code. Comprendre les bases du HTML et du CSS aide surtout à relire, corriger et garder le contrôle sur la qualité.

Peut-on créer un site statique sans framework avec Claude Code ?

Oui. Il suffit de le préciser dans le brief : HTML et CSS uniquement, pas de framework, pas de build, pas de dépendance JavaScript externe, et un rendu qui reste utilisable sans JavaScript.

Claude Code ou Cursor pour créer un site ?

Claude Code travaille en terminal et exécute des tâches de bout en bout, ce qui convient bien à un site statique généré puis itéré. Cursor est un éditeur avec copilote intégré, plus adapté si tu veux garder la main fichier par fichier. Les deux peuvent produire le même résultat.

Que veut dire cd mon-site dans la commande ?

cd veut dire « change directory » : se déplacer dans un dossier depuis le terminal. mon-site est un exemple à remplacer par le vrai dossier du site. Si le site existe déjà, place-toi dans son dossier racine, celui qui contient généralement index.html, avant de lancer claude.

Monsieur Prompt est-il responsable des commandes lancées sur ma machine ?

Non. Les contenus Monsieur Prompt sont proposés à titre éducatif. Tu restes responsable des commandes que tu exécutes, des fichiers que tu modifies et des outils que tu installes sur ta propre machine. En cas de doute, arrête-toi, vérifie le dossier courant et relis la commande avant de la lancer. Le cadre général est détaillé dans les mentions et la note d'usage.

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

Un site statique se déploie facilement sur un hébergeur gratuit comme Netlify, GitHub Pages ou Cloudflare Pages. On envoie les fichiers, on configure le domaine, et le site est en ligne sans serveur à gérer.

Sources officielles

Anthropic, démarrage avec Claude Code, vérifié le 23 juillet 2026.
Anthropic, workflows courants de Claude Code, vérifié le 23 juillet 2026.

15 Reçois la prochaine méthode

Une nouvelle méthode de production IA, avec ses prompts copiables, directement par email. Pas de hype, pas de spam.

En t’inscrivant, tu consens à recevoir les prochaines méthodes. Retrait possible à tout moment en écrivant à media@soulinked-arts.com. Confidentialité.