Diseño de Página de Aterrizaje

Una página de aterrizaje no es una página de inicio. Una página de inicio sirve múltiples intenciones. Una página de aterrizaje gana una sola intención:

una oferta → una audiencia → una acción principal.

Esta habilidad tiene dos mitades. La Parte A decide qué dice la página y cómo está estructurada. La Parte B es el sistema visual no negociable. Trabaja a través de la Parte A antes de tocar la Parte B.

Alcance

Aplica a todo el trabajo de UI web: páginas de aterrizaje, sitios de marketing, componentes, paneles de control, prototipos y revisiones de diseño. Cuando una regla aquí entra en conflicto con un valor predeterminado del framework, este archivo gana. Cuando la solicitud explícita del usuario entra en conflicto con una regla, el usuario gana.

Habilidad complementaria. Para actualizar un sitio existente en lugar de construir uno nuevo, usa rediseñar-proyectos-existentes (github.com/elayadesign/redesign-skill). Diagnostica patrones genéricos y se remite a este archivo para cada valor concreto.

PARTE A — Estrategia y estructura

A1. Admisión

Recopila estos antes de diseñar o escribir. Pregunta solo por lo que falta, y pregunta en un lote en lugar de una pregunta a la vez.

Propósito

¿Cuál es la ÚNICA acción principal? (prueba, demo, compra, lista de espera, descarga)
¿Cuál es la oferta, exactamente qué obtienen?
¿Qué cuenta como conversión? (clic, registro, compra)

Audiencia y contexto

¿Quién es el ICP?
¿Qué problema están tratando de resolver?
Las tres principales objeciones, es decir, por qué no convierten hoy
Fuente de tráfico: anuncios, búsqueda, redes sociales, correo electrónico
¿Qué saben ya los visitantes cuando llegan?

Pruebas y activos

Puntos de prueba: logotipos, testimonios, números, casos de estudio
Capturas de pantalla, video demo, GIFs del producto
Garantías, términos de reembolso, términos de cancelación

Restricciones

Voz de la marca: casual o profesional
Dirección de diseño: editorial minimalista, 3D lúdico, UI de vidrio
¿Prioridad móvil?

Si el usuario no puede responder, haz una suposición razonable, indícala en una línea y continúa. No detengas la construcción.

A2. Estructura de la página

Sobre el pliegue (requerido)

Titular, resultado más audiencia
Subtítulo, aclara cómo y agrega especificidad
CTA principal, verbo claro más lo que obtienen
Una señal de prueba, tira de logotipos, estadística o testimonio corto
Visual del héroe, captura de pantalla del producto o video, o una ilustración fuerte

Mitad de la página (el argumento) 6. Problema a solución, una sección 7. Beneficios, de tres a cinco, impulsados por resultados 8. Cómo funciona, tres pasos 9. Prueba social, testimonios o un caso de estudio

Parte inferior (manejo de objeciones) 10. FAQ, de seis a doce preguntas 11. Reversión de riesgo, prueba, cancelación en cualquier momento, garantía 12. CTA final, idéntico al de arriba

Incluye la sección obligatoria de revelación de lema de B11 en algún lugar del argumento de la mitad de la página, típicamente justo después del héroe o después de los beneficios.

A3. Selección de diseño

Elige uno y di por qué.

Tipo	Cuándo usarlo
A. Héroe clásico con secciones	El producto es comprensible desde una captura de pantalla del héroe. Más común.
B. Historia de formato largo	Necesitas educar y superar el escepticismo.
C. Página de conversión mínima	Tráfico de alta intención (correo electrónico a usuarios conocidos), o una oferta corta como una descarga o lista de espera.
D. Página de comparación	La intención de búsqueda incluye alternativas ("X vs Y", "mejor para"). Generalmente se combina con páginas SEO.

A4. Reglas de conversión

Haz coincidir el mensaje con la fuente. Si el tráfico proviene de anuncios, refleja el titular del anuncio en el héroe y mantén la misma promesa y tono visual.

Haz obvio el siguiente paso. Un CTA principal. Nunca coloques CTA en competencia sobre el pliegue.

