Landing en Cloudflare

Crear una LP con Claude Code y Cloudflare Pages

Guía para pasar de "necesito una página" a tener la LP en línea y recibiendo leads. El hosting es Cloudflare Pages: gratuito, rápido, con HTTPS automático y funciones de servidor (Pages Functions) para recibir el formulario sin servidor propio.

La skill sirve para quienes no son desarrolladores. Tú (Claude) haces el trabajo en la terminal y explicas cada paso en lenguaje sencillo. Cuando un paso requiere la intervención de la persona (inicio de sesión, panel, DNS), entrega un comando a la vez, listo para pegar.

El rastreo de anuncios (pixel, Conversions API, GA4, etiquetas de Google Ads) queda fuera de esta skill. Si lo piden, constrúyelo aparte después de que la LP esté en línea.

Cómo trabajar con la persona

• Plan antes de escribir. Muestra las secciones de la LP con el texto de cada una y el origen del texto. Solo construye después del "ok".
• Texto solo de la fuente. Precio, fecha, carga horaria, nombre del profesor, garantía, bonos: todo proviene del material que la persona proporcionó (briefing, sitio web, PDF, conversación). Nunca inventes números ni promesas. Si falta un dato, pregunta.
• Recomienda, no enumeres. Cuando haya una elección (ruta, diseño, dominio), di cuál harías tú y por qué.
• Nada va a producción sin permiso. La previsualización puede hacerse. Publicar en la dirección oficial o cambiar DNS, solo con el "puedes publicar" de la persona.
• Windows: en PowerShell, usa npx.cmd en lugar de npx y comienza cada comando con cd en la ruta absoluta de la carpeta del proyecto.

0. Descubrir el camino

Pregunta (o deduce del pedido) qué necesita la LP. Cada camino suma al anterior:

Camino	Qué entrega	Lee
1. LP simple	Página en línea en <proyecto>.pages.dev, botón que lleva a checkout, WhatsApp u otro sitio	este archivo
2. Dominio propio	lp.sutunombre.com/<slug>/	references/dominio.md
3. Formulario con lead	Formulario que guarda el lead (D1) y lo entrega al CRM mediante webhook, más página de agradecimiento	references/formulario.md

Recolecta también:

