Tu as déjà demandé à Claude « crée-moi une landing page pour mon SaaS » et récupéré du Tailwind propre, bien aligné, mais totalement interchangeable avec n'importe quelle autre page SaaS du web. Le hero disait « Transform your workflow with AI-powered insights ». Les features étaient trois cartes avec des icônes Lucide. Le CTA s'appelait « Get Started ». Tu as fermé l'onglet.
Le problème n'est pas Claude. Le problème est le brief. Une landing qui convertit vient d'un cahier des charges structuré en six blocs d'information, pas d'une demande vague. Dans cet article, je te donne le brief exact, la structure de page que je réutilise, les prompts de copywriting qui transforment du générique en spécifique, et comment déployer sur Vercel en deux minutes. Si tu veux la vue d'ensemble du cocon site web, va voir le guide pour apprendre Claude de zéro, sinon on attaque.
Pourquoi la plupart des landings générées par Claude sont médiocres
Prends le prompt « crée une landing page pour mon outil de gestion de projet ». Claude ne sait rien. Il ne sait pas si ta cible est un freelance qui facture 400 €/jour ou une équipe de 50 personnes chez un grand compte. Il ne sait pas si ton prix est 9 € ou 290 € par mois. Il ne sait pas quelles trois objections tu entends en call de vente chaque semaine. Il remplit les blancs avec la moyenne statistique de ce qu'il a vu passer : du copy SaaS neutre, du Tailwind standard, trois features génériques, un hero sans tension.
Compare deux hero sur la même offre fictive, une formation Notion pour consultants freelances à 390 €.
Version faible : « Maîtrisez Notion et transformez votre productivité ». Version travaillée : « Ton système Notion de consultant freelance, prêt en un week-end. 5 modèles, 390 €, pas de cours de 40 heures à regarder ». La deuxième phrase sort du même modèle. Elle est juste nourrie par un brief qui dit qui, quoi, combien, et contre quoi on se positionne.
Le brief à donner à Claude avant d'écrire une ligne de code
Avant de parler layout, remplis six blocs. C'est le seul prérequis non négociable.
- Offre précise : nom, format, prix exact, ce qui est livré, le délai.
- ICP : qui précisément, sa situation actuelle, la douleur qu'il vit cette semaine, pas « les PME » mais « un consultant freelance qui facture entre 400 et 800 €/jour, 2 à 5 clients actifs, pas d'outil de gestion ».
- Promesse en une phrase : résultat concret + délai + sans friction. « Un portfolio en ligne en un week-end, sans toucher au code ».
- Trois objections principales : celles que tu entends en vrai. Pas « c'est cher », plutôt « j'ai pas le temps de regarder 40 heures de vidéos » ou « j'ai déjà essayé Notion, j'ai abandonné au bout de deux semaines ».
- Preuves : nombre d'apprenants réels, témoignages avec prénom et métier, logos de boîtes, chiffres vérifiables.
- Un seul appel à l'action : « Réserver un call de 15 minutes », ou « Rejoindre la prochaine cohorte ». Pas trois CTA différents qui dispersent le trafic.
Copie ce template dans un fichier brief.md, remplis-le, puis colle-le dans Claude avant tout le reste. Tant que ces six blocs ne sont pas écrits, tu produis du Tailwind interchangeable. Pour la méthodologie plus large de créer un site web avec Claude, le pilier parent détaille les variantes selon le type de projet.
La structure qui convertit, générée section par section
La structure que je réutilise fait sept blocs. Hero (promesse, sous-promesse, CTA), problème/agitation, solution, preuves sociales, bénéfices (pas features), objections traitées, CTA final. Rien d'original. Ce qui compte, c'est de ne pas tout demander d'un coup.
Si tu dis à Claude « génère la page complète », tu récupères sept sections tièdes. Si tu dis « génère uniquement le hero avec cette promesse, trois variantes de sous-titre, et un CTA qui dit X », tu peux juger, couper, relancer. Section par section. C'est plus long en apparence, plus court en pratique parce que tu n'as pas à tout réécrire derrière.
| Section | Ce que Claude doit produire | Longueur cible |
|---|---|---|
| Hero | Promesse + sous-promesse + CTA | 3 lignes max |
| Problème | La situation vécue, en 2 paragraphes concrets | 80 mots |
| Solution | Comment ton offre règle le problème, sans détailler les features | 100 mots |
| Preuves | 3 témoignages ou chiffres, avec attribution | Varie |
| Bénéfices | 4 à 6 blocs, bénéfice en titre, feature en support | 30 mots par bloc |
| Objections | 3 objections, réponse en 2 phrases chacune | 50 mots par objection |
| CTA final | Rappel promesse + action unique | 2 lignes |
Prompts de copywriting qui changent la sortie
Trois prompts font l'essentiel du travail.
Prompt 1, le hero : « À partir du brief ci-dessus, écris 5 variantes de titre pour le hero. Chaque variante doit suivre la formule résultat concret + délai + ce qu'on supprime comme friction. Après les 5 variantes, classe-les de la plus claire à la moins claire, et explique en une phrase pourquoi la première gagne. »
Tu obtiens cinq propositions au lieu d'une, et le classement te force à expliciter un critère (clarté). Tu peux ensuite dire « réécris la variante 3 en coupant 4 mots » et itérer.
Prompt 2, les objections : « Pour chacune des 3 objections du brief, écris la réponse en 2 phrases maximum. Première phrase : reconnaître la préoccupation. Deuxième phrase : la réponse concrète avec un chiffre ou un fait vérifiable. Pas de 'ne vous inquiétez pas', pas de 'rassurez-vous'. »
Prompt 3, couper : une fois le copy généré, « relis la section bénéfices. Supprime toute phrase qui pourrait apparaître sur la landing d'un concurrent. Garde uniquement ce qui est spécifique à cette offre. » Ce prompt-là seul raccourcit souvent nettement la page, et ce qui reste est meilleur.
Générer le code : artefact ou Claude Code ?
Deux chemins selon ce que tu veux faire.
Artefact dans Claude.ai : tu colles le brief + le copy validé, tu demandes « génère une landing React + Tailwind complète, visualisable en artefact, utilise shadcn/ui pour les composants ». Tu vois le résultat en direct, tu itères dans la conversation. Parfait pour un prototype à montrer à un prospect en 20 minutes. Limite : tu ne peux pas déployer directement l'artefact, et le code vit dans la conversation.
Claude Code : pour un projet maintenable, versionné, déployable. Tu ouvres un dossier, tu lances Claude Code, et tu demandes « initialise un projet Next.js 14 avec App Router, Tailwind, shadcn/ui, structure la landing en sections de composants séparés dans components/sections/ ». Chaque section devient un composant. Tu peux itérer sur Hero.tsx sans toucher au reste. Pour creuser l'outil, va voir la page outil Claude Code.
claude code
> Initialise un projet Next.js 14 App Router avec Tailwind et shadcn/ui.
> Structure la landing en 7 composants dans components/sections/ :
> Hero, Problem, Solution, Proof, Benefits, Objections, FinalCTA.
> Chaque composant exporte en nommé. app/page.tsx les assemble.
> Utilise le copy du fichier brief.md pour remplir chaque section.Les stacks que Claude maîtrise bien aujourd'hui : Next.js, Tailwind, shadcn/ui, Framer Motion pour les animations légères. Les pièges habituels : composants shadcn qu'il invente, imports qui pointent sur rien, versions de dépendances incompatibles. Quand ça casse, ne redemande pas « corrige » tout seul. Pointe la ligne : « L'erreur dit que @/components/ui/sparkle n'existe pas. Soit tu l'ajoutes, soit tu utilises un composant qui existe déjà. »
Itérer sans tout casser
La règle qui change tout : coller le code existant dans le prompt, pointer la section, décrire le changement. « Garde la structure et la palette. Dans Hero.tsx, remplace le CTA par un bouton pleine largeur sur mobile. Ne touche à rien d'autre. »
Claude peut aussi lire une capture d'écran. Si tu as repéré une landing dont tu aimes la mise en page du hero, prends la capture, colle-la, dis « inspire-toi de cette structure pour le hero de ma landing, mais garde mon copy et mes couleurs ». Pour aller plus loin sur ce workflow, la partie design du cocon détaille comment travailler les wireframes et les captures.
Déployer et mesurer
Push sur GitHub depuis la racine du projet, connecte le dépôt à Vercel, premier déploiement en moins de deux minutes. Le détail de la stack est dans la page Vercel + Next.js.
Une fois en ligne, ajoute Plausible ou Vercel Analytics. Un seul événement à tracker au départ : le clic sur le CTA principal. Pas dix événements, un seul. Sans mesure, tu ne sauras jamais si ta landing convertit ou si tu regardes un joli design mort.
Ordre de grandeur réaliste pour une landing B2B SaaS avec du trafic qualifié (LinkedIn, newsletter, référence directe) : 2 à 5 % de conversion visiteur vers lead qualifié. En dessous de 1 %, le problème est probablement dans le hero ou dans le match offre/audience, pas dans la couleur du bouton.
Exemple complet : formation Notion pour consultants freelances, 390 €
Brief rempli : offre = 5 modèles Notion + 2 h de vidéo, 390 € en une fois. ICP = consultant freelance, 400-800 €/jour, 2-5 clients actifs. Promesse = ton système Notion de consultant, prêt en un week-end. Objections = « j'ai pas le temps », « j'ai déjà essayé », « 390 € pour des modèles ? ». Preuves = 180 apprenants, 3 témoignages avec prénom et métier. CTA = « Rejoindre la prochaine cohorte ».
Prompt hero : « Écris 5 variantes de titre pour cette offre. Résultat + délai + friction supprimée. » Sortie retenue : « Ton système Notion de consultant freelance, prêt en un week-end ». Sous-titre : « 5 modèles, 390 €, zéro cours de 40 heures à regarder ».
Prompt objection prix : « Réponse en 2 phrases à l'objection 390 € pour des modèles. Reconnais, puis réponds avec un fait. » Sortie : « 390 € pour des modèles paraît élevé si tu les compares à des templates gratuits. Si tu les compares à une journée de ton temps à construire le même système toi-même, ça te coûte moins que ta demi-journée moyenne. »
Génération du code : prompt Claude Code ci-dessus, trois itérations pour ajuster le hero (padding mobile, taille de titre, position du CTA), déploiement Vercel. Ligne droite, deux heures de travail actif, lead magnet connecté à ConvertKit.
Et maintenant
Tu as le brief, la structure, les prompts, le code, le déploiement. Le reste, c'est de la répétition. Chaque landing que tu refais avec cette méthode te prend moins de temps que la précédente, et converti mieux parce que tu commences à sentir quelles promesses tiennent et lesquelles sonnent creux. Si tu veux structurer tout ça avec des cas concrets et un livrable par semaine (dont une landing déployée), c'est exactement le format de Claude Mastery, pour maîtriser Claude au quotidien en cinq semaines.