Créer un site avec Claude Code

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

1. 01

   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) Copier

   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”.
2. 02

   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 Copier

   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-code Installe 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-site Cré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-site cd 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.

   claude Lance 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.

3. 03

   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) Copier

   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 ressources/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.

4. 04

   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) Copier

   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.

   1. Demande une seule page ou une seule section.
   2. Ouvre le fichier modifié et vérifie que le contenu correspond au brief.
   3. Teste les liens, le menu mobile et les CTA.
   4. 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”.

5. 05

   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) Copier

   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.
   • Tester avec un serveur local : lance python -m http.server 4173 --bind 127.0.0.1, puis ouvre http://127.0.0.1:4173/.
   • Tester 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é.

• 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.