Diseño de Páginas de Aterrizaje

¿Qué hace Diseño de Páginas de Aterrizaje?

Descripción General

Construye páginas de aterrizaje que CONVIERTAN y cautiven. Esta habilidad combina una estructura enfocada en la conversión con un diseño visual distintivo para crear páginas que se destaquen en un mundo saturado de IA. El objetivo: páginas que valgan entre $50 y $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 parezcan, 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", sino una cosa específica 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. Rebelión. Nostalgia. Inspiración. Diversión. Sofisticación. Bienvenida. Intriga. Seguridad.

P3: Elige DOS influencias inesperadas para chocar:

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

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

Nombra 2 o 3 cosas específicas que evitar activamente. "Un proyecto de criptomonedas", "Una aplicación de bienestar", "Algo hecho por un banco", "Cualquier cosa con degradados púrpura"

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

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

INVENCIÓN DE COLOR (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 de Medianoche" o "Mañana del Cinturón de Óxido")

INVENCIÓN TIPOGRÁFICA (Haz coincidir la voz con el choque)

• ¿Cómo sonaría el texto en ese lugar?
• Encuentra una fuente de exhibición que encarne el choque de la P3
• No te limites a tus opciones habituales - explora Google Fonts con ojos frescos
• Considera: peso, ancho, contraste, peculiaridades

INVENCIÓN DE DISEÑO (Derívalo del espacio físico)

• ¿Cómo se organiza el espacio en ese lugar de la P1?
• ¿Es apretado o expansivo? ¿Parecido a una cuadrícula u orgánico? ¿Vertical u horizontal?
• ¿Qué elección de diseño inesperada encarnaría el choque de la P3?

INVENCIÓN DE MOVIMIENTO (Haz coincidir 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 codificar, 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]
CHOQUE: [De la P3]
ANTI-PATRONES: [De la P4]

COLORES:
- Primario: [hex] - [por qué este color]
- Secundario: [hex] - [por qué]
- Fondo: [hex] - [por qué]
- Acento: [hex] - [por qué]
- Nombre de la 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 esto]

COMODÍN:
- Un detalle inesperado que no "encaja" pero 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)
• El choque de la P3 es realmente visible en mis elecciones
• Alguien NO podría confundir esto con mis páginas de aterrizaje anteriores
• Incluí un comodín que me sorprende incluso a mí

---

Ejemplo de Descubrimiento de Vibra

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

P2 - Emoción: "Confianza"

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

P4 - Nunca confundir con: "Una app de meditación, nada caprichoso, tecnología 'startup-bro'"

Especificación de Vibra Generada:

NOMBRE DE VIBRA: Shinjuku Runway
REFERENCIA: Estación de tren japonesa en hora punta
EMOCIÓN: Confianza
CHOQUE: Señalización de tránsito + alta costura
ANTI-PATRONES: Sin degradados suaves, sin ilustraciones lúdicas, sin formas redondeadas amigables

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

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

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

MOVIMIENTO:
- Nivel: Sutil pero preciso
- Animación característica: Los elementos se deslizan desde el lateral como trenes que llegan - horizontales, suaves, con una sincronización exacta

COMODÍN:
- Un elemento utiliza una superposición de textura similar a la tela - el choque de la alta costura

---

Iniciadores de Inspiración (Cuando te Estanques en la P1)

Espacios: Mercado nocturno en Bangkok | Museo vacío a la hora de cierre | Sala de aeropuerto a las 4am | Tienda de discos vintage | Sala de espera de hospital | Piso del casino | Invernadero en invierno | Andén de metro | Cúpula de observatorio | Fábrica abandonada | Interior de yate de lujo | Lavandería 24 horas | Sala de libros raros de la biblioteca | Taller de carrocería | Módulo de estación espacial

Objetos: Sintetizador de los 80 | Instrumentos quirúrgicos | Equipaje vintage | Motocicleta de carreras | Brújula antigua | Telar industrial | Letrero de neón | Máquina de escribir | Utensilios de vidrio científico | Libro encuadernado en cuero | Placa de circuito | Vajilla de porcelana

Eras/Movimientos: Constructivismo soviético | Diseño Memphis | Suiza internacional | Art nouveau | Bauhaus | De Stijl | Arquitectura Googie | Streamline moderne | Brutalismo | Metabolismo japonés | Modernismo escandinavo | Futurismo italiano

---

Las Reglas Anti-Convergencia

1. Sin memoria de códigos hex - Genera colores frescos desde la referencia, no recuerdes "mi azul habitual"
2. Rotación de fuentes requerida - No puedes usar la misma fuente de exhibición en proyectos consecutivos
3. El choque debe mostrarse - Si alguien no puede ver AMBAS influencias de la P3, esfuérzate más
4. El comodín es obligatorio - Cada vibra necesita un elemento que no "encaje" pero que la haga única
5. Ponle nombre - 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, pregunta:

