Créez une landing HTML avec Claude ou ChatGPT

Étape 1 — Étude de marché et buyer persona

Avant le copy, faites comprendre à l'IA à qui vous parlez et pourquoi elle achète. Collez ce prompt (remplissez produit et pays) :

Tu es un expert en marketing de réponse directe. Je dois vendre [PRODUIT] en [PAYS], en paiement à la livraison (COD).
Donne-moi, de façon concise :
1. Buyer persona : qui il est, âge, problème principal, ce qu'il craint, ce qu'il désire
2. Les 3-5 "pain points" les plus forts sur lesquels s'appuyer
3. L'angle de vente le plus efficace pour du trafic froid depuis Facebook/TikTok
4. Le ton de voix adapté à cette audience
5. 5 titres candidats

Gardez la réponse de côté : vous la passerez à Claude à l'Étape 3.

Étape 2 — Choisissez le format : advertorial ou sales page

• Advertorial — ressemble à un article ou une histoire ("J'ai essayé X pendant 30 jours et..."). Vend en douceur : idéal pour du trafic froid qui ne vous connaît pas encore.
• Sales page — page de vente directe : problème → solution → produit → offre → CTA. Convient pour une audience plus chaude ou des offres simples et d'impulsion.

💡 En cas de doute, pour du COD à froid, partez de l'advertorial : il convertit mieux avec ceux qui arrivent des réseaux sociaux.

Étape 3 — Faites écrire le HTML par Claude

C'est le prompt central. Collez-le à Claude avec l'étude de l'Étape 1 :

Tu es un copywriter direct-response et développeur front-end. Crée une landing page dans UN SEUL fichier index.html pour vendre [PRODUIT] en [PAYS], paiement à la livraison.

Utilise cette étude :
[COLLE ICI LA RÉPONSE DE L'ÉTAPE 1]

Exigences :
- Format : [advertorial / sales page]
- Langue : [langue du pays]
- Mobile-first, tout le CSS dans le fichier (pas de librairies externes), page rapide et légère.
- Structure : accroche, problème, solution, bénéfices et preuves, avis, offre claire, FAQ, et plusieurs points de CTA.
- Pour les images, utilise des chemins relatifs du type images/img_01_hero.jpg, images/img_02_produit.jpg, etc. À la fin, liste les images nécessaires avec une courte description de chacune (je m'en servirai pour les générer).
- Aux points CTA / formulaire de commande, insère EXACTEMENT ce placeholder (plusieurs fois si besoin) : <div class="lp-form-container"></div>  — ne construis PAS de formulaire à la main.
- Juste avant </body>, insère ce bloc, en laissant les valeurs telles quelles :
  <script>
    window.RoyLeadConfig = {
      captureUrl: "https://capture.roylead.com",
      apiKey: "VOTRE_API_KEY",
      landingPageId: "ID_DE_VOTRE_LANDING",
      thankYouPage: "https://votredomaine.com/merci.html"
    };
  </script>
  <script src="https://capture.roylead.com/tracker.js"></script>
- Donne-moi le fichier index.html complet, prêt à enregistrer.

💡 Claude vous rend le fichier et la liste des images à créer. Créez un nouveau dossier sur votre PC et enregistrez-y le fichier sous index.html.

Étape 4 — Créez les images avec ChatGPT

Prenez la liste d'images que Claude vous a donnée et faites-les générer par ChatGPT, une par une :

Génère une image : [description prise de la liste de Claude]. Style photographique réaliste, adapté à une landing de vente pour [PRODUIT]. Format vertical, pensé pour mobile.

• Téléchargez chaque image et renommez-la exactement comme dans le fichier (ex. img_01_hero.jpg).
• Mettez-les toutes dans un sous-dossier images/ à l'intérieur du dossier de la landing.

⚠️ Utilisez vos vraies photos pour le produit. ChatGPT convient pour le hero, les fonds, les illustrations. Pas de faux témoignages ni de fausses allégations : en plus d'être incorrect, ça fait bloquer les campagnes.

Étape 5 — Vérifiez le dossier

À la fin, vous devriez avoir :

• index.html
• le dossier images/ avec toutes les images, avec les bons noms
• le <div class="lp-form-container"></div> là où vous voulez le formulaire
• le bloc RoyLead Tracker juste avant </body>

Ouvrez index.html par double-clic : la page doit s'afficher, les images doivent se charger, et il doit y avoir de la place pour le formulaire.

💡 Vous voulez changer quelque chose (un texte, l'ordre des sections, une couleur) ? Dites à Claude ce qu'il faut modifier et faites-vous rendre le fichier mis à jour.

Et maintenant ? Publiez la landing

Le dossier est prêt. Mettez-le en ligne sur votre domaine et connectez le tracker (c'est là que vous saisirez VOTRE_API_KEY et ID_DE_VOTRE_LANDING) :

Publier une landing HTML sur Cloudflare Workers ↗