¿Qué hace Constructor de Páginas de Aterrizaje?
Convierte un resumen en una página de aterrizaje rápida, responsiva y autónoma, lista para desplegar en GitHub Pages, Netlify o cualquier servidor estático.
1. Recopilar el resumen
Antes de escribir, asegúrate de tener estos datos. Pregunta solo por lo que falte, en un solo mensaje.
| Campo | Ejemplo |
|---|---|
| Producto / oferta | "LearnMizo – aprende el idioma mizo en línea" |
| Audiencia | "Padres de la diáspora que quieren que sus hijos hablen mizo" |
| Resultado principal para el visitante | "Mantener una conversación simple en 30 días" |
| Llamada a la acción principal | "Empieza la lección gratuita" + URL de destino |
| Prueba que realmente tienes | Números reales, citas reales, logotipos (o "ninguno aún") |
| Marca | Colores, fuentes, tono (o "elige por mí") |
Si el usuario dice "solo constrúyelo", haz suposiciones razonables y enuméralas al principio de tu respuesta.
2. Escribir la copia primero (antes de cualquier HTML)
Sigue la estructura en references/page-structure.md. Reglas:
- Título = resultado, no característica. Máximo ~10 palabras. Prueba: ¿diría la audiencia "sí, eso es lo que quiero"?
- Subtítulo explica cómo en una sola oración.
- Una CTA principal, repetida (hero, mitad de página, pie de página). Misma redacción cada vez.
- Los beneficios se escriben como "Puedes…" o "No más…", no como listas de características.
- Nunca inventes pruebas. No uses testimonios falsos, números de usuarios, calificaciones o logotipos. Si falta prueba, usa un marcador de posición claramente indicado:
<!-- TODO: agregar una cita real de un cliente -->y un "Tu testimonio aquí" visible solo en borradores. - Mantén el nivel de lectura simple (apunta a grado 6–8).
3. Construir la página
Empieza desde assets/template.html y reemplaza los {{placeholders}}.
Requisitos técnicos:
- Archivo único, todo el CSS en línea dentro de
<style>; sin frameworks. JavaScript solo si es necesario (por ejemplo, alternador de FAQ). - Mobile-first; prueba anchos 360px, 768px, 1280px.
- HTML semántico: un
<h1>, secciones con<h2>,<main>,<footer>. - Completa
<title>(≤60 caracteres),meta description(≤155 caracteres), etiquetas Open Graph. - Contraste de color al menos AA de WCAG (4.5:1 para texto del cuerpo).
- Botones de al menos 44px de alto; CTA visible sin desplazamiento en móvil.
- Imágenes: usa
loading="lazy", establece ancho/alto,altdescriptivo.
4. Verificación de calidad antes de entregar
Revisa usando references/checklist.md y corrige lo que falle. Luego entrega:
- El archivo HTML.
- Un resumen de 3 líneas: título elegido, CTA, suposiciones hechas.
- Dos títulos alternativos para pruebas A/B.