• Fuente del texto: briefing, sitio web, PDF, temario, LP antigua.
• Identidad: colores, fuente, logo (archivo), fotos (archivos, con derechos de uso).
• Destino del botón: checkout, WhatsApp (https://wa.me/55DDDNUMERO?text=...) o formulario.
• Slug: corto, en minúsculas, con guión (curso-x, masterclass-y). Se convierte en la ruta de la URL.

1. Preparar la máquina (una sola vez)

Sigue references/cloudflare-setup.md: Node instalado, cuenta Cloudflare, wrangler login (la persona lo hace en el navegador) y creación del proyecto Pages. Verifica con npx wrangler whoami antes de continuar.

2. Montar el proyecto

Una carpeta de proyecto guarda todas las LPs de la marca, una subcarpeta por LP. Un deploy publica todo de una vez.

mis-lps/
  _redirects        (bloqueos y LPs retiradas)
  _headers          (cabeceras de seguridad)
  wrangler.toml     (nombre del proyecto y base de datos)
  schema.sql        (tabla de leads, camino 3)
  CLAUDE.md         (memoria del proyecto: decisiones, qué está en línea)
  functions/
    lead.js         (recibe el formulario, camino 3)
  gracias/
    index.html      (página posterior al formulario, camino 3)
  <slug>/
    index.html      (la LP)
    img/            (fotos y logos optimizados)

Empieza copiando la carpeta modelo/proyecto/ de esta skill al lugar donde la persona quiere el proyecto y renombra mi-lp/ por el slug. El modelo ya viene con formulario, bloqueo de previsualización y bloqueos. Si el proyecto ya existe, solo crea la nueva subcarpeta copiando modelo/proyecto/mi-lp/. LP sin formulario (camino 1): reemplaza el bloque del formulario por botones con el enlace de destino y elimina functions/, gracias/ y schema.sql.

Regla de oro: el deploy publica la carpeta entera. Cualquier archivo allí queda accesible en internet (.claude/, CLAUDE.md, hojas de cálculo, notas). Por eso:

• nunca pongas contraseña, token o URL de webhook en un archivo de la carpeta (el secreto va en wrangler pages secret put, ver references/formulario.md);
• el _redirects del modelo ya bloquea CLAUDE.md, .claude/*, wrangler.toml, schema.sql y package*.json. Archivo nuevo en la raíz: o puede ser público, o se le añade una línea de bloqueo antes del deploy.

3. Escribir la LP

1. Plan de secciones con el texto de cada una. Orden que suele convertir:
   1. Arriba: promesa clara, para quién es, fecha y formato, botón.
   2. Prueba: quién enseña o quién ya lo ha usado (foto real, credencial, número verificable).
   3. Lo que la persona se lleva: 3 a 6 beneficios concretos.
   4. Para quién es (y para quién no).
   5. Contenido o programa: resumen a la vista, detalle en <details> que se abre al hacer clic.
   6. Oferta: precio, condición, qué incluye, garantía (solo si existe).
   7. Preguntas frecuentes (en <details>).
   8. Botón final y pie de página (marca, contacto, política de privacidad si se recogen datos).
2. Móvil primero. La mayor parte del tráfico llega desde el móvil. Escribe el CSS pensando en 375 px y amplíalo para pantallas más grandes. Texto escaneable: frases cortas, título por bloque, nada de muros de texto.
3. Botón siempre visible arriba y repetido después de cada bloque de decisión.
4. Imágenes ligeras: JPG o WebP, hasta ~200 KB cada una, width y height en el <img>, loading="lazy" en todo lo que no sea la parte superior. Foto de la parte superior con fetchpriority="high".
5. Metadatos: <title>, description, og:image (1200×630) y favicon. Es lo que aparece cuando alguien comparte el enlace en WhatsApp.
6. Sin dependencias pesadas. HTML, CSS y JS puros resuelven una LP. Fuente de Google con display=swap como máximo.

Los colores y fuentes del modelo residen en variables al inicio del <style> (:root). Cámbialos allí para aplicar la identidad de la marca de una vez.

4. Vista previa local

npx wrangler pages dev .

Abre en http://localhost:8788/<slug>/ con las Functions funcionando. Verifica en el navegador a 375 px y 1280 px: textos, imágenes, botones, formulario y consola sin errores. Si tienes navegador integrado en la app, úsalo y envía una captura a la persona.

5. Vista previa online (para aprobación)

npx wrangler pages deploy . --project-name=<proyecto> --branch=previa --commit-dirty=true

Sale en una dirección previa.<proyecto>.pages.dev, separada de la producción. Envía el enlace a la persona para que lo apruebe en su móvil. El modelo bloquea el formulario en esta dirección (no genera leads falsos en el CRM).

6. Publicar

Solo con el "puedes publicar":

npx wrangler pages deploy . --project-name=<proyecto> --branch=main --commit-dirty=true

Después verifica:

• la LP responde 200 en la dirección oficial (curl -sI https://<dirección>/<slug>/);
• los archivos bloqueados responden 301 (/CLAUDE.md, /wrangler.toml);
• si tiene formulario, un lead de prueba llega al destino (camino 3).

La lista de verificación completa está en references/checklist.md.

7. Registrar

Actualiza el CLAUDE.md del proyecto con: LP nueva (slug, producto, fecha), destino del botón, secrets registrados (solo el NOMBRE, nunca el valor) y el id del deploy. Esto es lo que la próxima conversación leerá para no romper nada. Si el proyecto usa git, haz el commit solo con los archivos de la LP.

Cambios posteriores

• Texto o precio: edita, previsualiza, publica. Cambia la misma información en todos los lugares (arriba, oferta, FAQ, gracias, metadatos).
• Dos LPs del mismo producto (ej.: una por origen de tráfico): mantén el contenido idéntico y cambia ambas en el mismo deploy. Anota en CLAUDE.md lo que puede diferir entre ellas.
• Retirar una LP: no borres la carpeta apresuradamente. Agrega en _redirects una línea 301 hacia el sustituto (/slug-viejo /slug-nuevo/ 301 y /slug-viejo/* /slug-nuevo/ 301). Los anuncios antiguos, enlaces en bio y correos electrónicos seguirán funcionando.
• Secret nuevo o cambiado: solo surte efecto después de un nuevo deploy.

Problemas conocidos

• Archivo olvidado en la carpeta se vuelve público. Ya ha ocurrido que un archivo de configuración con una clave de acceso quedara abierto en internet. El .assetsignore no es respetado por wrangler pages deploy: usa el bloqueo en _redirects.
• Secret registrado y nada cambió: falta el deploy después de secret put.
• Secret con solo una parte del valor: webhook registrado sin https:// o solo con la clave da Invalid URL. Registra la URL completa.
• Nombre con acento que llega como %C3%A9: decodifica los parámetros en la página de agradecimiento (decodeURIComponent). El modelo ya lo hace.
• Formulario que "no hace nada" en la vista previa online: es el bloqueo de previsualización actuando. Pruébalo en localhost o en producción.