De idea a app: especificación completa para vibe coding · Scriptoteca
De idea a app: especificación completa para vibe coding
El método para que la IA programe tu app sin perderse: documento de producto, diseño técnico, modelo de datos, plan de tareas por etapas y un prompt maestro para Cursor o Claude Code. Evita el caos de pedir 'hazme una app'.
· 9 oct 2026
“La diferencia entre una app que funciona y una que se rompe en el tercer cambio es la especificación. Guarda cada resultado como archivo .md en tu proyecto y pásaselo a la IA que programa.” — @scriptoteca
Actúa como un product manager senior. Vamos a convertir mi idea de app en un documento de producto (PRD) claro, que después usará otra IA para programarla.
Mi idea: [DESCRIBE TU APP]
Para quién: [usuarios]
Plataforma: [web / móvil / ambas]
Mi nivel técnico: [no programo / básico / intermedio / avanzado]
Primero hazme hasta 8 preguntas clave para entender bien la app (una a la vez o en lista). Después escribe el PRD en Markdown con:
1. Resumen en 3 líneas y el problema que resuelve.
2. Usuarios y roles (ej. visitante, usuario registrado, admin) y qué puede hacer cada uno.
3. Historias de usuario priorizadas con MoSCoW (Must / Should / Could / Won't): "Como [rol], quiero [acción], para [beneficio]", con criterios de aceptación verificables para cada una.
4. Alcance de la versión 1 (MVP): solo los Must. Lista explícita de lo que NO entra.
5. Flujos principales paso a paso (registro, acción principal, etc.).
6. Pantallas necesarias con qué muestra cada una.
7. Reglas de negocio y casos borde (qué pasa si…).
8. Requisitos no funcionales: privacidad, seguridad, rendimiento, idioma, accesibilidad.
9. Métricas de éxito.
Sé concreto: nada de "debe ser intuitivo" sin definir qué significa.
2.Diseño técnico y elección del stack
Actúa como arquitecto de software. Con el PRD anterior, diseña la solución técnica más simple que funcione y que una IA pueda programar con pocos errores.
1. Stack recomendado (frontend, backend, base de datos, autenticación, hosting) con el porqué de cada elección. Prioriza tecnologías populares, bien documentadas y con plan gratuito. Si mi nivel es bajo, prefiere soluciones administradas (ej. Supabase, Vercel) sobre servidores propios.
2. Arquitectura en texto o diagrama (Mermaid): componentes y cómo se comunican.
3. Estructura de carpetas del proyecto con una línea explicando cada carpeta.
4. Autenticación y permisos: cómo se garantiza que un usuario no vea ni modifique datos de otro.
5. Servicios externos necesarios (pagos, emails, almacenamiento) y variables de entorno requeridas.
6. Riesgos técnicos y cómo mitigarlos.
7. Costos mensuales estimados con 100, 1.000 y 10.000 usuarios.
3.Modelo de datos y API
Ahora diseña el modelo de datos y la API.
1. Tablas o colecciones con: nombre, campos (tipo, obligatorio, valores por defecto), claves primarias y foráneas, índices y restricciones. Muéstralo en SQL (o el formato de la base de datos elegida) listo para ejecutar.
2. Diagrama entidad-relación en Mermaid.
3. Reglas de seguridad a nivel de base de datos (ej. Row Level Security) para cada tabla: quién puede leer, crear, editar y borrar.
4. Datos de ejemplo (seed) realistas: 5-10 filas por tabla.
5. Endpoints o funciones del backend: método, ruta, qué recibe (con validaciones), qué devuelve, errores posibles y quién puede llamarlo.
6. Revisa el modelo contra cada historia de usuario del PRD y confirma que todas se pueden implementar. Si falta algo, agrégalo.
4.Plan de construcción por etapas
Divide la construcción en etapas pequeñas que una IA pueda programar una a una, probando cada etapa antes de seguir. Esto evita que el proyecto se rompa.
Reglas para el plan:
- Cada etapa debe terminar con algo que se pueda ver y probar en el navegador o la app.
- Máximo 3-5 archivos modificados por tarea.
- Primero lo que desbloquea todo lo demás (proyecto base, base de datos, login).
- La seguridad y las validaciones van en la misma tarea que la funcionalidad, no "al final".
Entrega una tabla por etapa:
| Etapa | Tarea | Archivos involucrados | Cómo probar que funciona (pasos manuales) | Depende de |
Al final de cada etapa incluye una checklist de verificación (ej. "creo un usuario, cierro sesión, no puedo entrar a /admin").
Agrega una etapa final de "preparación para publicar": variables de entorno, dominio, revisión de seguridad, páginas legales y analítica.
5.Prompt maestro para la IA que programa
Escribe un archivo de instrucciones (tipo CLAUDE.md, AGENTS.md o .cursorrules) que voy a dejar en la raíz del proyecto para que la IA que programa (Cursor, Claude Code, etc.) trabaje bien durante todo el desarrollo.
Debe incluir:
1. Resumen del producto en 5 líneas y link a los documentos anteriores (PRD, diseño técnico, modelo de datos, plan).
2. Stack y versiones, comandos para instalar, correr, probar y compilar.
3. Convenciones de código: nombres, estructura de carpetas, manejo de errores, idioma de los textos de la interfaz.
4. Reglas de trabajo:
- Trabajar solo en la tarea actual del plan; no refactorizar cosas no pedidas.
- Antes de escribir código, explicar en 3 líneas qué va a cambiar.
- Después de cada cambio, correr el build/tests y decir cómo probarlo manualmente.
- Nunca poner claves secretas en el código; usar variables de entorno.
- Toda consulta a la base de datos respeta los permisos por usuario.
- Si algo del plan no tiene sentido, preguntar antes de improvisar.
5. Definición de "terminado" para cada tarea.
6. Errores frecuentes a evitar en este stack.
Después, escribe el primer mensaje exacto que debo enviarle a la IA para empezar la Etapa 1.
Scriptoteca