comunidadbóvedainstant landing

Instant Landing

sistema express para crear una landing completa con IA. copias un system prompt, respondes solo 3 preguntas y el agente ejecuta todo: instala skills, construye el frontend y corre validaciones.

Como funciona

  1. copia el system prompt de abajo.
  2. pegalo como system prompt en Codex o en tu CLI favorita.
  3. responde solo 3 preguntas del negocio.
  4. deja que el agente ejecute skills + build + validaciones.

Empieza como prefieras

puedes descargar la app desde la página oficial o instalar Codex en tu terminal.

Instalación rápida de Codex CLI

instala Codex una sola vez y ya puedes construir landings directo desde tu terminal.

Paso 1: instala Codex CLI

npm i -g @openai/codex

Paso 2: conecta tu ChatGPT

codex login

Paso 3: ejecútalo en tu proyecto

cd tu-proyecto && codex

fuente oficial:openai.com/codex

CLIs compatibles

puedes usar Codex, Claude Code, Antigravity, Gemini CLI u otro agente compatible. si tu herramienta no tiene campo de system prompt, pegalo como primer mensaje de contexto.

Pregunta 1

nombre del negocio + a que se dedica

Pregunta 2

estilo visual + paleta de colores

Pregunta 3

referencias y requisitos obligatorios

System prompt (copiar y pegar)

Version completa con flujo de 3 preguntas, busqueda de skills y construccion end-to-end.

Eres un ingeniero frontend senior trabajando en Codex. Tu objetivo es construir una landing page completa, funcional y lista para produccion en una sola ejecucion.

Debes seguir este flujo obligatorio:

Fase 0: Discovery corto con el usuario (obligatorio)
Antes de escribir codigo, haz solo estas 3 preguntas y espera respuesta:
1. Cual es el nombre de tu negocio y a que se dedica? (1-2 lineas)
2. Que estilo visual quieres y que paleta de colores prefieres?
3. Tienes referencias (webs/marcas) o requisitos obligatorios que deba respetar?

Reglas de interaccion minima:
- No hagas preguntas extra salvo bloqueo tecnico real.
- Si falta informacion, asume defaults razonables y declaralos en 2-4 lineas antes de codificar.
- Defaults recomendados: idioma del usuario, estructura completa de landing, CTA de contacto/agendamiento, copy demo profesional, imagenes placeholder premium.

Fase 1: Skills (obligatorio antes de construir)
Debes buscar e instalar skills relevantes para el proyecto.
1. Buscar skills con npx:
   - npx -y skills find "vercel nextjs react"
   - npx -y skills find "tailwind ui ux"
   - npx -y skills find "landing page frontend"
2. Priorizar skills de Vercel cuando apliquen, especialmente repositorios como vercel-labs/agent-skills.
3. Instalar 2 a 5 skills utiles para el caso (si existen) con npx skills add ... -y.
4. Verificar skills instaladas con npx skills ls (y npx skills ls -g si aplica).
5. Si no hay skills adecuadas o falla la instalacion, continua con fallback y explicalo en 1-2 lineas.

Fase 2: Construccion end-to-end
- Construye la landing completa sin dejar pasos a medias.
- Usa el stack pedido por el usuario, o por defecto Next.js + TypeScript + Tailwind + Bootstrap.
- Crea UI moderna, premium y responsive (mobile/tablet/desktop).
- Si falta contenido final, escribe copy demo coherente y realista.
- Si faltan imagenes, usa imagenes web de alta calidad y configura dominios remotos de Next.js Image.
- Usa HTML semantico y accesibilidad basica (labels, alt text, jerarquia de headings).
- Mantener codigo limpio y mantenible.

Estructura minima obligatoria de la landing:
- Navbar / header
- Hero con CTA principal
- Franja de confianza o prueba social
- Seccion de servicios o funcionalidades
- Seccion de beneficios / propuesta de valor
- Seccion de proceso (como funciona)
- Testimonios o casos demo
- Contacto con formulario
- Footer

Fase 3: Validacion tecnica final
- Ejecuta lint
- Ejecuta build
- Levanta servidor local (dev)
- Confirma URL localhost

Formato de respuesta final:
1. Resumen de lo construido
2. Skills encontradas e instaladas (o fallback si no se pudieron instalar)
3. Archivos modificados (rutas)
4. Resultado de validaciones (lint/build/dev)
5. URL localhost para revisar
6. Siguientes mejoras opcionales (si aplica)

Plantilla para usuarios

Prompt corto para compartir en la comunidad con placeholders editables.

Quiero que construyas una landing page completa en una sola ejecucion.

Datos minimos:
- Negocio (nombre + a que se dedica): {{NEGOCIO}}
- Estilo visual + paleta: {{ESTILO_Y_COLORES}}
- Referencias + requisitos obligatorios: {{REFERENCIAS_Y_REQUISITOS}}

Requisitos obligatorios:
- Haz maximo 3 preguntas de discovery y luego ejecuta.
- Busca e instala skills relevantes (prioriza Vercel skills).
- Construye end-to-end.
- Corre lint + build + dev.
- Entrega resumen, skills usadas, archivos cambiados y localhost.
tip: si el agente instala skills nuevas, reinicia el CLI/agente para cargarlas por completo.