Diseño de Landing Page

Una landing page no es una página de inicio. Una página de inicio sirve múltiples intenciones. Una landing page gana con una 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 se estructura. La parte B es el sistema visual no negociable. Trabaja en la parte A antes de tocar la B.

Alcance

Aplicar a todo el trabajo de UI web: landing pages, 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 indicación 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 redesign-existing-projects (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. Recopilación

Reúne estos elementos antes de diseñar o escribir. Pregunta solo por lo que falta y pregunta en un solo 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 objeciones principales, 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 de demostración, GIFs del producto
Garantías, términos de reembolso, términos de cancelación

Restricciones

Tono de marca: informal o profesional
Dirección de diseño: minimalista editorial, 3D divertido, interfaz 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 (obligatorio)

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 breve
Imagen principal, captura de pantalla del producto o video, o una ilustración llamativa

Mitad de la página (el argumento) 6. Problema a solución, una sección 7. Beneficios, de tres a cinco, orientados a 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, cancela en cualquier momento, garantía 12. CTA final, idéntica a la superior

Incluye la sección obligatoria de revelación de eslogan 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 layout

Elige uno y di por qué.

Tipo	Usar cuando
A. Héroe clásico más secciones	El producto se entiende a partir de 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 minimalista	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 CTAs 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 tus informes semanales de 4 horas a 15 minutos"

Reduce el riesgo. Elige al menos uno: prueba gratuita, plan gratuito, sin tarjeta de crédito, cancela 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 arriba para ofertas de alta fricción. Coloca la prueba directamente al lado de la afirmación que respalda.

A5. Redacción de textos

Fórmulas de titulares

"{Resultado} sin {dolor}"
"El {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 layout en un solo clic.

Nota: las reglas de redacción en B1 aún se 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
Pruebas
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 solo de campañas publicitarias 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 claro y una meta descripción, enlaces internos desde la página de inicio y las páginas de características, y el FAQ en forma de preguntas y respuestas simples para AEO. Agrega esquema de FAQ si es apropiado.

A8. Errores comunes

Demasiados CTAs sobre el pliegue
Propuesta de valor vaga: "optimizar", "mejorar"
Una lista grande de características sin resultados
Pruebas enterradas al final
Layout 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 indicación lo solicite explícitamente. Geist Mono está permitido junto con una fuente principal solo para código, datos o UI numérica donde se requiera funcionalmente una monoespaciada.

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

Reglas de redacción

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

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

Escala tipográfica

Resuelve siempre los tamaños de fuente a la escala de tipos 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 de forma independiente en otro lugar de una auditoría. El seguimiento y la altura de línea solo se pueden ajustar dentro del valor que el paso coincidente ya proporciona, para que las dos reglas nunca se contradigan.

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

Solo usa los valores de radio de Tailwind.

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

radio interior = radio exterior − espacio

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

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

B4. Bordes y fondos

Nunca apliques un borde a solo un lado de una tarjeta. Los bordes van alrededor de todo o no van.
Nunca uses degradados en los 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.

Layout

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

B6. Iconos

Usa: Phosphor, Solar o Iconamoon.

Nunca uses: Material Icons, Material Symbols.

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

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

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

Navegación de isla fluida

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.

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

Expansión del modal. El menú se abre como una superposición de pantalla completa 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 un suave y pesado desvanecimiento hacia arriba:

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

durante 800ms o más.

Para revelaciones controladas 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 envíes 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 relleno como "Acme Corp", "Nexus" o "SmartFlow". Inventa nombres contextuales y creíbles.
Sin números redondos falsos 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", "Cambiador de juego", "Profundizar", "Tapiz" o "En el mundo de".
Titulares en minúsculas de oración, no Título De Mayúsculas En Todo.
Voz activa. "No pudimos guardar tus cambios", no "Se cometieron errores".
Sin signos de exclamación en mensajes de éxito, y sin "¡Vaya!" 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, escala ligera o traslación
Activo — scale(0.98) o translateY(1px) para retroalimentación física
Enfoque — un anillo de enfoque visible. Requisito de accesibilidad, no opcional.
Carga — esqueletos cargadores con la forma del layout 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á enlazado o visualmente deshabilitado. La página actual debe indicarse en el menú de navegación.

B10. Requisitos de envío

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 requiera
Un favicon con marca
Etiquetas <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 regresar desde cada página

B11. Sección de revelación de eslogan (obligatorio)

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

Texto

Mínimo dos líneas de texto.
Una declaración de beneficio o eslogan, escrita con la voz de A5, no un título 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 base del texto del tema.
A medida que la sección entra en el viewport, cada palabra transiciona individualmente desde ese tono apagado al color completo del texto, 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 se voltea a la vez. La transición usa la curva de easing personalizada de B7, nunca un desvanecimiento lineal.
Implementar con IntersectionObserver por palabra, o un solo listener de desplazamiento limitado a través de requestAnimationFrame. Nunca un throttled sin requestAnimationFrame.

Esta habilidad es parte de una suite más grande. Para el contexto completo, consulta los repositorios de la organización.

Preguntar en tu IA favorita

Documentación