aurora-ember-bio-lab/splatstudio

Skill de Página de Aterrizaje 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 tipográficos y los principios de diseño.
• Revisa la sección "Guía de Prompt del Agente" — si hay conflicto, esa sección anula cualquier instrucción aquí.

2. Planificar secciones

Secciones requeridas, en orden:

1. Héroe — logotipo o marca de texto, titular (entrada de eslogan), subtítulo (1–2 oraciones), CTA principal, CTA secundario. Usa el parámetro hero_density como padding vertical en px.
2. Funcionalidades — 3–6 tarjetas de funcionalidad. 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 final — banda grande de color de acento con un botón de llamada a la acción.
6. Pie de página — mínimo: enlaces + copyright.

3. Aplicar el sistema de diseño

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

4. Escribir el archivo

Genera un único index.html autónomo que contenga:

• Todo el CSS dentro de una etiqueta <style> en el <head>.
• Fuentes de sistema como respaldo 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 anfitriona pueda apuntar a él.

5. Autoverificación

Antes de finalizar, verifica:

• Todo el texto tiene contenido significativo, no es lorem ipsum (usa las entradas product_name y tagline; genera copia verosímil específica 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/de respaldo válida).
• Los puntos de interrupción responsive coinciden con la sección de Comportamiento Responsive 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

Genera solo index.html. No crees archivos CSS, JS o README separados.

---

Para autores de skills que lean esto como referencia

Este es un skill mínimo pero completo. Estructura:

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

Cosas a notar:

• El bloque de metadatos od: es opcional para compatibilidad solo con Claude-Code, pero agregarlo activa las entradas tipadas, controles deslizantes, metadatos de vista previa y control de capacidades de OD.
• El flujo de trabajo debajo de los metadatos es Markdown plano que el agente lee como su prompt de sistema.
• DESIGN.md se trata como un colaborador, no como una anulación. El skill le da autoridad al agente 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. Los skills que quieran compatibilidad con modo de comentarios deben anotar su salida.

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