thecatthatflies/landing-page-design

Diseño de páginas de aterrizaje

Una página de aterrizaje tiene un solo trabajo: conseguir que un desconocido en particular entienda qué es esto, lo crea y dé el siguiente paso. Gana atención con una idea distintiva y la mantiene con hechos claros. Los modelos fallan de dos maneras opuestas. La mayoría produce la página intercambiable: un titular vago, tres tarjetas con iconos, testimonios inventados y una pared de logotipos, en un estilo elegido para que parezca actual. Cuando se les pide que eviten eso, persiguen "señales de IA" e intercambian un conjunto de recursos modernos por otro. La solución para ambos es la misma: partir del tema, decir algo específico y verdadero, y darle a la página una idea que solo este producto pueda poseer.

Aplica los principios jerarquizados de interface-guidelines (todos pueden usarlo > dice la verdad > dice lo que significa > la respuesta llega primero > los errores son recuperables > se mantiene firme > lo posible es visible > convención > refinamiento). Si ese skill está instalado, lee primero su SKILL.md.

Brief

Responde estas preguntas en menos de 20 líneas antes de cualquier maquetación. Si el usuario no está, indica las suposiciones y continúa.

• ¿Quién llega, desde dónde, sabiendo qué? Un clic en un anuncio, una búsqueda del problema, un enlace de un amigo, un inversor. Su conocimiento previo determina cuánto debe explicar la primera pantalla.
• El siguiente paso único y lo que le cuesta: correo electrónico, tarjeta, una llamada, una descarga. Todo lo demás en la página es secundario.
• La afirmación: una frase que diga qué es, para quién y qué cambia para ellos. Si no puedes escribirla, la página no está lista para diseñarse.
• Pruebas disponibles: clientes reales, citas con permiso, números con fuente y fecha, una demo, un nivel gratuito. Enumera lo que existe. La falta de pruebas es una brecha que hay que señalar, no llenar.
• Precio: público, desde, casos representativos o realmente desconocido.
• Estado de la marca: ¿existe el resultado de brand-identity (tokens, logotipo, tipografía, tono)? Si no, ejecútalo primero, o trabaja a partir de una dirección provisional e indícalo.
• El material propio del tema: cómo son realmente el producto, sus usuarios y su mundo (sección "Dirección artística").
• Lector agente: ¿los asistentes compararán este producto, cotizarán su precio o registrarán a alguien? Asume que sí.
• Restricciones: pila tecnológica, CMS, presupuesto de rendimiento, idiomas, aspectos legales (afirmaciones reguladas, ley de precios, consentimiento).

Dirección artística

La familia no prescribe un estilo. Lo audaz, lo extraño, lo tranquilo y lo maximalista están permitidos. Lo que se requiere es que el estilo provenga de una decisión sobre este tema, y que no interfiera con lo esencial (legible, rápido, operable). Haz este paso por escrito antes del código; references/art-direction.md contiene el método y ejemplos resueltos.

1. Recopila el material del tema [J]. Enumera de 10 a 20 sustantivos concretos del producto y su mundo: objetos que maneja, lo que los usuarios crean con él, lugares, artefactos, sonidos, texturas, el lenguaje visual propio del dominio (una tabla de mareas, una ficha de receta, un trazado de circuito, una etiqueta de envío). Las palabras genéricas ("velocidad", "innovación", "fluido") no cuentan.
2. Encuentra el concepto [J]. Una frase que convierta ese material en una idea de página: "la página es la propia salida del producto", "una guía de campo", "un panel de salidas para tus despliegues". Aplica la prueba de intercambio: si un competidor pudiera usar el concepto sin cambios, reescríbelo.
3. Elige un movimiento memorable [J]. Un elemento carga con el concepto y recibe el presupuesto de audacia: un momento real del producto mostrado en grande, una demo funcional, un gesto tipográfico de la marca, un objeto que se pueda tocar, una fotografía que solo esta empresa podría tomar. Todo lo demás sirve a la lectura. Una página con cinco movimientos distintivos no tiene ninguno.
4. Compón [J]. Decide la ruta de lectura de cada pantalla: dónde cae el ojo primero, segundo, tercero, y qué tamaño y contraste lo hacen posible. Define la cuadrícula y luego rómpela una vez, a propósito. Diseña la composición para teléfono como un diseño propio, no como un escritorio colapsado.
5. Presenta dos o tres direcciones en unas pocas líneas cada una (concepto, movimiento distintivo, cómo se usan los tokens de marca, el riesgo), elige una y explica por qué. Las direcciones deben diferir en idea, no solo en paleta.

Límite de la marca. Los colores, la tipografía, el logotipo, el tono y los tokens provienen de brand-identity (su tokens.css o tokens.json). La dirección artística decide cómo esta página los utiliza: escala, recorte, densidad, ritmo, imágenes, movimiento. No agregues nuevos colores de marca, redibujes el logotipo ni cambies las tipografías para una sola página. Si la página necesita algo que la marca no tiene (un estilo de ilustración, una dirección fotográfica), anótalo como una brecha de marca y propónselo al propietario de la marca.