Escribe el beneficio primero. Las características son lo que hace. Los beneficios son lo que eso significa para ellos.

Sé específico.

❌ "Ahorra tiempo y optimiza"
✅ "Reduce tu informe semanal de 4 horas a 15 minutos"

Reduce el riesgo. Elige al menos uno: prueba gratuita, plan gratuito, sin tarjeta de crédito, cancelación en cualquier momento, garantía de devolución de dinero.

Trata las objeciones como una sección, no como una nota al pie. Mueve el FAQ más temprano para ofertas de alta fricción. Coloca la prueba directamente junto a la afirmación que respalda.

A5. Redacción publicitaria

Fórmulas de titulares

"{Resultado} sin {dolor}"
"La {categoría} para {audiencia}"
"Entrega {resultado} en {tiempo}"

Subtítulo. Una o dos oraciones. Aclara qué es y para quién es.

CTA. Verbo más lo que obtienen. Nunca "Más información" o "Enviar". Usa "Iniciar prueba gratuita", "Reservar una demo", "Obtener la lista de verificación".

Viñetas de beneficios. Beneficio en negrita, luego la prueba o detalle. Ejemplo: Iteración más rápida — genera tres variantes de diseño en un clic.

Nota: las reglas de copy en B1 aún aplican. Sin guiones dentro de las oraciones, sin palabras huérfanas.

A6. Orden de construcción

Trabaja sección por sección, en este orden:

Héroe
Beneficios
Cómo funciona
Prueba
FAQ
CTA final

Nunca reconstruyas toda la página en cada iteración. Sección por sección mantiene el control y mantiene los diffs revisables.

A7. SEO y AEO

No indexes páginas de campaña solo de anuncios u ofertas muy limitadas en el tiempo. Usa noindex o mantenlas detrás de una ruta no indexada.

Sí indexa ofertas perennes y páginas donde la intención de búsqueda coincida con la promesa. Agrega un título y una meta descripción claros, enlaces internos desde la página de inicio y páginas de características, y el FAQ en formato simple de pregunta y respuesta para AEO. Agrega esquema de FAQ si es apropiado.

A8. Peligros

Demasiados CTA sobre el pliegue
Propuesta de valor vaga: "optimizar", "mejorar"
Una lista grande de características sin resultados
Prueba enterrada al final
Diseño móvil que rompe la legibilidad
Sin un siguiente paso claro

PARTE B — Sistema visual

Cada valor visual debe resolverse a través de estas reglas en lugar de inventarse ad hoc.

B1. Tipografía

Fuentes

Usa: Geist, Manrope, Geist Mono, Poppins.

Nunca uses: Inter, Roboto, Arial, Open Sans, Helvetica.

Nunca uses fuentes en cursiva en ningún lugar de la interfaz.

Un tipo de letra por sitio. No combines dos fuentes a menos que la solicitud lo pida explícitamente. Geist Mono está permitido junto a una fuente principal solo para código, datos o UI numérica donde se requiera funcionalmente un monoespaciado.

Nunca uses pesos ultra negrita (900 / black). Limita a seminegrita o negrita.

Reglas de copia

Sin guiones en el texto. No uses - dentro del cuerpo de la copia, titulares o etiquetas. Reescribe la frase en su lugar.

Sin palabras huérfanas. Una sola palabra nunca debe estar sola en la última línea. Aplica text-wrap: balance para titulares y text-wrap: pretty para el cuerpo de la copia.

Escala tipográfica

Siempre resuelve los tamaños de fuente a la escala tipográfica predeterminada de Tailwind. Nunca dejes valores arbitrarios en su lugar, incluyendo text-[19px], font-size: 22px, o 1.4rem.

Si un tamaño existente no cae exactamente en un paso, ajústalo al paso más cercano por debajo, tomando tanto el tamaño como su altura de línea emparejada.

