Crea una landing HTML con Claude o ChatGPT

Paso 1 — Investigación de mercado y buyer persona

Antes del copy, haz que la IA entienda a quién le hablas y por qué compra. Pega este prompt (rellena producto y país):

Eres un experto en marketing de respuesta directa. Necesito vender [PRODUCTO] en [PAÍS], con pago contra reembolso (COD).
Dame, de forma concisa:
1. Buyer persona: quién es, edad, problema principal, qué teme, qué desea
2. Los 3-5 "pain points" más fuertes sobre los que apoyarse
3. El ángulo de venta más efectivo para tráfico frío desde Facebook/TikTok
4. El tono de voz adecuado para esta audiencia
5. 5 titulares candidatos

Guarda la respuesta aparte: se la pasarás a Claude en el Paso 3.

Paso 2 — Elige el formato: advertorial o sales page

• Advertorial — parece un artículo o una historia ("Probé X durante 30 días y..."). Vende de forma suave: ideal para tráfico frío que aún no te conoce.
• Sales page — página de venta directa: problema → solución → producto → oferta → CTA. Va bien para audiencia más cálida u ofertas simples de impulso.

💡 En caso de duda, para COD en frío empieza con el advertorial: convierte mejor con quien llega de redes sociales.

Paso 3 — Haz que Claude escriba el HTML

Este es el prompt central. Pégaselo a Claude junto con la investigación del Paso 1:

Eres un copywriter de direct-response y desarrollador front-end. Crea una landing page en UN ÚNICO archivo index.html para vender [PRODUCTO] en [PAÍS], pago contra reembolso.

Usa esta investigación:
[PEGA AQUÍ LA RESPUESTA DEL PASO 1]

Requisitos:
- Formato: [advertorial / sales page]
- Idioma: [idioma del país]
- Mobile-first, todo el CSS dentro del archivo (sin librerías externas), página rápida y ligera.
- Estructura: hook, problema, solución, beneficios y pruebas, reseñas, oferta clara, FAQ, y varios puntos de CTA.
- Para las imágenes usa rutas relativas tipo images/img_01_hero.jpg, images/img_02_producto.jpg, etc. Al final, lista las imágenes necesarias con una breve descripción de cada una (la usaré para generarlas).
- En los puntos de CTA / formulario de pedido inserta EXACTAMENTE este placeholder (varias veces si hace falta): <div class="lp-form-container"></div>  — NO construyas un formulario a mano.
- Justo antes de </body> inserta este bloque, dejando los valores tal como están:
  <script>
    window.RoyLeadConfig = {
      captureUrl: "https://capture.roylead.com",
      apiKey: "TU_API_KEY",
      landingPageId: "ID_DE_TU_LANDING",
      thankYouPage: "https://tudominio.com/gracias.html"
    };
  </script>
  <script src="https://capture.roylead.com/tracker.js"></script>
- Dame el archivo index.html completo, listo para guardar.

💡 Claude te devuelve el archivo y la lista de imágenes a crear. Crea una carpeta nueva en tu PC y guarda dentro el archivo como index.html.

Paso 4 — Crea las imágenes con ChatGPT

Toma la lista de imágenes que te dio Claude y haz que ChatGPT las genere, una por una:

Genera una imagen: [descripción tomada de la lista de Claude]. Estilo fotográfico realista, adecuado para una landing de venta de [PRODUCTO]. Formato vertical, pensado para móvil.

• Descarga cada imagen y renómbrala exactamente como en el archivo (p. ej. img_01_hero.jpg).
• Ponlas todas en una subcarpeta images/ dentro de la carpeta de la landing.

⚠️ Usa tus fotos reales para el producto. ChatGPT está bien para el hero, fondos, ilustraciones. Nada de testimonios falsos ni afirmaciones no ciertas: además de ser incorrecto, hace que se bloqueen las campañas.

Paso 5 — Comprueba la carpeta

Al final deberías tener:

• index.html
• la carpeta images/ con todas las imágenes, con los nombres correctos
• el <div class="lp-form-container"></div> donde quieres el formulario
• el bloque RoyLead Tracker justo antes de </body>

Abre index.html con doble click: la página debe verse, las imágenes deben cargarse, y debe haber espacio para el formulario.

💡 ¿Quieres cambiar algo (un texto, el orden de las secciones, un color)? Dile a Claude qué modificar y pídele que te devuelva el archivo actualizado.

¿Y ahora? Publica la landing

La carpeta está lista. Ponla online en tu dominio y conecta el tracker (ahí es donde introducirás TU_API_KEY y ID_DE_TU_LANDING):

Publicar una landing HTML en Cloudflare Workers ↗