bear2u/my-skills

Guía de Páginas de Aterrizaje V2

Resumen

Esta habilidad permite la creación de páginas de aterrizaje distintivas y de alta conversión que combinan:

• Marco de Conversión Probado: 11 elementos esenciales de DESIGNNAS para altas tasas de conversión
• Calidad de Diseño Excepcional: Elecciones estéticas audaces que crean experiencias de marca inolvidables
• Código Listo para Producción: Next.js 14+ con ShadCN UI, TypeScript y optimización de rendimiento

Filosofía: Una página de aterrizaje debe convertir visitantes Y hacer que recuerden tu marca. Las páginas genéricas y con aspecto de plantilla fallan en ambos aspectos. Esta habilidad garantiza que tus páginas de aterrizaje sean funcionalmente efectivas y visualmente extraordinarias.

Cuándo Usar Esta Habilidad

Usa esta habilidad cuando los usuarios soliciten:

• Creación de páginas de aterrizaje, páginas de marketing o páginas de producto
• Sitios web promocionales basados en Next.js o React
• Páginas que necesiten convertir visitantes en clientes Y destacar visualmente
• Páginas de marketing profesionales con calidad de diseño excepcional
• Páginas de aterrizaje que eviten la estética genérica de "plantilla"
• Experiencias de marca que sean tanto optimizadas para conversión como memorables

Pensamiento de Diseño: Antes de Codificar

Antes de implementar cualquier página de aterrizaje, comprométete con una dirección estética AUDÁZ que se alinee con la marca y el producto:

1. Comprender el Contexto

• Propósito: ¿Qué problema resuelve este producto? ¿Quién es el público objetivo?
• Personalidad de Marca: ¿Esta marca es divertida, profesional, de lujo, minimalista, audaz, técnica?
• Industria: ¿Qué lenguaje visual espera esta industria (o deberíamos romperlo)?
• Diferenciación: ¿Qué hace que esta marca sea inolvidable? ¿Cuál es la ÚNICA cosa que los visitantes recordarán?

2. Elegir una Dirección Estética

Elige una dirección extrema y comprométete completamente. Ejemplos:

Minimalista y Refinado

• Diseños brutalmente limpios, generoso espacio en blanco
• Tipografía sofisticada con grandes contrastes de escala
• Paleta de colores monocromática o limitada (máximo 2-3 colores)
• Microinteracciones sutiles, transiciones elegantes
• Ejemplos: Productos de lujo, servicios profesionales, SaaS premium

Audaz y Maximalista

• Capas visuales ricas y complejas
• Animaciones dinámicas y efectos de scroll
• Mallas de gradiente, texturas y elementos superpuestos
• Paletas de colores vibrantes con alto contraste
• Ejemplos: Agencias creativas, entretenimiento, marcas juveniles

Retro-Futurista

• Elementos nostálgicos con ejecución moderna
• Patrones geométricos, acentos de neón
• Efectos glitch, scanlines, texturas de grano
• Fuentes monoespaciadas o display con carácter
• Ejemplos: Gaming, startups tecnológicas, herramientas creativas

Orgánico y Natural

• Formas suaves y fluidas y gradientes
• Colores inspirados en la naturaleza (tonos tierra, pasteles)
• Animaciones suaves que imitan el movimiento natural
• Esquinas redondeadas, sombras suaves
• Ejemplos: Bienestar, sostenibilidad, comida

Editorial y Revista

• Fuerte jerarquía tipográfica
• Diseños asimétricos que rompen la cuadrícula
• Imágenes grandes e impactantes
• Uso audaz del espacio en blanco y el espacio negativo
• Ejemplos: Plataformas de contenido, medios, educación

Brutalista y Crudo

• Diseños no convencionales, "fealdad" intencional
• Fuentes del sistema o tipografía deliberadamente básica
• Alto contraste, color limitado
• Mínimas o ninguna animación
• Ejemplos: Arte, moda, marcas anti-establishment

CRÍTICO: Elige UNA dirección clara. Tanto el maximalismo audaz como el minimalismo refinado funcionan; la clave es la intencionalidad, no la intensidad. Ejecuta tu dirección elegida con precisión y consistencia en los 11 elementos.

3. Definir tu Sistema de Diseño

Antes de codificar, define estas decisiones centrales:

Opciones de Tipografía