1. "¿Qué lugar u objeto captura la energía de esta marca?"
2. "¿Qué emoción debería dominar?"
3. "¿A qué NO debería parecerse NUNCA?"

Luego sintetiza una vibra a partir de esas tres respuestas.

---

La Regla del 50%

Dedica el 50% de tu tiempo a la sección hero. Es la imagen de portada para redes sociales, la primera impresión, el anzuelo. Todo lo demás fluye de hacer bien el hero.

Composición de Secciones (De Arriba a Abajo)

1. Sección Hero (Enfoque Principal)

El elemento decisivo. Debe contener:

• Titular: Gancho afilado y basado en beneficios (consulta H1 Gallery como inspiración)
• Subtítulo: Contexto de apoyo, 1-2 frases como máximo
• Botón(es) CTA: Acción principal + opcional secundaria
• Prueba Social: Carrusel de logotipos, testimonios o insignias de confianza
• Elemento Visual: Foto del producto, ilustración o fondo animado

Variaciones del Hero:

• 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. Opciones:

• Cuadrícula Bento: Tarjetas en diseño asimétrico (popularizado por Apple)
• Filas Alternas: Imagen + texto, alternando lados
• Cuadrícula de Iconos: Iconos simples con descripciones cortas
• Tarjetas Interactivas: Estados hover, microanimaciones

3. Sección de Prueba Social

Genera confianza a través de:

• Carrusel de logotipos (animación de marquesina)
• Tarjetas de testimonio con fotos
• Estadísticas/métricas con contadores animados
• Fragmentos de casos de estudio

4. Sección de Cómo Funciona

Explicación paso a paso:

• Pasos numerados (01, 02, 03 - el patrón añade sofisticación)
• Desplazamiento fijo con revelación progresiva
• Visualización de línea de tiempo o diagrama de flujo

5. Sección de Precios (si aplica)

• Comparación de 2-3 niveles
• Nivel "recomendado" destacado
• Tabla comparativa de características
• Acordeón de preguntas frecuentes debajo

6. Sección CTA

Empujón final a la conversión:

• Repetir la propuesta de valor
• Titular fuerte
• Una sola acción enfocada
• Elementos de urgencia (si son auténticos)

7. Pie de Página

• Enlaces de navegación
• Iconos sociales
• Enlaces legales
• Registro de boletín opcional

Principios Anti-AI-Slop

Iconos: Evita Lucide (Sobreutilizado)

Usa en su lugar:

• Iconify Solar: Múltiples estilos (contorno, roto, duotono)
• Heroicons: Cuando necesites simplicidad al estilo Apple
• Phosphor: Sistema de peso flexible
• SVGs Personalizados: Para diferenciación de marca

Fuentes: Elimina Inter/Roboto

Alternativas distintivas:

• Exhibición: Newsreader, Playfair Display, Space Grotesk, Clash Display
• Cuerpo: Outfit, Plus Jakarta Sans, Manrope, Satoshi
• Mono: JetBrains Mono, IBM Plex Mono, Fira Code

Colores: Sin Degradados Púrpura

Alternativas audaces:

• Azul marino intenso + acento eléctrico
• Neutros cálidos + un solo color de acento
• Monocromático con profundidad tonal
• Modo oscuro con acentos neón
• Paletas terrosas/orgánicas

Diseños: Rompe la Cuadrícula

• Elementos superpuestos
• Secciones diagonales
• Espaciado asimétrico
• Elementos hero que rompen el contenedor
• Espacio negativo como elemento de diseño

Vocabulario de Animaciones

Animaciones de Entrada

• fade-in: Transición de opacidad simple
• blur-in: Comienza borroso, se enfoca
• slide-in: Entrada basada en dirección
• scale-in: Crece de pequeño a tamaño completo
• stagger: Revelación secuencial de elementos secundarios

Animaciones Continuas

• marquee: Desplazamiento horizontal infinito (logotipos, testimonios)
• beam: Luz que viaja a lo largo de un camino/borde
• pulse: Respiración sutil de escala/opacidad
• float: Movimiento suave hacia arriba/abajo
• rotate: Giro continuo (iconos, decoraciones)

Animaciones Interactivas

• hover-lift: Traslación Y sutil + sombra
• hover-glow: Cambio de color de borde/sombra
• hover-reveal: Aparece un elemento oculto
• click-ripple: Retroalimentación al estilo Material

Elementos Decorativos

• Líneas de cuadrícula verticales (basadas en el tamaño del contenedor)
• Curvas/conectores entre elementos
• Orbes/borrones de degradado en el fondo
• Superposición de textura de grano/ruido
• Formas geométricas (círculos, rectángulos con esquinas redondeadas)

Recursos de Diseño

