Habilidad de Página de Aterrizaje para Startups
Categoría: SaaS / Startup Genera una página de aterrizaje de startup de una sola página y alta conversión: héroe, funciones, prueba social, precios y llamado a la acción. El objetivo es comunicar el valor en 30 segundos y obtener el correo electrónico.
Metadatos
Nombre: startup-landing Descripción: Página de aterrizaje de startup de una sola página: héroe, funciones, prueba social, precios y CTA. Palabras clave de activación: "startup landing", "marketing page", "product launch", "SaaS landing", "landing page"
Entradas y Parámetros
| Parámetro | Tipo | Obligatorio | Por Defecto |
|---|---|---|---|
product_name | string | ✓ | — |
tagline | string | ✓ | — |
description | string | ✓ | — |
has_pricing | boolean | ✓ | true |
has_testimonials | boolean | — | true |
proof_count | integer | — | 4 |
pricing_tiers | array | — | [3 niveles por defecto] |
primary_color | string | — | DESIGN.md accent |
Nivel de precio:
{ name: string; price: string; period: string; features: string[]; cta: string; highlighted?: boolean }
Secciones Obligatorias (en orden)
- Navegación — Logo + enlaces de navegación + botón de CTA "Comenzar"
- Héroe — Nombre del producto, eslogan, descripción, CTAs duales (principal: "Comenzar Gratis", secundario: "Ver Demo"), captura de pantalla/maqueta opcional del producto
- Franja de Prueba Social — Fila de logos (escala de grises, máximo 6)
- Funciones — Cuadrícula de 3 columnas, cada una con icono + título + descripción
- Cómo Funciona — Flujo horizontal de 3 pasos numerados
- Precios — 3 tarjetas de nivel (Starter / Pro / Empresa)
- Testimonios — 2-3 citas con nombre, rol, empresa, avatar
- Banda de CTA — Sección oscura: titular + campo de correo electrónico + botón
- Pie de Página — Enlaces + derechos de autor
Reglas de Diseño
- Responsivo mobile-first
- Todos los CTAs deben tener href o action de formulario funcionales
- Tarjetas de precios: la tarjeta destacada tiene borde y sombra distintivos
- Avatares de testimonios: usar
https://i.pravatar.cc/60?img=[n]para marcadores de posición consistentes - Sin JS externo
- Todo el CSS en línea dentro del bloque
<style> - Sin colores inventados: usar solo los tokens de DESIGN.md
Salida
Archivo único: index.html (autocontenido)
Autocomprobación
- Sin lorem ipsum en ningún lugar
- Al menos 4 funciones listadas
- Niveles de precios de altura consistente
- Todos los CTAs claramente etiquetados y estilizados
- Móvil: colapsa a una sola columna
- El campo de correo electrónico en la banda de CTA tiene
type="email"yrequired