Skill de Página de Aterrizaje SaaS
Genera una página de aterrizaje SaaS en un solo archivo que vende un producto con una sola idea.
Flujo de trabajo
- Lee el DESIGN.md activo (inyectado arriba). El héroe, las tarjetas y los CTA toman color, tipografía, espaciado y radio de sus tokens. No inventes valores — solo usa
var(--token). - Nombra el producto y la promesa. A partir del briefing, deriva un nombre de producto concreto, una promesa de una línea y la única acción principal (Iniciar prueba / Reservar demo / Comenzar). Escribe texto real — sin placeholders como "Característica Uno / Tu Empresa Aquí".
- Diseña las secciones en este orden:
- Navegación fija: wordmark a la izquierda, 4-5 enlaces, botón CTA principal a la derecha.
- Héroe: un H1 (máx. ~8 palabras), un párrafo de apoyo, dos botones (primario + secundario), y un placeholder de visual del producto enmarcado.
- Tira de logotipos: 5-6 nombres de clientes, en tono suave, espaciados uniformemente.
- Cuadrícula de características: 6 tarjetas, cada una con un título corto (≤5 palabras) y una frase de beneficio de 1-2 oraciones — no una lista de especificaciones.
- Testimonio: una cita con nombre, cargo, empresa.
- Teaser de precios: 2-3 tarjetas de plan, precios en la moneda del briefing, viñetas de características (≤5 por tarjeta), un plan destacado.
- Banda CTA de cierre + pie de página delgado (columnas Producto / Empresa / Legal).
- Mantén el nivel de calidad:
- Un H1 en la página; H2 por sección; jerarquía por escala, no por color.
- Color primario usado solo para acciones — nunca como decoración.
- El ritmo de las secciones usa la escala de espaciado (
--section-y-*o tokens de espacio); alterna bandas de superficie/fondo para dar respiro. - Cada elemento interactivo tiene un estado de foco visible; los botones miden ≥44px de alto; el contraste del texto suave sobre fondos de banda ≥ 4.5:1.
- Responsivo: una sola columna bajo 768px, la navegación se colapsa a una fila simple de enlaces apilados o sin hamburguesa.
- Genera un único
index.htmlautocontenido —<style>embebido, sin peticiones externas, sin JavaScript a menos que el briefing lo exija.
Anti-patrones
- Degradados genéricos detrás del héroe con texto superpuesto ilegible.
- Seis características del mismo tamaño que todas afirman ser "potentes".
- Más de un tono de acento por pantalla; ámbar/rojo reservado para errores.
- Lorem ipsum, "Desbloquea el poder de...", "Revoluciona...".