Diseño de Páginas de Aterrizaje

Descripción General

Crea páginas de aterrizaje que CONVIERTAN y cautiven. Esta habilidad combina una estructura centrada en la conversión con un diseño visual distintivo para crear páginas que destaquen en un mundo saturado de IA. El objetivo: páginas que valgan $50-100 y de las que te sientas orgulloso de vender.

OBLIGATORIO: Descubrimiento de Vibra (Haz Esto Primero)

ANTES de escribir cualquier código, DEBES ejecutar el proceso de Descubrimiento de Vibra. Esto no es una tabla de consulta, es un prompt creativo que genera una dirección estética ÚNICA cada vez.

El objetivo: Que no haya dos páginas de aterrizaje que se vean iguales, incluso para productos similares.

El Proceso de Descubrimiento de Vibra

Haz al usuario estas preguntas, luego SINTETIZA una dirección única. No te limites a mapear las respuestas a ajustes predefinidos.

Paso 1: Recopilar Contexto (Pregunta Esto)

P1: ¿Cuál es un lugar u objeto del mundo real que representaría a esta marca?

No "qué industria" - algo específico y real. Una tienda de conveniencia en Tokio a las 2am. La cocina de una abuela. Un estacionamiento brutalista. Un arrecife de coral. La cabina de un 747. Un mercado de pulgas en Marrakech. Un estudio de grabación de los 70.

P2: ¿Cuál es la ÚNICA emoción que alguien debería sentir en los primeros 3 segundos?

Elige UNA: Calma. Energía. Curiosidad. Confianza. Deleite. Impresión. Rebeldía. Nostalgia. Inspiración. Diversión. Sofisticación. Bienvenida. Intriga. Seguridad.

P3: Elige DOS influencias inesperadas para hacer colisionar:

Ejemplos: "envases médicos + gráficos de skate", "hojas de cálculo + arte callejero", "hotel de lujo + fanzine punk", "control de misión de la NASA + jardín de infantes", "tienda de conveniencia japonesa + biblioteca victoriana"

P4: ¿Con qué NUNCA debería confundirse esta página?

Nombra 2-3 cosas específicas a evitar activamente. "Un proyecto de cripto", "Una aplicación de bienestar", "Algo hecho por un banco", "Cualquier cosa con degradados morados"

Paso 2: Inventa la Estética (No Busques - Crea)

Basándote en las respuestas, CREA una vibra única decidiendo:

INVENCIÓN DE COLORES (No uses paletas memorizadas - derívalas del lugar/objeto)

¿Qué colores existen en ese lugar/objeto real de la P1?
Extrae 3-4 colores que se sientan auténticos para esa referencia
Inventa códigos hex específicos desde cero - no reutilices códigos de proyectos anteriores
Nombra tu paleta de manera evocadora (no "azul y naranja" sino "Bodega Nocturna" o "Mañana del Cinturón Industrial")

INVENCIÓN TIPOGRÁFICA (Haz coincidir la voz con la colisión)

¿Cómo sonaría el texto en ese lugar?
Encuentra una fuente de exhibición que encarne la colisión de la P3
No recurras a tus elecciones habituales - explora Google Fonts con ojos nuevos
Considera: peso, ancho, contraste, peculiaridades

INVENCIÓN DEL DISEÑO (Deriva del espacio físico)

¿Cómo está organizado el espacio en el lugar de la P1?
¿Es apretado o amplio? ¿Tipo cuadrícula u orgánico? ¿Vertical u horizontal?
¿Qué elección de diseño inesperada encarnaría la colisión de la P3?

INVENCIÓN DEL MOVIMIENTO (Haz coincidir con la emoción)

¿Cómo se mueve la emoción de la P2?
Calma = apenas perceptible. Energía = cinético. Sofisticación = lento y deliberado.
¿Cuál es UN movimiento característico que define esta página?

Paso 3: Escribe tu Especificación de Vibra

Antes de programar, escribe esto explícitamente:

NOMBRE DE VIBRA: [Inventa un nombre de 2-3 palabras]
REFERENCIA: [El lugar/objeto de la P1]
EMOCIÓN: [De la P2]
COLISIÓN: [De la P3]
ANTIPATRONES: [De la P4]

