aurora-ember-bio-lab/splatstudio

Habilidad de Landing SaaS

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

1. Leer contexto

Antes de escribir cualquier cosa:

• 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 diseño.
• Ten en cuenta la sección "Guía de Prompt del Agente" — anula cualquier instrucción aquí si hay conflicto.

2. Planificar secciones

Secciones requeridas, en orden:

1. Héroe — logotipo o marca textual, titular (entrada de eslogan), subtítulo (1–2 oraciones), CTA principal, CTA secundario. Usa el parámetro hero_density como padding vertical en píxeles.
2. Características — 3–6 tarjetas de características. Cada una: icono, título corto, cuerpo de 1–2 oraciones.
3. Prueba social — proof_count logotipos o testimonios. Si es 0, omite esta sección.
4. Precios — 2–3 niveles. Incluir solo si has_pricing es verdadero.
5. CTA de pie de página — banda grande de color acento con un botón de llamada a la acción.
6. Pie de página — mínimo: enlaces + derechos de autor.

3. Aplicar sistema de diseño

• Todos los colores deben provenir de los tokens de DESIGN.md. No inventes valores hexadecimales.
• Tipografía: usa la fuente de pantalla declarada para titulares, fuente de cuerpo para todo lo demás.
• Diseño: respeta las reglas de cuadrícula, ancho máximo y espaciado de secciones.
• Componentes: usa los patrones de botones/tarjetas/inputs declarados. No agregues sombras si DESIGN.md dice Profundidad y Elevación mínima.
• Acento: usa el color de acento solo una vez en el héroe, una vez en el CTA del pie de página y para todos los enlaces. No inundes la página.

4. Escribir el archivo

Genera un único index.html autocontenido con:

• Todo el CSS incrustado en un bloque <style> dentro de <head>.
• Fuentes de respaldo del sistema si las fuentes de DESIGN.md no se pueden cargar desde Google Fonts, etc.
• Sin JavaScript 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 dirigirse a él.

5. Autoverificación

Antes de terminar, verifica:

• Todo el texto tiene significado de contenido, no es lorem ipsum (usa las entradas product_name y tagline; genera texto específico plausible para el resto).
• No hay referencias de color rotas (cada valor CSS de color está en la paleta de DESIGN.md o en una variante alfa/respaldo válida).
• Los puntos de interrupción responsivos coinciden con la sección Comportamiento Responsivo de DESIGN.md.
• La página se ve bien en 1440w, 768w y 375w (simula mentalmente).
• El acento se usa no más de dos veces en total.

6. Terminado

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

---

Para autores de habilidades que lean esto como referencia

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

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

Cosas a tener en cuenta:

• El bloque front-matter od: es opcional solo para compatibilidad con Claude Code, pero agregarlo habilita las entradas tipificadas de OD, controles deslizantes, metadatos de vista previa y bloqueo de capacidades.
• El flujo de trabajo debajo del front-matter es Markdown simple que el agente lee como su prompt 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 brief entra en conflicto, pero nunca para inventar nuevos tokens.
• El etiquetado data-od-id es cómo conectamos elementos al modo de comentarios. Las habilidades que quieran compatibilidad con el modo de comentarios deben anotar su salida.

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