nxxxsooo/clean-design

Skill 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 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 diseño.
• Toma nota de 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 denominativa, titular (entrada de eslogan), subtítulo (1–2 frases), CTA primario, CTA secundario. Usa el parámetro hero_density como padding vertical en px.
2. Características — 3–6 bloques de características. Cada uno: icono, título corto, cuerpo de 1–2 frases.
3. Prueba social — proof_count logotipos o testimonios. Si es 0, saltar esta sección.
4. Precios — 2–3 planes. Incluir solo si has_pricing es verdadero.
5. CTA del pie — banda grande con color de acento y 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 declarada para pantalla en titulares, fuente para cuerpo en 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 declarados de botones/tarjetas/inputs. No agregues sombras si Depth & Elevation 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 y en todos los enlaces. No inunde la página.

4. Escribir el archivo

Genera un único index.html autocontenido con:

• Todo el CSS en línea dentro de un bloque <style> en <head>.
• Fuentes de sistema como respaldo 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 de comentario de la aplicación anfitriona pueda apuntarlo.

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 texto plausible específico 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 responsivos coinciden con la sección Comportamiento Responsivo de DESIGN.md.
• La página se ve bien en 1440w, 768w y 375w (simular 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, JS ni README.

---

Para autores de skills que lean esto como referencia

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

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

Cosas a notar:

• El bloque de metadatos od: es metadatos de compatibilidad retenidos. Clean Design lee sus entradas tipadas, controles deslizantes, metadatos de vista previa e indicaciones de capacidad.
• El flujo de trabajo debajo del bloque de 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 skill le da al agente autoridad para anular cuando el brief entra en conflicto, pero nunca para inventar nuevos tokens.
• El etiquetado data-od-id conecta elementos al modo de comentario local. Las skills que quieran compatibilidad con el modo de comentario deben anotar su salida.

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