Clase	Tamaño	Altura de línea
`text-xs`	12px (0.75rem)	16px
`text-sm`	14px (0.875rem)	20px
`text-base`	16px (1rem)	24px
`text-lg`	18px (1.125rem)	28px
`text-xl`	20px (1.25rem)	28px
`text-2xl`	24px (1.5rem)	32px
`text-3xl`	30px (1.875rem)	36px
`text-4xl`	36px (2.25rem)	40px
`text-5xl`	48px (3rem)	1
`text-6xl`	60px (3.75rem)	1
`text-7xl`	72px (4.5rem)	1
`text-8xl`	96px (6rem)	1
`text-9xl`	128px (8rem)	1

No combines el ajuste de escala con alturas de línea personalizadas establecidas independientemente en otro lugar de una auditoría. El seguimiento y la altura de línea solo pueden ajustarse dentro del valor que el paso coincidente ya proporciona, para que las dos reglas nunca entren en conflicto.

Tipo de botón

Botones principales: text-base (16px), seminegrita.
Botones de encabezado más pequeños: text-sm (14px), seminegrita.

B2. Espaciado

Solo estos valores. Nada entre ellos, nada fuera de ellos.

Token	Valor
Espaciado-0	0
Espaciado-25	2px
Espaciado-50	4px
Espaciado-75	8px
Espaciado-100	12px
Espaciado-200	16px
Espaciado-300	24px
Espaciado-400	32px
Espaciado-500	40px
Espaciado-600	48px
Espaciado-700	64px
Espaciado-800	80px
Espaciado-900	96px

Botones principales: 8px de relleno vertical, 12px de relleno horizontal.

B3. Radio de esquina

Usa solo los valores de radio de Tailwind.

Fórmula de radio anidado. Cuando una forma está dentro de otra y el espacio entre ellas es menor de 32px:

radio interno = radio externo − espacio

Aplica esto solo cuando el resultado sea mayor que 2. Por debajo de eso, deja la forma interna cuadrada o sin cambios.

Ejemplo: una tarjeta externa con rounded-2xl (16px) con 8px de relleno interno da a un elemento interno un radio de 8px (rounded-lg).

B4. Bordes y fondos

Nunca apliques un borde a solo un lado de una tarjeta. Los bordes van completamente alrededor o no van.
Nunca uses degradados en fondos. Los fondos son planos.

Colores de fondo en modo oscuro

Usa solo estos:

#000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

B5. Sección de héroe

Color del titular

Tema oscuro: degradado de izquierda a derecha en el texto del titular, #FFFFFF → #9B9B9B.
Tema claro: degradado de izquierda a derecha en el texto del titular, #000000 → #666666.

Este es el único lugar donde se usan degradados, y solo en el texto, nunca en el fondo.

Diseño

El titular y el subtítulo ambos obtienen un ancho máximo de 680px.
Lee el texto del titular e inserta saltos de línea en puntos significativos.
Nunca cortes una línea de una manera que corte una frase de manera incómoda o haga la oración más difícil de leer. Corta donde el pensamiento se rompe.

B6. Iconos

Usa: Phosphor, Solar o Iconamoon.

Nunca uses: Material Icons, Material Symbols.

B7. Coreografía de movimiento (dinámica de fluidos)

Nunca uses transiciones predeterminadas. Todo el movimiento simula la masa del mundo real y la física del resorte a través de curvas cúbicas de Bézier personalizadas.

transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]

Navegación de isla flotante

Estado cerrado. La barra de navegación es una píldora de vidrio flotante separada de la parte superior: mt-6, mx-auto, w-max, rounded-full.

Morfismo del menú de hamburguesa. Al hacer clic, las líneas del menú de hamburguesa giran y se traducen fluidamente en una X perfecta usando rotate-45 y -rotate-45 con posicionamiento absoluto. Nunca deben simplemente desaparecer.

Expansión modal. El menú se abre como una superposición que llena la pantalla con un efecto de vidrio pesado: backdrop-blur-3xl bg-black/80 o bg-white/80.

Revelación escalonada con máscara. Los enlaces de navegación dentro del estado expandido aparecen gradualmente y se deslizan hacia arriba desde una caja invisible, translate-y-12 opacity-0 resolviendo a translate-y-0 opacity-100, escalonados por elemento con delay-100, delay-150, delay-200, y así sucesivamente.

Interpolación de desplazamiento