COLORES:
- Primario: [hex] - [por qué este color]
- Secundario: [hex] - [por qué]
- Fondo: [hex] - [por qué]
- Acento: [hex] - [por qué]
- Nombre de paleta: [nombre evocador]

TIPOGRAFÍA:
- Exhibición: [nombre de fuente específica] - [por qué encaja]
- Cuerpo: [nombre de fuente específica] - [por qué]
- Carácter: [describe la voz]

DISEÑO:
- Densidad: [escaso/equilibrado/denso]
- Formas: [afiladas/redondeadas/orgánicas/mixtas]
- Elemento característico: [una elección de diseño inusual]

MOVIMIENTO:
- Nivel: [estático/sutil/moderado/dinámico/caótico]
- Animación característica: [una animación específica que define esta página]

ELEMENTO SORPRESA:
- Un detalle inesperado que no "coincide" pero que lo hace memorable

Paso 4: La Verificación de Frescura

Antes de continuar, verifica:

NO reutilicé códigos hex de mis últimos 3 proyectos
NO recurrí a mis fuentes "cómodas" (verifica: ¿estoy usando Inter? ¿Nunito? ¿Space Grotesk? Si es así, encuentra otra cosa)
La colisión de la P3 es realmente visible en mis elecciones
Alguien NO podría confundir esto con mis páginas de aterrizaje anteriores
Incluí un elemento sorpresa que incluso a mí me sorprende

Ejemplo de Descubrimiento de Vibra

P1 - Lugar/Objeto: "Una estación de tren japonesa en hora punta"

P2 - Emoción: "Seguridad"

P3 - Colisión: "Señalización de tránsito + alta costura"

P4 - Que nunca se confunda con: "Una aplicación de meditación, cualquier cosa caprichosa, tecnología de startup"

Especificación de Vibra Generada:

NOMBRE DE VIBRA: Pista de Shinjuku
REFERENCIA: Estación de tren japonesa en hora punta
EMOCIÓN: Seguridad
COLISIÓN: Señalización de tránsito + alta costura
ANTIPATRONES: Sin degradados suaves, sin ilustraciones juguetonas, sin formas redondeadas amigables

COLORES:
- Primario: #1a1a1a - el negro de las puertas del tren
- Secundario: #f5f5f0 - hormigón de plataforma, desgastado y suave
- Fondo: #fafaf8 - blanco de luz fluorescente
- Acento: #e60012 - rojo de la línea JR, que llama la atención
- Nombre de paleta: "Borde de Plataforma"

TIPOGRAFÍA:
- Exhibición: Darker Grotesque - segura, ligeramente condensada, con un toque europeo
- Cuerpo: Noto Sans JP - utilidad limpia, inspirada en el tránsito
- Carácter: Autoritaria pero no fría. Clara. Direccional.

DISEÑO:
- Densidad: Rico pero organizado - como un mapa de estación
- Formas: Afiladas con excepciones redondeadas intencionadas (como las ventanas del tren)
- Elemento característico: Fuertes bandas horizontales que dividen las secciones como horarios de tren

MOVIMIENTO:
- Nivel: Sutil pero preciso
- Animación característica: Los elementos se deslizan desde un lado como trenes que llegan - horizontal, suave, con sincronización exacta

ELEMENTO SORPRESA:
- Un elemento utiliza una superposición de textura similar a la tela - la colisión de la alta costura

Generadores de Inspiración (Cuando te Quedes Atascado en P1)

Las Reglas Anti-Convergencia

Sin memoria de códigos hex - Genera colores frescos desde la referencia, no recuerdes "mi azul habitual"
Rotación de fuentes obligatoria - No puedes usar la misma fuente de exhibición en proyectos consecutivos
La colisión debe mostrarse - Si alguien no puede ver AMBAS influencias de la P3, esfuérzate más
El elemento sorpresa es obligatorio - Cada vibra necesita un elemento que no "encaje" pero que la haga única
Nómbrala - Una vibra sin nombre se vuelve genérica. Una vibra con nombre tiene identidad.

Preguntas Rápidas de Contexto (Versión Mínima)

Si el usuario solo dice "hazme una página de aterrizaje" sin contexto, pregúntale:

"¿Cuál es un lugar u objeto que capture la energía de esta marca?"
"¿Qué emoción debería dominar?"
"¿Con qué NO debería parecerse esto?"