Inspiración para Héroes

• Superhero (superhero.design): Secciones hero curadas
• Dribbble: Busca "hero section" o "landing page"
• Awwwards: Diseños galardonados

Patrones de Sección

• Mobin: Sitios web reales con desglose de secciones
• Bento Grids: Inspiración para diseños de tarjetas
• CTA Gallery: Patrones de llamada a la acción

Tipografía

• Google Fonts: Fuentes gratuitas, accesibles por IA
• Fontshare: Fuentes gratuitas de calidad
• H1 Gallery: Inspiración para titulares

Iconos y Logotipos

• Iconify: API de iconos unificada (Solar, Heroicons, etc.)
• Simple Icons: Logotipos de marca (SVG)
• Heroicons: Set de iconos de Tailwind

Flujo de Trabajo de Implementación

Fase 1: Investigación y Recopilación

1. Reúne de 5 a 10 capturas de pantalla de héroe como wireframes
2. Identifica los patrones de sección necesarios
3. Elige el conjunto de iconos y la combinación de fuentes
4. Define la paleta de colores

Fase 2: Desarrollo del Héroe

1. Genera el héroe a partir de la mejor captura de pantalla de referencia
2. Itera: cambia colores, fuentes, diseños
3. Añade animaciones (beam, fade-in, etc.)
4. Añade elementos decorativos (curvas, cuadrículas, números)
5. Refina hasta que sea distintivo

Fase 3: Construcción de Secciones

1. Añade secciones una a la vez (no todas a la vez)
2. Referencia componentes/capturas de pantalla específicos por sección
3. Mantén la coherencia de color/fuente con el héroe
4. Añade animaciones específicas de la sección

Fase 4: Pulido

1. Corrige los puntos de interrupción responsivos (móvil, tableta, escritorio)
2. Reemplaza las imágenes de marcador de posición con activos reales/de calidad
3. Optimiza las animaciones para el rendimiento
4. Prueba todos los elementos interactivos

Fase 5: Presentación

1. Crea una captura de pantalla de portada con diseño de lienzo infinito
2. Muestra el héroe de manera prominente
3. Incluye vistas de móvil y escritorio
4. Añade un fondo sutil (degradado borroso, patrón)

Patrones de Prompt

Generación del Héroe

Crea una sección hero para [TIPO DE PRODUCTO].
Cambia el texto, los nombres y los números para que se ajusten a [MARCA].
Usa iconos de Iconify Solar (estilo duotono).
Usa [FUENTE] para los titulares.
Añade líneas de cuadrícula verticales del tamaño del contenedor.
Añade indicadores de paso 01, 02, 03 para sofisticación.
Usa [COLOR] como primario, modo oscuro.

Adición de Sección

Adapta una nueva sección de [TIPO DE SECCIÓN].
Haz coincidir la combinación de colores y la tipografía del héroe.
Usa animación de marquesina para los logotipos.
Añade animación de entrada fade-in blur-in.
Mantén el héroe exactamente como está.

Mejora de Animación

Añade animación beam al borde del botón primario.
El beam debe ser de 1px, viajando continuamente alrededor de la forma de píldora.
Añade un efecto hover-lift sutil a las tarjetas de características.

Prompts Negativos (Lo que NO se debe Cambiar)

No cambies la sección hero.
Mantén la barra de navegación exactamente como está.
No modifiques las animaciones existentes.

Lista de Verificación de Calidad

Distinción Visual

• Sin degradados púrpura genéricos
• Conjunto de iconos no predeterminado (no Lucide)
• Combinación de fuentes distintiva
• Al menos un elemento "memorable"
• Sistema de color coherente a través de variables CSS

Calidad Técnica

• Diseño responsivo (móvil, tableta, escritorio)
• Animaciones con rendimiento suave
• Sin dependencias externas rotas
• Código CSS/JS limpio y comentado
• Etiquetas semánticas HTML5 (header, main, section, footer)

Preparación para Conversión

• Llamada a la acción clara y única
• Prueba social visible sin desplazamiento
• Propuesta de valor comunicada en los primeros 5 segundos
• Sin fricción: sin formularios innecesarios, sin obstáculos

Notas Técnicas

Stack de Implementación

Esta habilidad es independiente del stack: puedes implementar el diseño usando HTML/CSS/JS plano, React, Vue, Astro, o cualquier framework. La salida esperada es una página web funcional.

Gestión de Estado

Para landing pages, mantén el estado mínimo: navegación móvil, acordeones de preguntas frecuentes, contadores animados. Sin frameworks de estado complejos.

Rendimiento

• Optimiza imágenes (WebP, carga diferida)
• Minimiza CSS y JS
• Usa animaciones CSS sobre JS para animaciones
• Considera la estrategia de carga de fuentes para evitar cambios en el diseño (CLS)