• Fuente Display: Elige algo distintivo y memorable (NO Inter, Roboto, Arial o fuentes del sistema)
  • Considera: Space Grotesk, Clash Display, Cabinet Grotesk, Syne, DM Serif Display, Zodiak, Fraunces, Archivo Black, Unbounded, Outfit
  • O usa Google Fonts con criterio: Playfair Display, Crimson Pro, Libre Baskerville, Epilogue, Plus Jakarta Sans
  • NUNCA te conformes con opciones comunes: varía las fuentes entre diferentes proyectos
• Fuente del Cuerpo: Elección refinada y legible que complemente la fuente display
  • Considera: DM Sans, General Sans, Switzer, Geist, Manrope, Karla, Work Sans
• Escala: Establece una jerarquía clara (por ejemplo, H1: 4rem → H2: 3rem → H3: 2rem → Cuerpo: 1rem)

Paleta de Colores

• Color Dominante: El color primario de tu marca (60% de uso)
• Color de Acento: Color de alto contraste para CTA (10% de uso)
• Paleta Neutra: Grises o tonos tierra (30% de uso)
• Estrategia de Fondo: ¿Sólido, degradado, textura o patrón?
• Definir como variables CSS para consistencia

Estrategia de Movimiento

• Carga de Página: Revelaciones escalonadas con animation-delay para elementos del héroe
• Interacciones de Scroll: ¿Fade-ups, parallax o animaciones activadas por scroll?
• Estados de Hover: ¿Escala sutil, cambio de color o transformaciones dramáticas?
• Animaciones de CTA: ¿Cómo atraen la atención los botones sin ser molestos?

Enfoque Espacial

• Estilo de Diseño: ¿Centrado y simétrico? ¿Asimétrico y dinámico? ¿Rompiendo la cuadrícula?
• Sistema de Espaciado: ¿Ajustado y denso? ¿Generoso y aireado?
• Flujo de Secciones: ¿Apilado tradicional? ¿Diagonal? ¿Superpuesto?

El Marco de los 11 Elementos Esenciales

Toda página de aterrizaje efectiva debe incluir estos 11 elementos esenciales. Están basados en el marco probado de DESIGNNAS para páginas de aterrizaje de alta conversión.

Cada elemento tiene DOS requisitos:

1. Requisito funcional (para conversión) - Debe incluirse
2. Excelencia en diseño (para ser memorable) - Debe ser distintivo y hermoso

Guía de Diseño Elemento por Elemento

1. URL con Palabras Clave

Funcional: Estructura de URL descriptiva y optimizada para SEO Diseño: N/A (enfocado en SEO)

2. Logotipo de la Empresa (Encabezado)

Funcional: Identidad de marca colocada de manera prominente (arriba a la izquierda) Excelencia en Diseño:

• Considera un logotipo animado al cargar la página
• Encabezado fijo con transiciones suaves de scroll
• Variación de la marca del logotipo para diferentes estados de scroll
• Fondo del encabezado: transparente → sólido con desenfoque de fondo
• Tipografía de navegación que coincida con la elección de la fuente display

3. Título y Subtítulo Optimizados para SEO (Héroe)

Funcional: Propuesta de valor clara con palabras clave Excelencia en Diseño:

• Tipografía: Hazlo MASIVO e inolvidable (4rem-6rem+)
• Usa tu fuente display distintiva aquí
• Considera texto degradado, texto contorneado o sombras de texto para impacto
• Anima las palabras del título con fade-in escalonado (animation-delay)
• El subtítulo debe ser el 50% del tamaño del título, con diferente peso o fuente
• Añade ritmo visual con saltos de línea y espaciado

4. CTA Principal (Héroe)

Funcional: Botón de llamada a la acción principal en la sección héroe Excelencia en Diseño:

• Hazlo IMPOSIBLE de pasar por alto: tamaño, contraste de color, posición
• Evita rectángulos aburridos: considera formas de píldora, bordes únicos o formas geométricas
• Añade microinteracciones: escala al pasar el ratón, expansión de sombra, cambio de color
• Considera CTA duales con jerarquía primaria/secundaria
• Animación de entrada que atraiga la mirada (retraso después del título)
• Añade señales visuales: flechas, iconos o efectos pulsantes

5. Prueba Social (Héroe)

Funcional: Reseñas, calificaciones, estadísticas de usuarios Excelencia en Diseño:

• Los números deben ser ENORMES y animados al cargar (efecto de cuenta ascendente)
• Tarjetas de estadísticas con fondos degradados o bordes sutiles
• Avatares de clientes en círculos superpuestos
• Calificaciones con estrellas con estilo personalizado (no estrellas amarillas predeterminadas)
• Logos de "Presentado en" con espaciado y tratamiento de opacidad adecuados
• Considera testimonios giratorios o carrusel de prueba social animado

6. Imágenes o Videos (Sección de Medios)

Funcional: Demostración visual del producto/servicio Excelencia en Diseño:

• CRÍTICO: Nunca uses imágenes placeholder o genéricas
• Capturas de pantalla del producto con maquetas de dispositivos (marcos de portátil/teléfono)
• Añade profundidad: sombras, reflejos, efectos de inclinación 3D
• Considera: Capturas de pantalla flotantes, efectos de scroll parallax, fondos de video
• Animaciones de revelación de imágenes al hacer scroll (fade-up, slide-in)
• Para videos: Diseño de botón de reproducción personalizado, resplandor de fondo ambiental
• Diseños de cuadrícula: Asimétricos, superpuestos o estilo bento box

7. Beneficios/Características Principales

Funcional: 3-6 ventajas clave con iconos Excelencia en Diseño:

• Iconos: Diseñados a medida o seleccionados cuidadosamente (NO iconos genéricos de línea)
• Considera: Rellenos degradados, iconos animados al pasar el ratón, ilustraciones en 3D
• Variaciones de diseño de tarjetas: glassmorphism, neumorphism, bordes degradados, sombras sutiles
• Animación escalonada mientras el usuario se desplaza hasta esta sección
• Diseño asimétrico en lugar de la aburrida cuadrícula de 3 columnas
• Elementos de fondo: patrones sutiles, degradados o formas decorativas
• Tipografía: Títulos de características en tu fuente display, audaces y prominentes

8. Testimonios de Clientes

Funcional: 4-6 reseñas auténticas con fotos Excelencia en Diseño:

• Tratamiento de fotos: Avatares circulares con bordes degradados o formas únicas
• Fondos de tarjetas: Degradados sutiles, vidrio esmerilado o sombras elevadas
• Comillas: Sobredimensionadas, decorativas o con estilo personalizado
• Diseño: Cuadrícula de mampostería, carrusel o vertical escalonado
• Estrellas de calificación: Colores personalizados que coincidan con la paleta de la marca
• Efectos al pasar el ratón: Elevar, expandir o brillar
• Nombres y títulos de clientes: Tipografía refinada

9. Sección de Preguntas Frecuentes (FAQ)

Funcional: 5-10 preguntas comunes con interfaz de acordeón Excelencia en Diseño:

• Animaciones de acordeón: Expandir/colapsar suave con easing
• Iconos: Chevrones personalizados o signos de suma/menos con rotación
• Estados de hover en las preguntas
• Tipografía: Preguntas en negrita o diferente peso de fuente
• Considera: Diseño de dos columnas en escritorio, pares de preguntas y respuestas lado a lado
• Fondo: Cambio de color sutil respecto a la sección anterior
• Espaciado: Relleno generoso dentro de los elementos del acordeón

10. CTA Final

Funcional: Llamada a la acción inferior para una segunda oportunidad de conversión Excelencia en Diseño:

• Hazlo un momento HÉROE: Esta es la última oportunidad
• Sección de ancho completo con fondo dramático (degradado, patrón o color)
• Botón de CTA aún MÁS GRANDE que el CTA del héroe
• Añade urgencia: Temporizadores de cuenta regresiva, lugares limitados, indicadores de escasez
• Rodéalo de texto convincente y microbeneficios
• Animación: Fondo parallax, elementos flotantes o efectos activados por scroll
• Considera: Combinación de campo de correo electrónico + botón para boletín/lista de espera

11. Información de Contacto/Páginas Legales (Pie de Página)

Funcional: Pie de página con información completa, enlaces legales Excelencia en Diseño:

• Diseño de múltiples columnas con clara jerarquía de información
• Iconos sociales: Efectos de hover (cambio de color, escala o rotación)
• Registro al boletín: Campo de entrada con estilo y botón en línea
• Tipografía: Más pequeña pero aún legible (14-16px)
• Fondo: Más oscuro que el cuerpo o color distintivo
• Separador del contenido: Línea de degradado sutil o divisor decorativo
• Barra inferior: Aviso de copyright y enlaces legales con espaciado adecuado

