Construire un site avec Claude | Atelier KodjoLive 2026

Option 1

Construire avec Claude (l'application)

Trois phases. Planifier, construire, valider. Ne sautez aucune étape.

Étape 1. Installer et ouvrir Claude

1

Sur téléphone

Cherchez Claude (icône orange, éditeur Anthropic) sur l'App Store ou Google Play. Telechargez et créez un compte gratuit.

2

Sur ordinateur

Allez sur claude.ai dans votre navigateur et connectez-vous.

Étape 2. Copier le prompt maitre

Ouvrez une nouvelle conversation. Vous avez deux options : commencer par le modele vierge à remplir avec vos propres détails, ou copier l'exemple LinguaLibre complet pour voir exactement ce qu'Emile à construit sur scene.

🧩 Modele à remplir (votre projet)

Remplacez les crochets [] par les détails de votre propre projet.

Crée un site web complet en UN SEUL fichier HTML (HTML + CSS + JavaScript inline, rien d'externe sauf Google Fonts). Affiche-le comme un artefact pour que je puisse le voir en direct. Marque: "[NOM DE VOTRE MARQUE]" — [UNE PHRASE POUR DECRIRE VOTRE PRODUIT OU SERVICE]. Fondateur / fondatrice: [VOTRE NOM]. Promesse: [LA PROMESSE PRINCIPALE, EN UNE LIGNE]. Public cible: [QUI S'EN SERT]. Toute la copie en [LANGUE]. Sections dans cet ordre precis: 1. Barre de navigation sticky: logo à gauche, liens ([LISTE DE VOS LIENS]), bouton CTA "[TEXTE DU BOUTON]" à droite. Menu hamburger sous 768px. 2. Hero plein ecran: grand titre "[VOTRE TITRE PRINCIPAL]", sous-titre de 2 lignes, vignette vidéo ou image placeholder, bouton CTA principal. 3. Bandeau de preuves sociales: [NOMBRE] mentions ou logos fictifs. 4. [VOTRE SECTION METHODE / PRODUIT] : [DECRIRE LA GRILLE OU LE FORMAT]. 5. Temoignages: grille de [NOMBRE] cartes avec portrait placeholder, prenom, citation. 6. "Qui est [VOTRE NOM]": portrait placeholder à gauche, 3 paragraphes à droite, une citation mise en avant. 7. Tarifs: [NOMBRE] offres avec prix, points cles, offre du milieu en avant. 8. FAQ avec accordeon: [NOMBRE] questions, clic pour deplier. 9. CTA final: titre fort, bouton. 10. Pied de page: liens, réseaux sociaux, copyright. Direction artistique: - Palette: [COULEUR PRINCIPALE] en couleur principale, [COULEUR ACCENT] en accent, fond [COULEUR FOND], texte [COULEUR TEXTE]. - Typographie: [NOM DE POLICE] via Google Fonts, gras pour les titres. - Style moderne, editorial, premium. Beaucoup d'espace blanc. Coins arrondis. Ombres subtiles. - Entièrement responsive jusqu'à 360px de large. - Scroll fluide sur les liens d'ancre. Accordeon FAQ fonctionnel. Effets hover sur boutons et cartes. Images: uniquement des SVG ou degrades CSS comme placeholders, jamais d'URL externe. Interdictions: - Pas de tirets cadratins ou demi-cadratins. Utilise virgules, points ou deux-points. - Rien d'externe sauf Google Fonts. Avant de coder, propose-moi d'abord le plan détaillé complet de ce que tu vas construire. Ne commence pas à ecrire le code avant ma validation.

📘 Exemple complet rempli : LinguaLibre

C'est le prompt exact qu'Emile utilise sur scene. Parfait comme reference pour voir à quoi ressemble un prompt entièrement rempli.

👀 Voir le site LinguaLibre genere en direct ↗

Crée un site web complet en UN SEUL fichier HTML (HTML + CSS + JavaScript inline, rien d'externe sauf Google Fonts). Affiche-le comme un artefact pour que je puisse le voir en direct. Marque: "LinguaLibre" — un programme de coaching en anglais en ligne pour les professionnels francophones d'Afrique et d'Europe. Fondatrice: Aminata Diallo. Promesse: parler anglais couramment en 90 jours. Toute la copie en français. Sections dans cet ordre precis: 1. Barre de navigation sticky en haut: logo à gauche, liens (Programme, Temoignages, Coach, Tarifs, Contact), bouton CTA "Commencer" a droite. Menu hamburger sous 768px. 2. Hero plein ecran: grand titre "Parlez anglais couramment en 90 jours", sous-titre de 2 lignes, vignette vidéo placeholder a droite avec un bouton play, bouton CTA principal. 3. Bandeau de preuves sociales: 5 mentions de presse fictives en texte (ex: "Vu dans Jeune Afrique", "Cite par RFI"). 4. Grille 3 colonnes presentant la methode: immersion, coaching prive, communaute. Chaque colonne: icône SVG, titre, 2 phrases. 5. Temoignages: grille responsive de 6 cartes style vidéo, chaque carte avec un portrait placeholder (degrade colore), prenom, emoji drapeau pays, citation courte. 6. Section "Qui est Aminata": grand portrait placeholder à gauche, son histoire à droite en 3 paragraphes courts et une citation mise en valeur. 7. Tarifs: 3 offres (Essentiel, Pro, Immersion Totale) avec prix en euros, 4 à 6 points chacune, offre du milieu mise en avant avec badge "Le plus populaire". 8. FAQ avec accordeon: 6 questions, clic pour deplier. 9. CTA final: titre fort, bouton. 10. Pied de page: liens de navigation, icônes réseaux sociaux en SVG, copyright. Direction artistique: - Palette: bleu marine profond (#0B2545) en couleur principale, or chaud (#F4B942) en accent, fond blanc, texte gris fonce. - Typographie: Poppins via Google Fonts, gras pour les titres. - Style moderne, editorial, premium. Beaucoup d'espace blanc. Coins arrondis sur les cartes et boutons. Ombres subtiles. - Entièrement responsive jusqu'à 360px de large. - Scroll fluide sur les liens d'ancre. Accordeon FAQ fonctionnel. Effets hover sur tous les boutons et cartes. Images: uniquement des SVG ou degrades CSS comme placeholders, jamais d'URL externe. Rends-les elegants, pas brises. Interdictions: - Pas de tirets cadratins ou demi-cadratins. Utilise virgules, points ou deux-points. - Rien d'externe sauf Google Fonts Poppins. Tout doit tenir dans UN fichier artefact HTML unique et fonctionner tout de suite.

Étape 3. Valider ou corriger le plan

Avant de laisser Claude coder, vérifiez :

Les sections sont dans le bon ordre pour convaincre
Le message principal est clair
La palette et la typographie correspondent à ma marque

Si oui, dites : "Parfait. Construis maintenant le site complet en un seul fichier HTML avec tout inline (CSS et JavaScript). Affiche-le comme artefact."

Si non : "Retire la section FAQ. Ajoute des temoignages avant les tarifs. Change la palette en bleu et blanc."

Étape 4. Dire oui à Claude

Si le plan vous convient tel quel, pas besoin de recopier un long prompt. Une courte phrase suffit, Claude à déjà tout le contexte :

Parfait, le plan me convient. Construis le site maintenant et affiche-le comme artefact.

Option avancée : si vous voulez ajouter une exigence ou renforcer les règles, utilisez ce prompt plus détaillé à la place.

Afficher le prompt long (optionnel)

Parfait, le plan me convient. Construis maintenant le site complet en UN SEUL fichier HTML avec tout inline (HTML + CSS + JavaScript). Rien d'externe sauf Google Fonts. Respecte integralement le plan que tu viens de proposer : - Toutes les sections dans l'ordre - La palette et la typographie décidées - Les elements interactifs prevus (menu hamburger, scroll fluide, accordeon FAQ, effets hover) - Entièrement responsive jusqu'à 360px de large - Boutons minimum 44px de haut pour le mobile - Placeholders SVG ou degrades CSS pour toutes les images, jamais d'URL externe Affiche le résultat comme un artefact. Interdictions : - Pas de tirets cadratins ou demi-cadratins. Utilise virgules, points ou deux-points. - Pas de Lorem ipsum. Ecris de vrais textes pour chaque section. À la fin, fais un court bilan en 3 points : 1. Ce que tu as construit 2. Les choix que tu as faits (couleurs, typo, structure) 3. Ce que je peux te demander de modifier en premier

Étape 5. Laisser Claude construire

Sur ordinateur, le site apparait à droite. Sur téléphone, tapez sur la carte de l'artefact pour voir l'apercu en plein ecran. Attendez la fin de la generation.

Étape 6. Jeter un oeil rapide à l'artefact

Avec Claude, vous voyez le site se construire directement dans l'artefact. Pas besoin de checklist technique : regardez simplement le résultat et posez-vous trois questions simples.

Vérification express

Le résultat ressemble à ce que j'avais imagine
Les textes sont corrects, les prix sont les bons
Sur téléphone, tout reste lisible et les boutons sont cliquables

Si un détail vous chiffonne, passez directement à l'étape suivante pour demander une correction.

Étape 7. Iterer, un changement à la fois

Sur mobile, le titre deborde de l'ecran. Corrige uniquement ce point. Le bouton "Commencer" est trop petit sur téléphone. Rends-le plus grand. Ajoute une section temoignages entre la methode et les tarifs. Change la palette pour du vert foret et du beige.

Étape 8. Sauvegarder le code

A

Télécharger le fichier

Sur l'artefact, cliquez sur Copy ou Download. Collez dans un fichier nomme index.html sur votre ordinateur. Double-cliquez pour vérifier : le site s'ouvre dans votre navigateur, sans internet.

B

Pret à publier ?

Suivez la section "Publier sur GitHub Pages" plus bas pour mettre votre site en ligne gratuitement et pour toujours.

Option 2

Construire avec l'application Claude pour ordinateur (mode Code)

L'application Claude pour Mac et Windows à un mode Code. C'est comme un chat classique, mais Claude peut créer et modifier des fichiers directement sur votre ordinateur, dans un dossier que vous choisissez. Le Plan Mode est intégré, activable en un clic. Aucun terminal, aucune ligne de commande.

L'application Claude en mode Code avec Plan mode active en bas — L'application Claude pour ordinateur en **mode Code**. Notez le bouton "Plan mode" en bas à gauche, et le selecteur de dossier (Local / emilegio) au-dessus du champ de saisie.

Étape 1. Installer l'application Claude

1

Télécharger l'app

Allez sur claude.ai/download. Choisissez votre systeme (Mac ou Windows). Telechargez et installez comme n'importe quelle application.

2

Se connecter

Ouvrez l'application, connectez-vous avec votre compte Claude (le même que sur claude.ai).

3

Activer le mode Code

En haut à gauche, cliquez sur l'onglet Code (icône </>). C'est la nouvelle interface qui permet à Claude de travailler avec vos fichiers.

Étape 2. Créer un dossier pour votre projet

1

Sur votre ordinateur

Créez un nouveau dossier (Finder sur Mac, Explorateur sur Windows) nomme par exemple monsite. Vous pouvez le mettre sur le Bureau ou dans Documents.

2

Selectionner le dossier dans Claude

Dans l'app Claude, en bas au-dessus de la zone de saisie, cliquez sur le bouton Local puis sur l'icône dossier. Choisissez votre dossier monsite. Claude travaillera desormais dans ce dossier.

Étape 3. Activer le PLAN MODE

Plan Mode force Claude à reflechir et proposer un plan avant de toucher le moindre fichier. C'est la discipline qui separe un bon résultat d'un chaos.

1

Un seul clic

En bas à gauche de la fenetre Claude, cliquez sur Plan mode. Le libelle passe en actif. Claude ne modifiera plus aucun fichier sans votre feu vert.

2

Ouvrir une nouvelle session

Dans la barre laterale gauche, cliquez sur New session.

Étape 4. Decrire votre projet

Collez un prompt dans le champ "Describe à task or ask à question". Deux options : le modele vierge à remplir avec votre propre projet, ou l'exemple LinguaLibre complet pour voir exactement ce qu'Emile utilise sur scene.

🧩 Modele à remplir (votre projet)

Remplacez les crochets [] par les détails de votre projet.

Crée un site web complet en UN SEUL fichier HTML (HTML + CSS + JavaScript inline, rien d'externe sauf Google Fonts). Marque: "[NOM DE VOTRE MARQUE]" — [UNE PHRASE POUR DECRIRE VOTRE PRODUIT]. Fondateur / fondatrice: [VOTRE NOM]. Promesse: [LA PROMESSE PRINCIPALE]. Public cible: [QUI S'EN SERT]. Toute la copie en [LANGUE]. Sections dans cet ordre precis: 1. Navigation sticky: logo, liens, CTA. 2. Hero: titre principal, sous-titre, visuel placeholder, CTA. 3. Preuves sociales: [NOMBRE] mentions fictives. 4. [VOTRE SECTION PRINCIPALE]. 5. Temoignages: [NOMBRE] cartes avec portrait placeholder, prenom, citation. 6. "Qui est [VOTRE NOM]": portrait + 3 paragraphes. 7. Tarifs: [NOMBRE] offres, offre du milieu en avant. 8. FAQ accordeon: [NOMBRE] questions. 9. CTA final. 10. Pied de page. Direction artistique: - Palette: [COULEUR PRINCIPALE] + [COULEUR ACCENT] + fond [COULEUR FOND]. - Typographie: [NOM DE POLICE] via Google Fonts. - Moderne, editorial, premium. Responsive jusqu'à 360px. - Scroll fluide, accordeon fonctionnel, hover sur boutons et cartes. Images: SVG ou degrades CSS uniquement. Interdictions: - Pas de tirets cadratins ou demi-cadratins. - Rien d'externe sauf Google Fonts. Avant de coder, propose-moi d'abord le plan détaillé complet. Ne commence pas à ecrire le code avant ma validation.

📘 Exemple complet rempli : LinguaLibre

Le prompt exact qu'Emile utilise sur scene. À copier si vous voulez reproduire la même démo, ou comme reference pour voir un prompt entièrement rempli.

👀 Voir le site LinguaLibre genere en direct ↗

Crée un site web complet en UN SEUL fichier HTML (HTML + CSS + JavaScript inline, rien d'externe sauf Google Fonts). Affiche-le comme un artefact pour que je puisse le voir en direct. Marque: "LinguaLibre" — un programme de coaching en anglais en ligne pour les professionnels francophones d'Afrique et d'Europe. Fondatrice: Aminata Diallo. Promesse: parler anglais couramment en 90 jours. Toute la copie en français. Sections dans cet ordre precis: 1. Barre de navigation sticky en haut: logo à gauche, liens (Programme, Temoignages, Coach, Tarifs, Contact), bouton CTA "Commencer" a droite. Menu hamburger sous 768px. 2. Hero plein ecran: grand titre "Parlez anglais couramment en 90 jours", sous-titre de 2 lignes, vignette vidéo placeholder a droite avec un bouton play, bouton CTA principal. 3. Bandeau de preuves sociales: 5 mentions de presse fictives en texte (ex: "Vu dans Jeune Afrique", "Cite par RFI"). 4. Grille 3 colonnes presentant la methode: immersion, coaching prive, communaute. Chaque colonne: icône SVG, titre, 2 phrases. 5. Temoignages: grille responsive de 6 cartes style vidéo, chaque carte avec un portrait placeholder (degrade colore), prenom, emoji drapeau pays, citation courte. 6. Section "Qui est Aminata": grand portrait placeholder à gauche, son histoire à droite en 3 paragraphes courts et une citation mise en valeur. 7. Tarifs: 3 offres (Essentiel, Pro, Immersion Totale) avec prix en euros, 4 à 6 points chacune, offre du milieu mise en avant avec badge "Le plus populaire". 8. FAQ avec accordeon: 6 questions, clic pour deplier. 9. CTA final: titre fort, bouton. 10. Pied de page: liens de navigation, icônes réseaux sociaux en SVG, copyright. Direction artistique: - Palette: bleu marine profond (#0B2545) en couleur principale, or chaud (#F4B942) en accent, fond blanc, texte gris fonce. - Typographie: Poppins via Google Fonts, gras pour les titres. - Style moderne, editorial, premium. Beaucoup d'espace blanc. Coins arrondis sur les cartes et boutons. Ombres subtiles. - Entièrement responsive jusqu'à 360px de large. - Scroll fluide sur les liens d'ancre. Accordeon FAQ fonctionnel. Effets hover sur tous les boutons et cartes. Images: uniquement des SVG ou degrades CSS comme placeholders, jamais d'URL externe. Rends-les elegants, pas brises. Interdictions: - Pas de tirets cadratins ou demi-cadratins (— –). Utilise virgules, points ou deux-points. - Rien d'externe sauf Google Fonts Poppins. Tout doit tenir dans UN fichier artefact HTML unique et fonctionner tout de suite.

Astuce : en mode Code, Claude va tout de même créer le fichier index.html dans votre dossier local. Le mot "artefact" oriente Claude vers un livrable unique et autonome, facile à déployer ensuite sur GitHub Pages.

Étape 5. Valider le plan

Claude propose un plan dans la fenetre de chat. Lisez-le. Demandez des ajustements si necessaire. Quand c'est bon, desactivez Plan mode (même bouton en bas à gauche), puis dites à Claude :

Parfait, le plan me va. Construis le site maintenant dans mon dossier monsite.

Étape 6. Laisser Claude construire

Claude crée les fichiers index.html, styles.css, script.js directement dans votre dossier. Vous pouvez les ouvrir dans Finder / Explorateur pendant qu'il travaille, vous les voyez apparaitre en direct.

Étape 7. Valider le site (la vraie checklist)

Double-cliquez sur index.html dans votre dossier : le site s'ouvre dans votre navigateur. Contrairement à l'artefact de l'Option 1, ici vous avez un vrai projet multi-fichiers. Passez en revue chaque categorie.

Contenu

Le titre principal est clair et accrocheur
Chaque section à un but evident
Aucun texte "Lorem ipsum" oublie
Les prix et informations sont exacts

Design

Les couleurs correspondent à ma marque
Le texte est lisible, bon contraste
Images et icônes s'affichent correctement
L'espacement est aere

Mobile (testez vraiment sur votre téléphone)

Tout est lisible sur un ecran de téléphone
Les boutons sont assez grands pour le doigt (44px minimum)
Aucune image ne deborde
Le menu hamburger fonctionne

Pour une validation automatique plus poussée, demandez à Claude :

Fais une auto-validation du site : verifie que le HTML est valide, que tous les liens fonctionnent, que le CSS n'à pas d'erreurs, que le site est bien responsive. Liste chaque problème trouve avec la ligne exacte à corriger.

Étape 8. Iterer avec Plan Mode pour les gros changements

Pour un petit ajustement : demandez directement ("change la couleur du bouton en or"). Pour un changement structurel (nouvelle section complete, refonte de la navigation) : reactivez Plan mode en bas à gauche, faites proposer un plan, validez, desactivez, puis laissez executer. C'est la methode pro.

Étape 9. Publier sur GitHub Pages

Suivez la section "Publier votre site" plus bas. L'app Claude peut vous guider pas à pas :

Guide-moi étape par étape, avec les boutons exacts à cliquer, pour : 1. Créer un compte GitHub si je n'en ai pas 2. Créer un nouveau depot public nomme mon-site 3. Uploader mon fichier index.html 4. Activer GitHub Pages dans les parametres 5. Trouver et copier mon URL publique finale Je suis débutant total, je n'ai jamais utilise GitHub. Sois très precis.

Publier votre site

Mettre votre site en ligne avec GitHub Pages (gratuit, pour toujours)

GitHub Pages heberge votre site gratuitement, à vie. Pas de carte bancaire, pas de limite de temps. Tout se passe dans le navigateur, aucun outil à installer.

Étape 1. Créer un compte GitHub (si vous n'en avez pas)

1

Inscription gratuite

Allez sur github.com/signup. Créez un compte avec votre email. Choisissez un nom d'utilisateur court et professionnel, il apparaitra dans votre URL publique.

Étape 2. Créer un nouveau depot (repository)

1

Ouvrir le formulaire de creation

Allez sur github.com/new.

2

Remplir les champs

Nom du depot : quelque chose de court comme mon-site. Cochez Public (obligatoire pour GitHub Pages gratuit). Cochez Add à README file. Cliquez Create repository.

Étape 3. Ajouter votre fichier HTML

1

Uploader le fichier

Sur la page du depot, cliquez Add file (en haut à droite de la liste de fichiers) puis Upload files.

2

Deposer votre index.html

Glissez-deposez votre fichier. Important : il DOIT s'appeler index.html (en minuscules, sans accent). Si votre fichier à un autre nom, renommez-le avant.

3

Valider

Descendez en bas de page, cliquez Commit changes.

Si vous avez déjà uploade un fichier avec un mauvais nom : cliquez dessus, cliquez sur l'icône crayon (en haut à droite du fichier), renommez en index.html, validez.

Étape 4. Activer GitHub Pages

1

Ouvrir les parametres

Dans votre depot, cliquez sur l'onglet Settings (tout en haut à droite, à côté de Insights).

2

Aller dans Pages

Dans le menu de gauche, cliquez sur Pages.

3

Configurer la source

Sous "Build and deployment" → "Source", laissez Deploy from à branch. Sous "Branch", selectionnez main et le dossier / (root). Cliquez Save.

Étape 5. Trouver votre lien public (c'est ici que ca devient magique)

1

Attendre 60 à 90 secondes

GitHub construit votre site. Allez prendre un verre d'eau, ne fermez pas la page.

2

Rafraichir la page Pages

Rafraichissez la page Settings → Pages. Un encadre vert apparait tout en haut avec le message : "Your site is live at...", suivi de votre URL.

3

Copier et partager votre URL

Le lien ressemble a : https://VOTRE-NOM.github.io/mon-site/. Cliquez sur le lien pour tester, puis cliquez sur l'icône copier à côté pour le partager partout (WhatsApp, LinkedIn, email, carte de visite).

Astuce visuelle : vous pouvez aussi voir votre lien directement sur la page d'accueil du depot. Regardez à droite, sous "About", GitHub affiche un lien globe 🌐 vers votre site une fois Pages active.

Étape 6. Modifier votre site plus tard

Pas besoin de refaire toutes les étapes. Pour chaque mise à jour :

1

Ouvrir le fichier sur GitHub

Dans votre depot, cliquez sur index.html.

2

Editer ou remplacer

Cliquez sur l'icône crayon pour editer directement, ou cliquez sur l'icône corbeille pour supprimer puis uploadez une nouvelle version.

3

Commit et attendre

Validez. GitHub redeploie automatiquement en 30 secondes. Rafraichissez votre URL publique.

Bonus pro : connectez un nom de domaine personnalise (comme monsite.com) gratuitement via Settings → Pages → Custom domain. Votre registraire (OVH, GoDaddy, Namecheap) vous dira quoi pointer. Demandez à Claude : "Guide-moi pour connecter mon domaine monsite.com à GitHub Pages."

Le prompt maitre à garder pour toujours

Copiez-le dans vos notes. Changez les crochets. Reutilisez-le pour chaque nouveau projet. Il marche pour les deux options.

Je veux construire un site web d'une page pour [PROJET]. Public : [CIBLE]. Objectif : [ACTION SOUHAITEE]. ETAPE 1 : Propose-moi un plan détaillé (sections, messages, palette, typographie). Ne code rien avant ma validation. ETAPE 2 : Après validation, construis le site complet. - Option Claude (app) : UN SEUL fichier HTML, tout inline, Google Fonts autorise, affiche en artefact. - Option Claude Code : structure propre (index.html, styles.css, script.js), lance un serveur local. ETAPE 3 : Assure-toi que le site est parfaitement responsive et utilisable sur téléphone (boutons minimum 44px, texte lisible, pas de debordement). ETAPE 4 : Fais une auto-validation : liste les points OK et les points à corriger. Pas de tirets cadratins (— ou –). Utilise virgules, points ou deux-points.

Les 3 règles d'or

01

Planifier avant de coder

Toujours. Un bon plan evite trois mauvais builds.

02

Un changement à la fois

Dire "change tout" donne du chaos. Dire "change la couleur du bouton" donne un résultat precis.

03

Tester sur téléphone

La moitie de vos visiteurs seront sur mobile. Si ca ne marche pas sur téléphone, ca ne marche pas.

Choisissez votre chemin

Claude (l'application)

Claude pour Mac / Windows (mode Code)