Habilidad: Landing SaaS

Genera una landing page SaaS de una sola página. Agente, sigue exactamente este flujo de trabajo.

1. Leer el contexto

Antes de escribir nada:

Lee DESIGN.md en el directorio de trabajo actual. Si falta, detente y pide uno.
Identifica la paleta de colores, los tokens de tipografía y los principios de layout.
Toma nota de la sección "Guía de instrucciones para el agente" — anula cualquier instrucción aquí si entran en conflicto.

Secciones requeridas, en orden:

Héroe — logotipo o marca textual, titular (entrada de eslogan), subtítulo (1–2 frases), CTA principal, CTA secundaria. Usa el parámetro de densidad_del_héroe como padding vertical en px.
Características — 3–6 tarjetas de características. Cada una: icono, título corto, cuerpo de 1–2 frases.
Prueba social — cantidad_pruebas logotipos o testimonios. Si es 0, salta esta sección.
Precios — 2–3 niveles. Incluir solo si tiene_precios es verdadero.
CTA final — banda grande de color de acento con un botón de llamado a la acción.
Pie de página — mínimo: enlaces + copyright.

Todos los colores deben provenir de los tokens de DESIGN.md. No inventes valores hex.
Tipografía: usa la fuente declarada para titulares y la fuente del cuerpo para todo lo demás.
Layout: respeta la cuadrícula, el ancho máximo y las reglas de espaciado entre secciones.
Componentes: usa los patrones declarados para botones, tarjetas y campos de entrada. No agregues sombras si la sección "Profundidad y elevación" de DESIGN.md dice mínimo.
Acento: usa el color de acento solo una vez en el héroe, una vez en la CTA final y para todos los enlaces. No satures la página.

Genera un único archivo index.html autocontenido con:

Todo el CSS en línea dentro de un bloque <style> en <head>.
Fuentes de respaldo del sistema si las fuentes de DESIGN.md no se pueden cargar desde Google Fonts u otras fuentes.
Sin JS externo.
HTML semántico (<header>, <main>, <section>, <footer>).
Cada elemento editable etiquetado con data-od-id="<slug-único>" para que el modo de comentarios de la aplicación host pueda apuntar a él.

Antes de finalizar, verifica:

Todo el texto tiene contenido significativo, no lorem ipsum (usa los inputs de nombre_del_producto y eslogan; genera copia específica plausible para el resto).
No hay referencias de color rotas (cada valor CSS de color está en la paleta de DESIGN.md o es una variante alfa/fallback válida).
Los puntos de interrupción responsive coinciden con la sección "Comportamiento responsive" de DESIGN.md.
La página se ve bien a 1440w, 768w y 375w (simular mentalmente).
El acento se usa como máximo dos veces en total.

Escribe solo index.html. No generes un archivo CSS separado, JS ni README.

Esta es una habilidad mínima pero completa. Estructura:

saas-landing-skill/
├── SKILL.md    ← estás aquí
└── assets/
    └── base.html    (plantilla inicial opcional; esta habilidad no usa ninguna)

Cosas a notar:

El bloque de metadatos od: es opcional para compatibilidad solo con Claude-Code, pero agregarlo activa las entradas tipificadas, los sliders, los metadatos de vista previa y el control de capacidades de OD.
El flujo de trabajo debajo de los metadatos es Markdown plano que el agente lee como su instrucción de sistema.
DESIGN.md se trata como un colaborador, no como una anulación. La habilidad le da al agente autoridad para anular cuando el resumen entra en conflicto, pero nunca para inventar nuevos tokens.
El etiquetado data-od-id es la forma en que conectamos elementos al modo de comentarios. Las habilidades que quieran compatibilidad con el modo de comentarios deben anotar su salida.

Consulta ../../docs/skills-protocol.md para el protocolo completo.