Crea una landing HTML con Claude o ChatGPT

Ricerca di mercato e buyer persona

Prima del copy, fai capire all'AI a chi parli e perché si compra. Incolla questo prompt (riempi prodotto e paese):

Sei un esperto di direct response marketing. Devo vendere [PRODOTTO] in [PAESE], con pagamento alla consegna (COD).
Dammi, in modo conciso:
1. Buyer persona: chi è, età, problema principale, cosa teme, cosa desidera
2. I 3-5 "pain point" più forti su cui far leva
3. L'angolo di vendita (angle) più efficace per traffico freddo da Facebook/TikTok
4. Il tono di voce giusto per questo pubblico
5. 5 headline candidate

Tieni da parte la risposta: la passi a Claude nello Step 3.

Scegli il formato: advertorial o sales page

• Advertorial — sembra un articolo o una storia ("Ho provato X per 30 giorni e..."). Vende in modo morbido: ottimo per traffico freddo che non ti conosce ancora.
• Sales page — pagina di vendita diretta: problema → soluzione → prodotto → offerta → CTA. Va bene per pubblico più caldo o offerte semplici e d'impulso.

💡 Nel dubbio, per il COD a freddo parti dall'advertorial: converte meglio su chi arriva dai social.

Fai scrivere l'HTML a Claude

È il prompt centrale. Incollalo a Claude insieme alla ricerca dello Step 1:

Sei un copywriter direct-response e sviluppatore front-end. Crea una landing page in UN SINGOLO file index.html per vendere [PRODOTTO] in [PAESE], pagamento alla consegna.

Usa questa ricerca:
[INCOLLA QUI LA RISPOSTA DELLO STEP 1]

Requisiti:
- Formato: [advertorial / sales page]
- Lingua: [lingua del paese]
- Mobile-first, tutto il CSS dentro il file (niente librerie esterne), pagina veloce e leggera.
- Struttura: hook, problema, soluzione, benefici e prove, recensioni, offerta chiara, FAQ, e più punti di CTA.
- Per le immagini usa percorsi relativi tipo images/img_01_hero.jpg, images/img_02_prodotto.jpg, ecc. Alla fine elenca le immagini che servono, con una breve descrizione di ognuna (mi servirà per generarle).
- Nei punti con la CTA / il modulo d'ordine inserisci ESATTAMENTE questo segnaposto (anche più volte): <div class="lp-form-container"></div>  — NON creare un form a mano.
- Subito prima di </body> inserisci questo blocco, lasciando i valori così come sono:
  <script>
    window.RoyLeadConfig = {
      captureUrl: "https://capture.roylead.com",
      apiKey: "LA_TUA_API_KEY",
      landingPageId: "ID_DELLA_TUA_LANDING",
      thankYouPage: "https://tuodominio.com/grazie.html"
    };
  </script>
  <script src="https://capture.roylead.com/tracker.js"></script>
- Dammi il file index.html completo, pronto da salvare.

💡 Claude ti restituisce il file e la lista delle immagini da creare. Crea una cartella nuova sul PC e salvaci dentro il file come index.html.

Crea le immagini con ChatGPT

Prendi la lista immagini che Claude ti ha dato e falle generare a ChatGPT, una alla volta:

Genera un'immagine: [descrizione presa dalla lista di Claude]. Stile fotografico realistico, adatta a una landing di vendita per [PRODOTTO]. Formato verticale, pensato per mobile.

• Scarica ogni immagine e rinominala esattamente come nel file (es. img_01_hero.jpg).
• Mettile tutte in una sottocartella images/ dentro la cartella della landing.

⚠️ Usa le tue foto reali per il prodotto. ChatGPT va bene per hero, sfondi, illustrazioni. Niente testimonial finti o claim non veri: oltre a essere scorretto, fa bloccare le campagne.

Controlla la cartella

Alla fine devi avere:

• index.html
• la cartella images/ con tutte le immagini, coi nomi giusti
• il <div class="lp-form-container"></div> dove vuoi il form
• il blocco RoyLead Tracker subito prima di </body>

Apri index.html con doppio clic: la pagina deve vedersi, le immagini caricarsi, e dev'esserci lo spazio del form.

💡 Vuoi cambiare qualcosa (un testo, l'ordine delle sezioni, un colore)? Riscrivi a Claude cosa modificare e fatti ridare il file aggiornato.