El gusto no es evidencia. Eliminar degradados, cejas o una fuente en particular no mejora una página: las pruebas ciegas del propio skill de gusto ganaron solo 4 de 16 rondas contra ningún skill, a pesar de tener cero fallos de detección, y sus jueces modelo seguían prefiriendo páginas más ricas y llenas de recursos de plantilla [E, solo jurados modelo]. Así que juzga las direcciones por la prueba de intercambio y la tarea del lector, no por una lista de recursos prohibidos.

Reglas

Mensaje

• La primera pantalla indica qué es, para quién y el siguiente paso, en palabras que un desconocido entiende [E]. Los visitantes deciden irse en los primeros 10 a 20 segundos (Liu, White, Dumais 2010, vía NN/g), y la primera pantalla recibe aproximadamente el 57% del tiempo de visualización (NN/g 2018, n=120). Una línea ingeniosa puede liderar, pero una línea descriptiva simple debe estar justo al lado.
• El h1 es la afirmación, no el nombre de la marca ni un saludo [S]. Es la raíz del esquema de la página para lectores de pantalla y agentes (WCAG 2.4.6).
• Lo concreto supera a lo promocional [E]. El texto conciso, escaneable y objetivo obtuvo un 124% más de usabilidad que el texto promocional (Nielsen 1997, n=51; antiguo, pero la dirección se ha mantenido). Di "Envía facturas desde tus hojas de horas", no "Potencia tu flujo de trabajo".
• Cada sección hace una afirmación y muestra su prueba; elimina las secciones sin una [J]. Escribe la página como una lista de afirmaciones antes de diseñarla (una idea tomada del skill de gusto).
• Muestra el producto en sí [J]: pantallas reales, resultados reales, fotografías reales. Una abstracción dibujada de "productividad" no dice nada y una interfaz inventada tergiversa el producto.
• La gente se desplaza, así que evita los falsos límites [P]. Debajo de la primera pantalla, la atención disminuye pero no desaparece (NN/g 2018). Un héroe a sangre completa que parece completo oculta todo lo que hay detrás.

Pruebas y honestidad

• Solo pruebas reales [S]. Las reseñas y testimonios falsos o generados por IA son ilegales en EE. UU. (FTC 16 CFR Part 465, 2024), y los respaldos deben reflejar una experiencia real (Guías de Respaldos de la FTC, 16 CFR Part 255). Logotipos solo con permiso y solo de clientes reales.
• Cuando falten pruebas, márcalo [J]. Usa marcadores de posición visibles como {{quote: cliente, nombre, rol}} y enuméralos en la entrega. Nunca escribas un falso convincente para llenar el vacío.
• Los números llevan fuente y fecha [J]. "12,000 equipos" necesita "a marzo de 2026". Un número que nadie puede verificar es, como mucho, decoración.
• Sin urgencia fabricada [E]. Las cuentas atrás falsas y la escasez ficticia se encontraban entre los patrones engañosos encontrados a gran escala (Mathur et al. 2019), y también engañan a los agentes: seis agentes web cayeron en patrones oscuros el 41% de las veces en promedio (Ersoy et al. 2025, preprint).

Precios

• Muestra los precios [P]. La falta de precios lleva a los compradores hacia la competencia (Nielsen 2002). Cuando el precio varía realmente, muestra casos representativos con sus precios (Nielsen 2006).
• Los precios son texto: cantidad, moneda, período y lo que incluye, nunca solo dentro de una imagen [J]. La comparación de planes es una <table> real con características en palabras.
• Indica el total que pagará un comprador, incluyendo las tarifas obligatorias [S]. La ley de EE. UU. lo exige para entradas a eventos en vivo y alojamiento a corto plazo (Regla de la FTC sobre Tarifas Injustas o Engañosas, 2025); en otros lugares es una práctica honesta. Las afirmaciones de descuento en la UE deben mostrar el precio más bajo de los 30 días anteriores (Directiva 98/6/CE, Art. 6a).
• Los alternadores de facturación muestran el estado y el valor por defecto [J]. Si el precio anual se muestra por defecto, di "facturado anualmente" junto al número.

Siguiente paso

• Una acción principal, repetida en los puntos de decisión, etiquetada con lo que sucede [J]: "Inicia una prueba de 14 días, sin tarjeta", "Únete a la lista de espera". Las acciones secundarias parecen secundarias.
• Los formularios de lista de espera y registro piden el mínimo y dicen lo que sigue [J]: qué obtienen, cuándo y con qué frecuencia les enviarás correos electrónicos. Las casillas de consentimiento comienzan sin marcar. Pasa los flujos más largos a form-design.
• El éxito es un estado, no un mensaje emergente [J]. Después de enviar, reemplaza el formulario con lo que sucedió y qué esperar.

Velocidad y robustez

