skeletorflet/opencode-supreme-setup

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 nada:

• Lee DESIGN.md en el directorio de trabajo actual. Si falta, detente y solicítalo.
• Identifica la paleta de colores, los tokens tipográficos y los principios de maquetación.
• Nota la sección "Guía de Prompt del Agente" — si hay conflicto, esta prevalece sobre cualquier instrucción aquí.

2. Planificar secciones

Secciones obligatorias, en orden:

1. Héroe — logotipo o marca de texto, titular (entrada del eslogan), subtítulo (1–2 oraciones), CTA principal, CTA secundaria. Usa el parámetro hero_density como padding vertical en px.
2. Características — 3–6 tarjetas de características. Cada una: icono, título corto, descripción de 1–2 oraciones.
3. Prueba social — proof_count logotipos o testimonios. Si es 0, omite esta sección.
4. Precios — 2–3 planes. Incluye solo si has_pricing es verdadero.
5. CTA de 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 + copyright.

3. Aplicar sistema de diseño

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

4. Escribir el archivo

Genera un solo index.html autocontenido con:

• Todo el CSS inline 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 JS externo.
• HTML semántico (<header>, <main>, <section>, <footer>).
• Cada elemento editable etiquetado con data-od-id="<slug-único>" para que el modo comentario 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 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 responsivos coinciden con la sección Comportamiento Responsivo de DESIGN.md.
• La página se ve bien en 1440w, 768w y 375w (simulación mental).
• El acento se usa no más de dos veces en total.

6. Finalizado

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

---

Para autores de skills que lean esto como referencia

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

saas-landing-skill/
├── SKILL.md    ← estás aquí
└── 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 añadirlo 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 al agente autoridad para anular cuando el resumen entre en conflicto, pero nunca para inventar nuevos tokens.
• El etiquetado data-od-id es cómo conectamos elementos con el modo comentario. Los skills que quieran compatibilidad con modo comentario deben anotar su salida.

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