landing-page

Landing Page

Genera un archivo HTML autocontenido que parezca diseñado artísticamente, no generado por IA. El ejemplo en examples/ (pulse-landing.html) es el estándar de calidad. Iguala su nivel de especificidad: texto realista, espaciado deliberado, un solo acento.

Antes de construir

Recopila o inventa (y mantén consistentes) estos cinco insumos:

1. Producto en una frase: qué es y qué hace.
2. Audiencia: una persona específica, no "todo el mundo".
3. La acción principal única (registrarse, comprar, descargar, unirse a lista de espera).
4. Un punto de prueba: un número, una cita o un resultado concreto. Si el usuario no tiene ninguno, usa un mecanismo en su lugar ("funciona sin conexión", "no se necesita cuenta") — nunca inventes testimonios o estadísticas.
5. Tono: elige uno — tranquilo/premium, audaz/ruidoso, cálido/humano, técnico/preciso.

Si el usuario te dio un producto y una audiencia, no hagas más preguntas. Toma decisiones razonables y anótalas en una línea al final.

Tokens de diseño (sistema por defecto — "Tinta & Cítricos")

Usa estos a menos que el usuario proporcione colores de marca. Cambia todos los valores en un solo lugar: el bloque :root.

:root{
  --bg:#0F1013;        /* fondo de página */
  --panel:#17181D;     /* superficies elevadas */
  --line:#26272E;      /* líneas finas, bordes */
  --ink:#F4F2EA;       /* texto principal */
  --muted:#9BA0A6;     /* texto secundario */
  --accent:#D9F24F;    /* UN acento — botones, destacados */
  --radius:14px;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
}

Reglas que hacen que parezca diseñado:

• Un solo color de acento. Todo lo cliqueable o importante lo usa; nada más compite. Sin gradientes arcoíris, sin gradiente "IA" azul-morado.
• La tipografía hace el trabajo. Titular de 56–72px, peso 800, interletraje ligeramente negativo (-0.02em). Cuerpo 17–18px, altura de línea 1.6. Etiquetas en versalitas (12px, interletraje 0.12em, mayúsculas, atenuadas) sobre los titulares.
• Espacio en múltiplos de 8. Relleno de sección de 96px arriba/abajo en escritorio. Si un espacio parece arbitrario, se lee como generado.
• Líneas finas sobre sombras. Separa las secciones con bordes de 1px --line, no con sombras o tarjetas flotantes sobre fondos de color.
• Números como diseño. Números de estadística grandes (48px+) en el acento o en tinta, con etiquetas pequeñas atenuadas. Una fila de tres estadísticas como máximo.

Receta de página (en este orden)

1. Barra superior — marca de palabra a la izquierda, dos o tres enlaces de texto plano, un botón de acento (la acción principal). Borde inferior fino.
2. Héroe — etiqueta en versalitas (categoría), titular, una frase de apoyo (máx. 22 palabras), botón principal + un enlace secundario discreto. A la derecha o debajo: una visualización del producto hecha con CSS (una ventana simulada, un grupo de tarjetas de estadísticas, una composición tipográfica). Nunca un cuadro gris vacío de marcador de posición.
3. Franja de logotipos/prueba — una línea: "Usado por…" con marcas de palabra en texto, o la fila de estadísticas de prueba. Omítelo por completo si no hay una prueba honesta.
4. Problema → cambio — dos columnas: la forma antigua (atenuada, con sensación de tachado) vs. la forma del producto. Líneas cortas, sin párrafos de más de 3 líneas.
5. Características — exactamente tres o cuatro. Cada una: número en versalitas (01–04), título, descripción de dos líneas. Cuadrícula con divisores de línea fina, no seis tarjetas de iconos idénticas.
6. Cómo funciona — tres pasos numerados, una línea cada uno.
7. Precios u oferta — si el usuario dio un precio: un plan destacado, lo que incluye como lista de verificación, el botón de acción principal. Si no hay precio: una banda de CTA/lista de espera.
8. FAQ — máximo cuatro preguntas, redactadas contra objeciones reales (precio, esfuerzo, cambio, "¿es esto para mí?").
9. Banda CTA final — bloque de fondo de acento, texto en color tinta, titular que repite la promesa principal con otras palabras, un botón.
10. Pie de página — marca de palabra, una línea de posicionamiento, enlaces pequeños. Sin mapa del sitio extenso.

Reglas de redacción

• Fórmula del titular: [resultado específico] para [persona específica], o una afirmación concreta que el producto pueda respaldar. "Recupera tus tardes, corredores" — no "Bienvenido al futuro de la productividad".
• Cada sección debe contener al menos un sustantivo concreto y un número o nombre. Los adjetivos vagos ("sin fisuras", "potente", "revolucionario", "puntero", "siguiente nivel") están prohibidos.
• Los botones dicen lo que sucede: "Empieza gratis", "Consigue la plantilla", "Únete a la lista de espera". Nunca "Más información" como acción principal.
• Escribe como el creador del producto, primera persona del plural con moderación ("construimos esto porque…"), nunca el lenguaje corporativo de "soluciones".

Anti-patrones (el "aspecto IA" — nunca hagas esto)

• Fondos de héroe con gradiente morado/azul o texto degradado.
• Tres tarjetas idénticas con emojis o iconos SVG genéricos en círculos.
• Texto al estilo "🚀 Acelera tu flujo de trabajo", signos de exclamación en titulares.
• Lorem ipsum, "Característica Uno / Característica Dos", marcadores de posición de fotos de stock.
• Todo centrado. Mezcla bloques de texto alineados a la izquierda con visualizaciones desplazadas.
• Más de dos familias o pesos de fuente, o más de un color de acento.
• Testimonios falsos, logotipos falsos, estadísticas inventadas. Nunca.

Reglas técnicas

• Un archivo HTML, CSS en <style>, sin recursos externos excepto un enlace a Google Fonts (Inter o la fuente de marca del usuario). No se requiere JavaScript excepto un toggle opcional para FAQ.
• Etiquetas semánticas: header, main, section, footer. Un solo <h1> real.
• Responsive: una sola columna por debajo de 760px, visualización del héroe debajo del texto, objetivos táctiles de al menos 44px.
• Mantén el archivo por debajo de ~700 líneas. Si necesita más, la página está haciendo demasiado — recorta una sección.

Lista de verificación de QA (ejecutar antes de entregar)

• Un solo color de acento, usado de forma consistente; sin gradientes excepto un sutil degradado de fondo del mismo tono.
• El titular contiene un resultado concreto y una audiencia o mecanismo específico.
• Cada número en la página provino del usuario o de la mecánica real del producto.
• Sin palabras prohibidas: sin fisuras, acelera, revolucionar, puntero, siguiente nivel, desbloquea tu potencial.
• Se lee correctamente a 390px de ancho sin desplazamiento horizontal.
• La acción principal aparece al menos tres veces (barra superior, héroe, banda final).