onfire7777/universal-ai-skills-library

Habilidad de Landing Page SaaS

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

1. Leer el contexto

Antes de escribir nada:

• Lee DESIGN.md en el directorio de trabajo actual. Si falta, detente y solicita uno.
• Identifica la paleta de colores, los tokens tipográficos y los principios de diseño.
• Ten en cuenta la sección "Guía de Prompt del Agente" — si hay conflicto, esta prevalece sobre 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 frases), CTA principal, CTA secundaria. Usa el parámetro hero_density como relleno vertical en píxeles.
2. Características — 3–6 tarjetas de características. Cada una: icono, título breve, cuerpo de 1–2 frases.
3. Prueba social — proof_count logotipos o testimonios. Si es 0, omite esta sección.
4. Precios — 2–3 niveles. Inclúyelos solo si has_pricing es verdadero.
5. CTA en el pie de página — banda grande de color de acento con un botón de llamada a la acción.
6. Pie de página — mínimo: enlaces + derechos de autor.

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 de visualización declarada para titulares, y la fuente del cuerpo para todo lo demás.
• Diseño: respeta la cuadrícula, el ancho máximo y las reglas de espaciado entre secciones.
• Componentes: usa los patrones de botón/tarjeta/entrada declarados. 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 el CTA del pie de página, y en todos los enlaces. No satures la página.

4. Escribir el archivo

Genera un único archivo index.html autocontenido con:

• Todo el CSS en línea 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 u otros.
• 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 dirigirse a él.

5. Autoverificación

Antes de finalizar, verifica:

• Todo el texto tiene significado real, no es lorem ipsum (usa product_name y tagline como entrada; genera copia específica plausible para el resto).
• No hay referencias a colores 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 responsivos coinciden con la sección Comportamiento Responsivo de DESIGN.md.
• La página se ve bien en 1440px, 768px y 375px (simulación mental).
• 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 ni README.

---

Para autores de habilidades que lean esto como referencia

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

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

Cosas a notar:

• El bloque de metadatos od: es opcional para compatibilidad solo con Claude-Code, pero al agregarlo se activan 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 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 autoridad al agente para anular cuando el resumen conflictúa, pero nunca para inventar nuevos tokens.
• El etiquetado data-od-id es cómo conectamos elementos con el modo de comentarios. Las habilidades que quieran compatibilidad con modo de comentarios deben anotar su salida.

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