| name | Landing Page Architecture |
| description | HACER CUMPLIR estructura de página de aterrizaje enfocada en conversión: Gancho → Problema → Solución → Prueba → Acción. Prevenir diseños genéricos generados por IA con gradientes aleatorios, texto lorem ipsum y sin CTA claro. Cada sección debe ganarse su lugar moviendo al visitante hacia una acción específica. Activadores: "build (a|a) landing page", "create (a|a) homepage", "design (a|a) marketing site", "build (a|a) portfolio site".
|
| category | ui-ux |
| version | 3.0.0 |
| last_updated | 2026-06-28T00:00:00.000Z |
| stacks | ["React 19.2","Next.js 16","Vue","Nuxt","Astro"] |
| related_skills | ["responsive-layout-math","accessibility-audit-protocol","performance-budgets-and-cwv","component-architecture-patterns"] |
| lang | es |
| direction | ltr |
| source_version | 3.0.0 |
| translated_at | 2026-06-29T00:00:00.000Z |
Arquitectura de Página de Aterrizaje Sin Mediocridad
IDENTIFICAR: Cuándo activarse
Activar al crear cualquier punto de entrada público:
- Página de aterrizaje de producto
- Página de inicio de marketing
- Página de registro SaaS
- Sitio de portafolio
- Página de lista de espera/prelanzamiento
PRINCIPIO FUNDAMENTAL
Una página de aterrizaje es un embudo de conversión, no un folleto. Cada sección DEBE ganarse su lugar moviendo a los visitantes hacia una acción específica.
EL EMBUDO DE CONVERSIÓN: Construir en Este Orden
┌─────────────────────────────────────────┐
│ 1. NAV Logo | Enlaces | [CTA] │
├─────────────────────────────────────────┤
│ 2. HERO H1 + H2 + CTA + Visual │
├─────────────────────────────────────────┤
│ 3. PRUEBA SOCIAL Logos | Testimonios │
├─────────────────────────────────────────┤
│ 4. PROBLEMA El dolor que resuelves │
├─────────────────────────────────────────┤
│ 5. SOLUCIÓN 3-6 funcionalidades │
├─────────────────────────────────────────┤
│ 6. CÓMO FUNCIONA Proceso de 3 pasos │
├─────────────────────────────────────────┤
│ 7. PRECIOS Niveles (si aplica) │
├─────────────────────────────────────────┤
│ 8. CTA FINAL Igual que el CTA Hero │
├─────────────────────────────────────────┤
│ 9. FOOTER Enlaces, copyright │
└─────────────────────────────────────────┘
EJECUTAR: Reglas Sección por Sección
Sección 1: Navegación
IZQUIERDA: Logo
CENTRO: 3-5 enlaces (Funcionalidades, Precios, Docs, etc.)
DERECHA: Un botón CTA ("Registrarse", "Comenzar")
COMPORTAMIENTO: Fijo al desplazar
Sección 2: Hero: LOS CUATRO Elementos Requeridos
SIEMPRE incluir:
1. Titular H1: Propuesta de valor. UNA oración. Sin jerga.
"Despliega en segundos, no en horas" supera a "Aprovechando infraestructura nativa de la nube"
2. Subtitular H2: Detalle de apoyo. UNA oración. Aclara H1.
3. Botón CTA principal: Alto contraste. UNA acción. "Comenzar prueba gratuita"
4. Elemento visual: Captura del producto, ilustración o video demo.
NO una forma abstracta aleatoria o gradiente.
REQUISITO DE RENDIMIENTO (imagen hero = elemento LCP):