Luego sintetiza una vibra a partir de esas tres respuestas.

OBLIGATORIO: Estrategia de Copia (Haz Esto con el Descubrimiento de Vibra)

Ejecuta esto EN PARALELO con el Descubrimiento de Vibra. El Descubrimiento de Vibra te da la apariencia. La Estrategia de Copia te da las palabras. Ambos deben hacerse antes de cualquier código.

La Ecuación de Conversión

Cada decisión de copia fluye de esto:

Tasa de Compra = Deseo - (Esfuerzo + Confusión)

Aumentar el deseo → comunica el valor de forma clara y específica
Disminuir el esfuerzo → brevedad, estructura escaneable, acciones siguientes obvias
Disminuir la confusión → di exactamente qué es, haz que los botones sean inconfundibles

Si te quedas atascado en una decisión de copia, pregúntate: "¿Esto aumenta el deseo o disminuye el esfuerzo/confusión?"

Paso 1: Descubrimiento de Objeciones

Antes de escribir un solo titular, identifica las objeciones de compra. Pregunta al usuario:

"¿Qué casi impide que tus clientes compraran?" "¿Por qué los no clientes aún no han comprado?"

Categorías comunes de objeciones:

"No tengo las habilidades/el tiempo para esto"
"Esto no funcionará para mi situación específica"
"Es demasiado caro para lo que obtengo"
"Todavía no confío lo suficiente en esto"
"No entiendo qué hace esto realmente"

Escribe las 3 objeciones principales. Estas impulsan tu gancho del titular, el texto de las características y el marco del CTA.

Paso 2: Fórmula del Titular

Cada titular principal sigue: Propuesta de Valor + Gancho

La propuesta de valor debe pasar esta prueba de fuego:

Si un visitante ve SOLO el titular y nada más, ¿sabrá exactamente qué vendes?

❌ "Mejora tu flujo de trabajo" (relleno corporativo — ¿flujo de trabajo para qué?) ❌ "El futuro de la productividad" (no dice nada concreto) ✅ "Comestibles entregados en 1 hora" (específico, concreto, claro) ✅ "Diseña sitios web visualmente — sin necesidad de código" (qué hace + objeción clave resuelta)

El gancho es de uno de dos tipos:

Tipo A — Afirmación audaz y específica (genera curiosidad):

"Reduce el tiempo de implementación de 4 horas a 12 minutos"
"10,000 equipos enviaron más rápido el mes pasado"