Crítico: Todos los 11 elementos deben incluirse en cada página de aterrizaje. Sin excepciones.

Para explicaciones detalladas de cada elemento, consulta references/11-essential-elements.md.

Pautas de Estética de Diseño

Excelencia Tipográfica

• NUNCA uses fuentes genéricas: Inter, Roboto, Arial, Helvetica, system-ui
• Las fuentes display deben ser distintivas y memorables
• Combínalas con criterio: Fuente display para encabezados + fuente refinada para el cuerpo
• Escala dramáticamente: Crea una jerarquía clara con saltos de tamaño (no diferencias sutiles)
• Espaciado entre letras: Ajusta para fuentes display (a menudo necesita tracking más ajustado)
• Altura de línea: Display = 1.1-1.2, Cuerpo = 1.6-1.8

Coherencia de Color y Visual

• Define variables CSS para todos los colores (mantén la consistencia)
• El color dominante debe aparecer en todas partes (no solo en CTA)
• Los colores de acento deben tener suficiente contraste para accesibilidad (mínimo WCAG AA)
• Evita: Degradados púrpura sobre blanco (estética de IA sobreutilizada)
• Fondos: Crea atmósfera con degradados, mallas, patrones o texturas
  • Mallas de degradado: Degradados suaves multicolor
  • Texturas de ruido: Grano sutil para profundidad
  • Patrones geométricos: Puntos, líneas o formas a baja opacidad
  • Transparencias en capas: Secciones de color superpuestas

Movimiento y Animación

• Carga de página: Una entrada bien orquestada con revelaciones escalonadas
  • Las palabras del título del héroe aparecen secuencialmente (animation-delay: 0ms, 100ms, 200ms)
  • El subtítulo sigue (retraso: 300ms)
  • El CTA aparece al final (retraso: 500ms) con énfasis
• Animaciones de scroll: Las secciones aparecen al entrar en la ventana gráfica
  • Usa Intersection Observer API o los activadores de scroll de Framer Motion
  • Las tarjetas aparecen escalonadamente (cada una con un retraso incremental)
• Estados de hover: Sorprende y deleita
  • Botones: Escalar, expandir sombra, cambiar color
  • Tarjetas: Efecto de elevación con sombra
  • Imágenes: Zoom sutil o parallax
• Rendimiento: Prefiere animaciones CSS sobre JavaScript
  • Usa transform y opacity (aceleradas por GPU)
  • Evita animar width, height, top, left

Composición Espacial y Diseño

• Rompe la cuadrícula: No te limites a diseños centrados y simétricos de forma predeterminada
• Asimetría: Un lado con texto grande, el otro lado visual
• Elementos superpuestos: Capas de secciones para profundidad
• Flujo diagonal: Divisores en ángulo entre secciones
• Amplio espacio en blanco O densidad controlada (elige uno y comprométete)
• Pensamiento en el eje Z: Usa sombras, desenfoque y capas para profundidad

EVITA las Estéticas Genéricas de IA

Estos patrones hacen que las páginas de aterrizaje parezcan "generadas por IA" y olvidables:

NO HAGAS:

• ❌ Fuentes Inter/Roboto/Arial
• ❌ Degradados púrpura sobre fondos blancos
• ❌ Diseños perfectamente centrados y simétricos todo el tiempo
• ❌ Iconos genéricos de línea
• ❌ Calificaciones con estrellas amarillas predeterminadas
• ❌ Botones rectangulares aburridos sin personalidad
• ❌ Fondo blanco sin interés visual
• ❌ Cuadrículas de características de tres columnas cliché
• ❌ Fotos de stock de personas señalando portátiles

SÍ HAZ:

• ✅ Elige fuentes distintivas que coincidan con la personalidad de la marca
• ✅ Comprométete con una paleta de colores única (¡no siempre púrpura!)
• ✅ Crea diseños inesperados con asimetría
• ✅ Diseña o selecciona iconos con carácter
• ✅ Personaliza todos los elementos de la interfaz para que coincidan con la estética
• ✅ Añade texturas de fondo, degradados o patrones
• ✅ Varía los diseños en las secciones
• ✅ Usa capturas de pantalla del producto, ilustraciones personalizadas o fotografía auténtica

Requisitos de la Pila Tecnológica

Cuando

…

[truncado para traducción]