Code HTML pour site web
À l'issue de cette leçon, le stagiaire est capable de générer une landing page complète via Claude, de la publier via le bouton Publish, et de connaître ses limites pour décider quand passer à un hébergement contrôlé (Netlify, Vercel).
Du prompt à la page publiable
Une landing page — page d'accueil simple destinée à présenter une activité, capturer des leads, ou tester un message — est l'un des artefacts les plus utiles à savoir générer. Quinze minutes suffisent pour passer de l'intention à une page publiable, sans écrire une ligne de code. C'est l'un des gains de productivité les plus visibles que Claude apporte à un professionnel non-développeur.
La méthode tient en trois étapes : structurer la demande selon les blocs incontournables d'une landing, demander la génération à Claude en mode artefact, itérer pour ajuster avant publication. Le résultat est une URL publique partageable, hébergée gratuitement par Anthropic.
Cinq blocs incontournables
Une landing efficace ne se résume pas à un beau visuel. Cinq blocs structurent toute landing professionnelle, et leur ordre est important :
1. Hero — l'accroche
Titre clair (8 mots maximum), sous-titre explicatif (15 mots maximum), un CTA visible. Le visiteur doit comprendre l'offre en 3 secondes. Sans hero clair, le reste ne sert à rien.
2. Valeur — trois bénéfices clés
Trois bénéfices, pas dix. Format icône + titre court + une phrase. Le visiteur scanne, il ne lit pas. Plus de trois bénéfices = aucun bénéfice retenu.
3. Preuve — témoignages ou logos
Témoignages clients (3 maximum), logos d'entreprises connues, chiffres-clés (« 500 clients formés », « 12 ans d'expérience »). Sans preuve, l'argumentaire reste théorique.
4. FAQ — répondre aux objections
Cinq à sept questions que se pose le prospect avant d'agir (prix, durée, prérequis, garantie, processus). Désamorce les freins avant qu'ils ne deviennent des abandons.
5. CTA final — une seule action
Un seul appel à l'action, pas trois. Contraste fort, message clair (« Réserver un appel », « Demander un devis »). Plusieurs CTAs diluent la décision.
Une landing professionnelle propose une seule action principale, répétée trois à cinq fois dans la page (hero, après la preuve, en FAQ, en final). Pas trois actions différentes. C'est l'erreur la plus fréquente des débutants.
Le prompt complet pour générer la landing
Voici la structure de prompt qui fonctionne bien dans la majorité des cas. Adaptez les contenus à votre activité, gardez la structure.
Contexte : Je suis [métier]. Je vise [public cible]. Mon offre : [description en une phrase]. Consigne : Génère une landing page complète en HTML / CSS (une seule page, tout en inline). Structure obligatoire : 1. Hero : titre « [titre] », sous-titre « [sous-titre] », bouton « [action principale] » 2. Valeur : 3 bénéfices avec icône, titre, une phrase 3. Preuve : 3 témoignages clients (génère du faux si besoin) 4. FAQ : 5 questions / réponses 5. CTA final répété Données : Charte visuelle : couleur dominante [#XXXXXX], police titre [Georgia ou autre], police corps [Inter ou autre]. Ton : [formel / neutre / chaleureux]. Format : Une seule page HTML autonome (CSS inline, aucun script externe). Responsive mobile. Pas de framework JavaScript. Prête à publier via Publish.
Publier et tester
Une fois la landing générée dans le panneau d'artefact, tester l'interactivité dans le panneau avant publication. Cliquer sur les boutons, vérifier le défilement, redimensionner la fenêtre pour voir le rendu mobile.
Itérer pour ajuster : « Rends les boutons plus contrastés », « Plus d'espace entre les sections », « Vérifie le rendu sur écran 375 px ». Trois à cinq itérations courtes suffisent pour atteindre un résultat publiable.
Avant le clic sur Publish, vérifier qu'aucune donnée sensible n'apparaît dans le code ou le contenu : noms de clients réels, chiffres confidentiels, adresses personnelles. La page sera publique.
Cliquer sur Publish. Claude génère un lien au format
claude.site/p/abc123. Le lien est immédiatement actif, sans configuration. Le partager par mail, sur LinkedIn, par SMS — c'est une URL classique.Tester le lien depuis un navigateur en mode privé (sans être connecté à Claude) pour confirmer qu'il fonctionne pour un tiers. Tester aussi depuis un mobile pour vérifier le responsive.
Limites de Publish — quand passer à un hébergement contrôlé
Le bouton Publish est conçu pour un partage rapide, sans contrainte technique. Il a trois limites importantes à connaître :
Pas de domaine personnalisé
L'URL reste en claude.site/p/…. Pour formation.cabinet-pedetti.fr, il faut télécharger le HTML et l'héberger ailleurs.
Pas de base de données
Les formulaires de Publish n'enregistrent pas les réponses en base. Si vous voulez collecter des leads, il faut un service tiers (Tally, Typeform, Airtable) ou un vrai hébergement.
Pas d'authentification
Le lien est public, accessible à toute personne qui le connaît. Pour une zone privée (espace adhérent, contenu payant), il faut un hébergement avec gestion des accès.
L'alternative pro
Pour ces cas, télécharger le HTML via Download et l'héberger sur Netlify (gratuit) ou Vercel (gratuit) avec domaine personnalisé. Configuration en 10 minutes pour un résultat professionnel.
Générer et publier votre propre landing
Générez une mini-landing page d'une seule section qui présente votre activité (vous-même, votre cabinet, ou un service spécifique). Hero avec accroche, trois points-clés, formulaire de contact factice. Testez le bouton Publish. Partagez le lien à un proche pour avoir un avis extérieur. Notez ce qui pourrait être amélioré avant un usage professionnel.
Cet exercice est à conserver dans votre dossier de stagiaire. Il n'est pas évalué mais il est tracé.
- support.claude.com — Publishing artifacts guide officiel du bouton Publish et de claude.site
- netlify.com hébergement gratuit avec domaine personnalisé pour landing téléchargée
- vercel.com alternative Netlify, gratuite pour les usages standards
Vous savez générer, itérer et publier une landing page complète, et identifier quand passer à un hébergement contrôlé ?