Communitygithub.com

MartinOlivero/constructor-saas

Esta habilidad debe usarse cuando el usuario desee crear una página de aterrizaje, página de ventas, página de inicio, página de captura de leads o cualquier página orientada a la conversión. Hace hasta 3 preguntas, aplica un orden de secciones psicológico probado, genera el texto y produce componentes listos para usar.

¿Qué es constructor-saas?

Este skill, 'Landing Page', está diseñado para construir páginas de aterrizaje que realmente conviertan, combinando un orden de secciones basado en psicología de ventas con copys reales y código listo para producción. Es ideal para desarrolladores que usan asistentes de IA como Claude Code, Cursor o Codex, y que necesitan crear rápidamente páginas orientadas a la conversión (ventas, captura de leads, SaaS, cursos). El flujo de trabajo comienza con hasta 3 preguntas para entender la oferta, el cliente ideal y la acción principal. Luego, construye la estructura de la página siguiendo un orden probado: Hero, Problema, Solución, Características (escritas como beneficios), Prueba social, Precios, FAQ y CTA final. Posteriormente, delega la creación del sistema visual al skill `ui-design` (u opcionalmente a `ui-ux-pro-max` para mayor precisión), genera el copy completo para cada sección y, finalmente, entrega componentes reales en React + Vite + Tailwind, con soporte opcional para animaciones (Framer Motion), formularios (React Hook Form) y analíticas (Plausible, GA, PostHog). El resultado son componentes listos para usar, no prototipos, con tokens de diseño integrados y manejo de estados vacío/carga/error.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/MartinOlivero/saas-builder/tree/HEAD/skills/landing-page

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Página de Aterrizaje

Este skill construye páginas de aterrizaje que convierten — no solo páginas que se ven bonitas. Combina un orden de secciones probado con copy real y código listo para producción.

Analogía: una página de aterrizaje es un vendedor que nunca duerme. Un buen vendedor sigue un orden: capta la atención, nombra el dolor, muestra la cura, demuestra que funciona, pide la venta. La estructura de secciones a continuación es ese guion.

Flujo de trabajo

Paso 1 — Haz hasta 3 preguntas (no más)

  • ¿Qué estás vendiendo u ofreciendo? (producto, servicio, SaaS, consultoría)
  • ¿Quién es el cliente ideal? (el avatar — sé específico)
  • ¿Cuál es la acción principal única que quieres que el visitante realice? (comprar, reservar una llamada, registrarse, unirse a la lista de espera)

Si el mensaje ya responde a estas, salta al siguiente paso.

Paso 2 — Construye la estructura de secciones (orden psicológico probado)

  1. Hero — propuesta de valor clara + CTA principal. El visitante debe entender qué es esto y por qué es importante en 5 segundos.
  2. Problema — agita el dolor del cliente. Haz que sienta el costo de no resolverlo.
  3. Solución — cómo el producto/servicio resuelve ese dolor.
  4. Características — 3-6 elementos clave, escritos como beneficios, no especificaciones (

Skills relacionados