Los elementos nunca aparecen estáticamente al cargar. A medida que entran en el viewport, ejecutan una aparición suave y pesada:

translate-y-16 blur-md opacity-0  →  translate-y-0 blur-0 opacity-100

más de 800 ms o más.

Para revelaciones impulsadas por JavaScript, usa IntersectionObserver o whileInView de Framer Motion. Nunca uses window.addEventListener('scroll') — causa reflujos continuos y mata el rendimiento móvil.

B8. Realismo del contenido

Nunca publiques relleno. Estas son las señales de que una página fue generada en lugar de hecha.

Sin Lorem Ipsum. Escribe un borrador de copia real.
Sin "Juan Pérez". Usa nombres diversos y realistas.
Sin marcas de marcador de posición como "Acme Corp", "Nexus" o "SmartFlow". Inventa nombres contextuales y creíbles.
Sin números falsos redondos como 99.99%, 50%, $100.00. Usa datos orgánicos: 47.2%, $99.00, +1 (312) 847-1928.
Sin clichés de IA. Nunca "Elevar", "Sin fisuras", "Liberar", "Próxima generación", "Cambio de juego", "Sumergirse", "Tapiz" o "En el mundo de".
Encabezados en minúsculas, no en Título Mayúscula En Todo.
Voz activa. "No pudimos guardar tus cambios", no "Se cometieron errores".
Sin signos de exclamación en mensajes de éxito, y sin "¡Ups!" en errores. Sé directo: "Conexión fallida. Inténtalo de nuevo."
Avatares únicos por persona, y fechas de publicaciones de blog variadas.

B9. Estados

Cada elemento interactivo se envía con su conjunto completo de estados:

Hover — cambio de fondo, ligera escala o traducción
Activo — scale(0.98) o translateY(1px) para retroalimentación física
Foco — un anillo de foco visible. Requisito de accesibilidad, no opcional.
Carga — cargadores esqueléticos con la forma del diseño real, no spinners circulares
Vacío — una vista compuesta de "cómo empezar", nunca un panel en blanco
Error — en línea y específico. Nunca window.alert().

Sin enlaces muertos. Un botón que apunta a # está vinculado o deshabilitado visualmente. La página actual debe indicarse en la navegación.

B10. Requisitos de publicación

Cosas que se olvidan y hacen que una página se sienta inacabada:

Enlaces de política de privacidad y términos en el pie de página
Un 404 personalizado y con marca
Validación de formulario del lado del cliente para formato de correo electrónico y campos obligatorios
Un enlace para saltar al contenido para usuarios de teclado
Consentimiento de cookies donde la jurisdicción lo requiere
Un favicon con marca
<title>, meta descripción, og:image y etiquetas para compartir en redes sociales
Texto alternativo en cada imagen significativa
HTML semántico: <nav>, <main>, <article>, <aside>, <section>
Una forma de volver desde cada página

B11. Sección de revelación de lema (obligatoria)

Cada página de aterrizaje incluye una sección de tipo grande que indica el beneficio central o lema, separada del héroe. Se encuentra más abajo en la página como su propio momento, no apilada directamente debajo del héroe.

Copia

Mínimo dos líneas de texto.
Una declaración de beneficio o lema, escrita en la voz de A5, no un encabezado de sección genérico.

Tipografía

Tamaño text-4xl a text-6xl dependiendo del número de líneas, siguiendo la escala tipográfica de B1.
Ancho máximo limitado como el héroe, para que las líneas se rompan en puntos significativos según B5.

Animación

El texto comienza en un tono sutil y apagado, aproximadamente del 25 al 35% de opacidad del color de texto base del tema.
A medida que la sección se desplaza a la vista, cada palabra se transforma individualmente de ese tono apagado al color de texto completo, en orden de lectura.
Las palabras se activan una a la vez a medida que cruzan una línea de activación, no todo el bloque cambiando a la vez. La transición usa la curva de aceleración personalizada de B7, nunca una atenuación lineal.
Implementa con IntersectionObserver por palabra, o un solo oyente de desplazamiento limitado a través de requestAnimationFrame. Nunca un window.addEventListener('scroll') sin limitar.

Preguntar en tu IA favorita

Documentación