Tipo B — Objeción abordada (elimina la barrera de compra #1):

"No se requiere tarjeta de crédito" (aborda la objeción de confianza)
"Funciona con tus herramientas existentes" (aborda la objeción de costo de cambio)
"Configuración en 5 minutos" (aborda la objeción de esfuerzo)

Usa tu objeción principal del Paso 1 para elegir el tipo de gancho.

Paso 3: Reglas del Subtítulo

El subtítulo hace exactamente dos cosas:

Explica qué es el producto (si el titular se centró en los beneficios)
Explica cómo es posible la afirmación audaz (si el titular hizo una afirmación)

Máximo: 1-2 oraciones. Manténlo ligero. Si necesitas tres oraciones, tu titular no está haciendo suficiente trabajo.

Paso 4: Estructura del Texto de Características

Cada característica obtiene exactamente tres elementos:

Elemento	Reglas
Encabezado de la característica	Solo propuesta de valor corta. Sé directo. ❌ "Empodera a tu equipo" ✅ "Colaboración en tiempo real"
Párrafo de la característica	Descripción concisa + aborda UNA objeción crítica. Enlaza a detalles si es necesario — sin muros de texto.
Imagen de la característica	Muestra el producto EN ACCIÓN. Para software: GIFs > capturas de pantalla > arte abstracto. Para bienes físicos: casos de uso + primeros planos de calidad de construcción.

Cada característica debe vincularse a la propuesta de valor dominante del héroe. Las características no son aleatorias — son evidencia de la afirmación que hiciste arriba del pliegue.

Paso 5: Texto del CTA

Los CTA deben continuar la narrativa del héroe, no ser genéricos.

❌ "Comenzar" / "Solicitar demo" / "Registrarse" (perezoso, sin contexto) ✅ "Encuentra comida cerca de mí" (continúa una narrativa de entrega) ✅ "Empieza a diseñar" (continúa una narrativa de herramienta de diseño) ✅ "Ve tus ahorros" (continúa una narrativa financiera)

El texto del botón CTA debe sentirse como la siguiente oración natural después de leer el titular.

Paso 6: Estrategia de Prueba Social

Si tienes clientes/prensa notables:

Muestra los logotipos en un carrusel — crea FOMO ("todos ya saben de esto")
Destaca métricas impresionantes (recuento de clientes, ingresos procesados, etc.)

Si NO tienes prueba social notable aún (inicio en frío):

Ofrece acceso gratuito a 3-5 empresas reconocibles, luego muestra sus logotipos
Usa testimonios específicos con nombres y fotos reales (incluso de usuarios beta)
Muestra estadísticas agregadas ("Usado por más de 500 equipos" supera una barra de logotipos vacía)
Considera "Visto en" con cualquier mención de prensa, pódcast o boletín

No lo falsifiques. Una sección de prueba social vacía es peor que ninguna sección.

Paso 7: Enrutamiento Multi-Audiencia

Si tu producto sirve a personas distintas (por ejemplo, individuos vs. equipos, desarrolladores vs. diseñadores):

Agrega un elemento "elige tu propia aventura" cerca de la parte superior de la página que dirija a los visitantes a las secciones relevantes. Ejemplos:

Pestañas de alternancia: "Para Desarrolladores" / "Para Diseñadores"
Héroe dividido: "Soy un [rol A]" / "Soy un [rol B]"
Páginas de aterrizaje segmentadas enlazadas desde el héroe

No obligues a todos a pasar por el mismo embudo si tienen necesidades diferentes.

Especificación de Estrategia de Copia

Escribe esto junto con tu Especificación de Vibra:

TOP 3 OBJECIONES:
1. [objeción] → abordada en: [titular/característica/CTA]
2. [objeción] → abordada en: [titular/característica/CTA]
3. [objeción] → abordada en: [titular/característica/CTA]

TITULAR:
- Propuesta de valor: [qué vendes, concretamente]
- Tipo de gancho: [afirmación audaz / objeción abordada]
- Titular completo: [el texto real]
- Prueba de fuego: ¿Alguien sabría qué vendemos solo con esto? [sí/no]

SUBTÍTULO: [1-2 oraciones — qué es + cómo funciona la afirmación]

TEXTO DEL CTA: [continuación narrativa del titular]

AUDIENCIA: [única / multi-persona]
- Si es multi: [cómo los dirigimos]

La Regla del 50%

Dedica el 50% de tu tiempo a la sección del héroe. Es la imagen de portada para redes sociales, la primera impresión, el gancho. Todo lo demás fluye de tener el héroe correcto.

Composición de Secciones (De Arriba a Abajo)

1. Sección del Héroe (Enfoque Principal)

El elemento decisivo. Debe contener:

Titular: Propuesta de Valor + Gancho de tu Especificación de Estrategia de Copia (ver arriba). Debe pasar la prueba de fuego — si alguien ve SOLO esto, ¿sabe qué vendes?
Subtítulo: Explica qué es + cómo funciona la afirmación. Máximo 1-2 oraciones, mantenlo ligero.
Botón(es) de CTA: Continuación narrativa del titular (no "Comenzar" — ver reglas de texto de CTA arriba). CTA secundario opcional.
Prueba Social: Carrusel de logotipos, testimonios o insignias de confianza. Si es un inicio en frío, consulta la Estrategia de Prueba Social arriba.
Elemento Visual: Foto del producto, ilustración o fondo animado

Variaciones del Héroe:

Diseño dividido (texto a la izquierda, visual a la derecha)
Centrado con elementos flotantes
Fondo a sangre completa con texto superpuesto
Asimétrico con elementos decorativos

2. Sección de Características/Beneficios

Muestra lo que hace el producto. Cada característica necesita tres elementos: encabezado (propuesta de valor corta, sin "Empoderar/Revolucionar"

...

[truncado para traducción]

Diseño de landing — Vibe Discovery + anti-AI-slop

¿Qué es Diseño de landing — Vibe Discovery + anti-AI-slop?

Preguntar en tu IA favorita

Documentación