• Cumple con las Métricas Web Esenciales de Google en el percentil 75: LCP 2.5 s, INP 200 ms, CLS 0.1 [S]. Estos son objetivos establecidos en parte por su alcanzabilidad, no umbrales de percepción humana. Las páginas móviles más rápidas se correlacionaron con una mayor conversión minorista en un estudio encargado por Google (Deloitte 2020) [E, correlacional].
• El héroe suele ser el elemento LCP [S]: un <img> real con width, height y fetchpriority="high", nunca con carga diferida, nunca un fondo CSS detrás de texto que espera a que se ejecute el script (web.dev).
• El contenido es visible sin JavaScript y sin movimiento [J]. Las revelaciones por desplazamiento comienzan desde el estado visible y animan solo cuando son compatibles; con movimiento reducido, nada se oculta. Los agentes y las capturas de pantalla, de lo contrario, obtienen espacios en blanco.
• Sin carruseles de avance automático [P]. Los héroes giratorios ocultaban la oferta a los usuarios en las pruebas (Nielsen 2013), y el movimiento de más de 5 segundos necesita un control de pausa (WCAG 2.2.2).

El lector agente

• Los hechos que un asistente citará son texto en la página: qué es, precio, límites del plan, plataformas, condiciones de la prueba, contacto [J]. Los agentes comparan productos a partir de exactamente estos datos.
• Los datos estructurados y las metaetiquetas reflejan la página visible y no añaden nada [S]: title, meta descripción, Open Graph y JSON-LD (Organization, SoftwareApplication o Product) con el mismo precio y nombre que muestra la página. El marcado añadido no ayudó a los agentes en las pruebas (Affora, en interface-guidelines).
• Sin texto dirigido a agentes de IA, oculto o visible [J]. Se lee como inyección de instrucciones, y el texto oculto es una señal de spam.

Orden de construcción

1. Brief, luego la lista de afirmaciones y pruebas, con marcadores de posición para las brechas.
2. Dirección artística: material del tema, concepto, un movimiento, dos o tres propuestas, elección.
3. Esqueleto de texto: secciones en orden, cada una con su afirmación, prueba y acción.
4. HTML semántico con texto real: un h1, puntos de referencia, encabezados que esbocen el argumento, tabla de precios, formularios con etiquetas.
5. Tokens de marca de brand-identity, luego maquetación y el movimiento distintivo.
6. Estados: validación de formularios, éxito, error, agotado o lista de espera cerrada, sin JS, movimiento reducido.
7. Imágenes, fuentes y scripts dentro del presupuesto de rendimiento.
8. Verificar, corregir como máximo dos veces, entregar.

Verificar

• node <interface-guidelines>/scripts/audit.mjs <dist|url> --out audit-output, luego observa cada captura de pantalla en los tres anchos, en modo claro y oscuro si ambos existen.
• Prueba de primera pantalla: muestra la captura de la primera pantalla a alguien (o a un agente nuevo sin contexto) y pregúntale qué es, para quién es y qué hacer a continuación. Las respuestas incorrectas significan que el mensaje falló, por muy bien que se vea.
• Prueba de intercambio: reemplaza el nombre del producto por el de un competidor. Si la página sigue funcionando, el concepto y el texto son genéricos.
• Prueba de agente: a partir solo de la instantánea de accesibilidad, lee el precio y los límites de cada plan y completa el registro. Compara con el JSON-LD.
• Velocidad: Lighthouse o PageSpeed Insights en un perfil móvil limitado; datos de campo (CrUX) si la página está en vivo.
• Robustez: carga con JavaScript deshabilitado y con prefers-reduced-motion: reduce. No puede faltar nada importante.
• Auditoría de pruebas: cada cita, logotipo, número y calificación rastreados hasta una fuente, o mostrados como un marcador de posición señalado.

Trampas

• Testimonios inventados, paredes de logotipos de empresas que no son clientes, recuentos de usuarios o calificaciones inventados.
• Un titular que podría estar en cualquier producto ("Construye el futuro del trabajo"), con la explicación real tres pantallas más abajo.
• Perseguir o prohibir "señales de IA" en lugar de decidir a partir del tema. Una nueva lista de reemplazos modernos es la siguiente señal.
• Cuotas de decoración: movimiento en todas partes, una imagen en cada sección, un diseño diferente por sección por el simple hecho de hacerlo.
• Texto del héroe o CTA oculto hasta que se activa una animación de desplazamiento; texto de "revelación" con baja opacidad que no cumple con el contraste hasta entonces.
• Precio solo en una imagen, o "Contáctenos" sin indicación de escala.
• Redefinir los colores de la marca o redibujar el logotipo para una página en lugar de usar los tokens de brand-identity.
• Un alternador de precios que muestra silenciosamente cifras de pago anual por mes.
• Una instrucción a los asistentes de IA oculta en la página.

Referencias

Archivo	Leer cuándo
references/art-direction.md	Siempre, antes de elegir un estilo: método, ejemplos resueltos, composición, uso de tokens de marca, evaluación de direcciones
references/structure-and-copy.md	Al escribir la página: patrones de sección por tipo de página, titulares, pruebas, páginas de precios, listas de espera, formularios
references/performance-and-agents.md	Al construir y publicar: Métricas Web Esenciales, imágenes, fuentes, movimiento, metadatos, datos estructurados, sin JS
references/sources.md	Antes de citar un número, o cuando alguien pregunte por qué existe una regla