Vibe Coding paso a paso Creado por Raquel Marco
Ábrela otro día para continuar.
Paso 1 de 8Inicio
Guía práctica

Vibe Coding paso a paso

De la idea a una versión funcional de tu app, con ayuda de la inteligencia artificial que elijas y sin escribir código .

No hace falta entenderlo todo ahora. La guía te lleva paso a paso.

No necesitas saber programar. Necesitas saber dirigir.

Qué vas a hacer aquí

1
Preparas tu archivoDejas lista la carpeta de tu proyecto
2
Aclaras tu ideaLa conviertes en un briefing sencillo
3
Defines tu productoCómo debe verse y funcionar
4
Preparas el planDivides la construcción en fases pequeñas
5
Trabajas con tu agenteLe das instrucciones claras y precisas
6
Haces los ajustes finalesRevisas riesgos y preparas el siguiente paso
Preparas tu MVPLa primera versión útil, revisada y lista para decidir
¿Qué es el vibe coding?

El vibe coding es una forma de crear software en la que tú diriges el proyecto y la inteligencia artificial hace el trabajo técnico. No se trata de pedir «hazme una app completa» y esperar un milagro, sino de preparar bien la idea, dividir el trabajo en fases y dar instrucciones claras.

En esta guía usarás dos tipos de ayuda:

Tu asesor: un chat de IA, como ChatGPT o Claude, que te ayuda a pensar, ordenar y preparar documentos.

Tu agente programador: una herramienta como Codex, Claude Code o similar, que trabaja sobre el código de la app.

La clave es sencilla: tú tomas las decisiones; la IA te ayuda a ejecutarlas.

¿Qué es un MVP?

Un MVP es la primera versión útil de tu aplicación. No es la app perfecta ni la app completa: es la versión mínima que permite comprobar si la idea tiene sentido y si alguien puede usarla de verdad. Un buen MVP hace pocas cosas, pero las hace bien.

En esta guía separaremos siempre tres niveles:

Imprescindible: entra en el MVP.

Deseable: puede esperar.

Futuro: no se construye ahora.

¿Qué vas a conseguir al terminar?

Al terminar la guía tendrás una carpeta de proyecto con documentos claros para construir tu MVP con un agente programador. Vas a preparar:

  • 01-briefing.md — la explicación clara de tu idea.
  • 02-estructura.md — qué hace el producto y cómo se organiza.
  • 03-diseno.md — la guía visual y de experiencia.
  • 04-prompt-maestro.md — las instrucciones de partida para el agente.
  • 05-plan-por-fases.md — el orden para construir sin mezclarlo todo.
  • 06-auditoria.md — la revisión final antes de decidir si publicar.
  • 07-despliegue.md — cómo preparar y documentar la publicación.
  • AGENTS.md — las reglas permanentes del agente.
  • HANDOFF.md — la memoria viva del proyecto entre conversaciones.

No hace falta memorizar estos nombres ahora. La guía te los irá dando cuando toque.

¿Por qué no atarse a una herramienta?

Las herramientas de IA cambian rápido. Hoy puedes usar ChatGPT, Claude, Codex, Claude Code, Gemini u otra; mañana puede aparecer una mejor. Por eso esta guía no depende de una herramienta concreta.

Lo importante no es la marca de la IA, sino el método: idea clara, documentos bien preparados, fases pequeñas y control del proceso. Tus documentos son tuyos: si cambias de herramienta, no pierdes el proyecto.

Primero documentos. Después código.

Importante: esta guía no construye tu app directamente. Te ayuda a preparar el camino para construirla mejor: primero con un chat de IA que actúa como asesor y después con un agente programador que trabaja sobre el código.

Antes de empezar

Prepara tu carpeta de proyecto

Aquí vas a crear el lugar donde guardarás todo lo importante de tu MVP. No tienes que rellenar nada todavía: solo dejarla lista y ordenada.

Una regla sencilla: cada documento tiene un sitio y un propósito. No hace falta rellenarlos ahora; primero crea la estructura y la guía te dirá cuándo usar cada uno.

Descarga la carpeta de tu proyecto

Dentro encontrarás los dos archivos de la raíz y la carpeta Documentos, todos vacíos y listos para usar.

Por ejemplo: mi-mvp
Instrucciones de descarga
  1. 1Si el navegador te pregunta dónde guardarlo: elige una carpeta que recuerdes, revisa el nombre y pulsa «Guardar».
  2. 2Si no te pregunta nada: el ZIP se habrá descargado directamente, normalmente en la carpeta Descargas. Búscalo allí con el nombre que has elegido.
  3. 3Crea una carpeta nueva para tu proyecto: ponle el nombre que has elegido, por ejemplo mi-mvp, y guárdala en un lugar fácil de encontrar.
  4. 4Descomprime el ZIP dentro de esa carpeta: haz clic derecho sobre .zip y elige «Extraer todo» o «Descomprimir». Comprueba que dentro quedan AGENTS.md, HANDOFF.md y Documentos.
  5. 5Comprueba la carpeta y borra el ZIP. El comprimido solo servía para transportarla; a partir de ahora trabajarás siempre dentro de la carpeta que acabas de crear.
Así quedará tu carpeta
Dos detalles para no perderte

Trabaja siempre en la carpeta descomprimida, no dentro del ZIP ni en Descargas. Guárdala en un lugar fácil de encontrar.

No muevas los archivos de la raíz: AGENTS.md contiene las reglas y HANDOFF.md guarda el estado entre hilos. Los documentos numerados van dentro de Documentos.

Lleva el control de lo que ya has hecho

En tu chat de IA

Tu asesor

Antes de construir, usa un chat con un modelo de IA (como GPT, Claude o Gemini) como asesor para pensar mejor tu MVP, ordenar tus ideas y preparar documentos claros.

El asesor es el chat donde piensas el proyecto (ChatGPT, Claude, Gemini…). No es el : te ayuda a aclarar la idea y a preparar documentos. El asesor no manda. Tú diriges.

Asesor

Piensa contigo

  • Aclara y ordena la idea
  • Te ayuda a recortar
  • Redacta los documentos
→

Agente

Construye la app

  • Escribe el código
  • Crea los archivos
  • Ejecuta las tareas

Aquí tienes textos listos para copiar y pegar en tu asesor.

Para que recorte funciones

Úsala cuando creas que estás metiendo demasiadas funciones en el MVP.

Para que te lo explique sencillo

Úsala cuando el asesor se ponga técnico y no entiendas lo que te dice.

Cuando sospechas que se lo inventa

Úsala si crees que el asesor está dando por hecho cosas que tú no le has dicho.

Lleva el control de lo que ya has hecho

En tu chat de IA

Tu idea

Pon en claro qué quieres hacer, para quién y por qué. No hace falta saber de tecnología: solo explicar tu idea con tus palabras.

Este apartado tiene 2 pasos:
1. Respondes unas preguntas aquí, en la página, y las guardas.
2. Le pasas esas respuestas a tu asesor y él las convierte en tu primer documento (el briefing).

Paso 1 de 2 · aquí en la página

Responde a unas preguntas sobre tu idea

Aquí solo aclaras la idea, como se la contarías a una persona. Todavía no hablamos de pantallas, datos ni herramientas: eso vendrá en «Tu producto». Si no sabes qué poner, una frase simple e imperfecta es mejor que una larga y confusa.

Las preguntas están repartidas en 4 bloques. Abre cada bloque, responde sus 2 o 3 preguntas y pasa al siguiente. Puedes dejar en blanco lo que aún no tengas claro.

Tu idea va tomando forma0 / 11

¿No sabes qué responder en alguna pregunta? A su lado verás un botón Ayúdame…. No responde por ti: prepara una pregunta para que tu asesor te ayude a pensarla. Así se usa:

1

Pulsa «Ayúdame…»: se copia una pregunta lista para tu chat de IA.

→
2

Pégala en tu chat (tu asesor) y responde lo que te vaya preguntando.

→
3

Copia la respuesta final y pégala en el campo de aquí.

La idea 0/3

Qué quieres hacer.

Ponle un nombre de trabajo. No tiene que ser definitivo.

Explícalo en una o dos frases, como se lo contarías a alguien conocido.

Esta frase será la brújula del proyecto.

Consejo: si esta frase se entiende, la idea empieza bien.
Las personas 0/3

Para quién existe la app.

Piensa en personas concretas, no en «todo el mundo».

Describe qué pasa ahora y por qué resulta incómodo.

Imagina una situación real.

Lo mínimo 0/3

Qué debe tener la primera versión y qué queda fuera.

Solo lo mínimo para que la app tenga sentido.

Esto evita que la IA complique demasiado el proyecto.

Importante: decir lo que no entra es tan útil como decir lo que sí entra.

Describe el resultado final de forma sencilla.

El enfoque 0/2

Por qué merece la pena y cómo no perder el rumbo.

No hace falta una gran justificación. Basta con explicar qué mejora aporta.

Pensarlo ahora ayuda a construir con más cabeza.

Cuando termines, guarda tus respuestas

No hace falta que esté perfecto: es solo el punto de partida. Se descargará un archivo con tus respuestas en el ordenador; lo usarás en el paso 2.

Paso 2 de 2 · en tu chat con el asesor

Convierte tus respuestas en tu primer documento

Ahora tu asesor ordena todo por ti. Abre tu chat, dale las respuestas que acabas de guardar y pégale el prompt de abajo: te devolverá tu , el primer documento del proyecto y tu idea ya ordenada.

Vas a crear01-briefing.md
Para qué sirveTener tu idea ordenada y lista para construir el MVP
Quién lo haceTu asesor: abre un hilo en tu chat y súbele las respuestas que acabas de guardar

Lleva el control de lo que ya has hecho

Con tu asesor · mismo hilo

Tu producto

Sigue en la misma conversación con tu asesor. Estos dos documentos definen cómo es tu producto: su estructura funcional (qué pantallas y flujos tiene) y su diseño (cómo se ve y se usa). Pega cada prompt en orden y guarda la respuesta.

Lleva el control de lo que ya has hecho

Con tu asesor · mismo hilo

Tu plan

Ya tienes clara la idea y el producto. Ahora vas a preparar el plan de trabajo.

Crearás tres cosas: las instrucciones de arranque, el plan por fases y las reglas que tu agente deberá seguir siempre.

Siguiente paso: guarda cada respuesta con su nombre (04-prompt-maestro.md, 05-plan-por-fases.md y AGENTS.md). Cuando ya tengas los documentos numerados (01–05) y el AGENTS.md, ve a «Tu agente».

Lleva el control de lo que ya has hecho

Con tu agente programador

Tu agente

No tienes que escribir código. Tu trabajo es aprobar los pasos, probar el resultado y hacer preguntas cuando algo no esté claro.

El agente programador trabaja dentro de la carpeta de tu proyecto y escribe el código. El asesor sigue siendo tu espacio para pensar y comprobar decisiones. El agente construye. Tú diriges.
Si algo sale mal, no continúes: pide al agente que actualice HANDOFF.md y vuelve a una fase pequeña.

Asesor

Piensa contigo

  • Te ayuda a decidir
  • Revisa una propuesta
  • Traduce lo técnico
→

Agente

Construye la app

  • Lee el contexto
  • Propone antes de cambiar
  • Construye y explica

Cómo trabajar con tu agente

  1. Selecciona la carpeta de tu proyecto

    En la herramienta del agente, abre la carpeta que descargaste y descomprimiste en «Archivo». Trabajarás siempre ahí: contiene AGENTS.md, HANDOFF.md y Documentos.

  2. Abre el primer hilo y dale el contexto

    Pídele que lea AGENTS.md y los documentos 01–05 de Documentos, especialmente el prompt maestro y el plan por fases. Primero debe proponerte la primera fase; todavía no debe tocar código.

  3. Contrasta la propuesta con tu asesor

    Si algo no te cuadra, copia la respuesta del agente en tu chat asesor. Pídele que te diga, en lenguaje sencillo, qué entiende, qué falta y qué riesgos ve. Vuelve al agente con las decisiones claras.

  4. Aprueba una fase pequeña y constrúyela

    Cuando el plan tenga sentido, confirma una sola fase. El agente construye, te explica los cambios y te dice cómo comprobarlos. No mezcles varias fases ni aceptes cambios grandes sin entenderlos.

  5. Comprueba el resultado y pide una segunda opinión

    Prueba lo que te indique el agente. Comparte con el asesor el resumen o las dudas que queden para comprobar que vais en la dirección correcta y decidir el siguiente ajuste.

  6. Cierra la fase y abre el siguiente hilo

    Antes de continuar, pide al agente que actualice HANDOFF.md. En el hilo nuevo, que lea AGENTS.md y HANDOFF.md, confirme el siguiente paso y vuelva a proponértelo.

No avances si… el agente quiere construir varias fases a la vez, añade dependencias sin explicarlas, reescribe toda la app por un cambio pequeño o no te explica qué tocó. Pídele que pare y vuelva a la fase actual.
Cuando algo se rompe: si el agente entra en bucle (arregla una cosa y rompe otra), para. No le repitas «arréglalo» sin más: pídele que vuelva a la última versión que funcionaba y que cambie una sola cosa cada vez. Si aun así no sale, abre un hilo nuevo, pídele que lea el HANDOFF.md actualizado y explícale el problema desde cero.

Plantillas listas para copiar

Plantilla · Abrir un hilo nuevo (retomar el trabajo)
Plantilla · Pedir una segunda opinión al asesor
Plantilla · Cerrar una fase y actualizar el handoff

Lleva el control de lo que ya has hecho

Cuando tienes una primera versión

Ajustes

Cuando tengas una versión que funciona, toca revisarla, detectar riesgos y decidir cómo conviene prepararla antes de compartirla.

No todos los proyectos se publican igual: una web informativa, una app con usuarios, una tienda, una comunidad o una herramienta interna tienen necesidades distintas.

Primero la revisas con calma en tu ordenador. Después el agente debe ayudarte a clasificar el proyecto, recomendar una ruta de publicación y pedirte confirmación antes de crear repositorios, subir código o publicar en internet.

Un repositorio, como GitHub o GitLab, guarda el historial de tu proyecto y permite recuperar versiones anteriores si algo sale mal.

Pide también una segunda opinión a un chat de IA externo (distinto del que construye): detecta cosas que el propio agente no ve. Tienes el prompt rápido más abajo, en los rescates.

Antes de preparar la publicación

Qué tipo de proyecto tienes delante

Antes de elegir dónde publicar, pídele al agente que clasifique el proyecto: web informativa, app con usuarios, tienda, comunidad, herramienta interna, app con IA, app con pagos u otro caso.

La ruta cambia según si será público o privado, si maneja datos personales, si tiene pagos, si recibe contenido de usuarios, si necesita base de datos o si debe usar dominio propio.

Seguridad y datos

No compartas tus claves API (las contraseñas que dan acceso a los servicios de IA y otros): si una se filtra, cualquiera puede gastar en tu nombre.

Los datos de tus clientes son tu responsabilidad: guarda solo lo necesario y protégelos. Hay leyes (como el RGPD en Europa) que obligan a cuidar los datos personales.

Si hay pagos, datos sensibles, cuentas de usuario o contenido publicado por otras personas, no publiques una versión real sin revisar antes privacidad, permisos, moderación y seguridad básica.

Costes a tener en cuenta

Construir el MVP puede ser gratis, pero mantenerlo en línea no siempre.

Ten en el radar el hosting (el alojamiento donde vive la app en internet), la base de datos, el dominio y, si tu app usa IA, el coste por uso de esa IA. Mejor saberlo antes de publicar.

Vista previa no es lo mismo que producción

Una vista previa sirve para probar y enseñar una versión controlada. Producción es la versión pública o real que pueden usar personas externas.

El agente debe separar esos dos pasos y pedirte permiso explícito antes de publicar en producción o crear un repositorio público.

Si algo se atasca · rescates

Prompts para desatascar al agente cuando se complica, entra en bucle o se pone demasiado técnico. Cópialos y pégaselos en el chat del agente.

Lleva el control de lo que ya has hecho

Has recorrido el camino

¡Enhorabuena!

Has pasado de una idea a una forma clara y ordenada de construir tu MVP.

Ya tienes un método, una estructura de documentos, un plan por fases y reglas para trabajar con tu agente. No hace falta hacerlo todo perfecto: lo importante es que ahora sabes qué paso dar y por qué.

¿Alguna pregunta?
Algunas palabras que acabarán sonándote

Para hablar con la IA

IA. Tecnología que permite a una herramienta entender lo que le pides y ayudarte a crear textos, ideas, diseños o código.

Modelo de IA. La tecnología que genera las respuestas de una IA. Ejemplos: GPT, Claude o Gemini.

Chat de IA. La conversación donde piensas, preguntas y preparas los documentos de tu proyecto.

Agente programador (agente de IA). La IA que trabaja en la carpeta de tu proyecto y escribe o modifica el código.

Prompt. La instrucción de texto que le das a una IA.

Para preparar tu proyecto

MVP. La versión más pequeña y útil de tu producto, pensada para comprobar si la idea funciona.

Briefing. El documento que ordena la idea, el objetivo, los usuarios y lo que debe hacer el MVP.

Markdown. Una forma sencilla de dar formato a un texto con títulos, listas y enlaces; los archivos suelen acabar en .md.

Carpeta de proyecto. La carpeta principal donde se guarda todo lo relacionado con tu app.

ZIP. Un archivo comprimido que agrupa otros archivos para descargar o moverlos juntos.

Raíz. El primer nivel de una carpeta: no está dentro de ninguna subcarpeta.

Hilo. Una conversación concreta con una IA. Un hilo nuevo empieza con contexto limpio.

Fase. Una parte pequeña y acotada del plan de construcción.

HANDOFF.md. El archivo con el estado del proyecto para retomarlo en otro hilo. La memoria entre conversaciones.

AGENTS.md / CLAUDE.md. El archivo con las reglas permanentes que el agente lee solo.

Cómo está hecha una app

Código. Las instrucciones que hacen funcionar una aplicación.

Frontend y backend. El frontend es lo que ve y usa la persona; el backend es la lógica, los datos y las conexiones que funcionan por detrás.

Interfaz y UX. La interfaz son pantallas, botones y textos; la UX es lo fácil y claro que resulta usarlos.

Base de datos y login. La base de datos guarda información; el login identifica a quien entra en la parte privada de la app.

Dependencia. Una herramienta o pieza de software externa que tu app necesita para funcionar.

Endpoint. Una dirección concreta a la que la app llama para pedir o enviar datos a una función o servicio.

API, clave API y variable de entorno. Una API conecta tu app con un servicio; la clave API le da permiso y la variable de entorno la guarda fuera del código para protegerla.

Framework, librería y stack. Un framework da una base para construir; una librería resuelve una tarea concreta; el stack reúne todas las tecnologías elegidas.

Código abierto (open source). Software cuyo código puede consultarse y reutilizarse según su licencia.

Software propietario. Software cuyo código controla una empresa o creador y cuyo uso depende de sus condiciones.

Para construir, revisar y preparar publicación

Repositorio. El sitio donde se guarda y se versiona el código del proyecto. GitHub y GitLab son ejemplos habituales.

Rama y merge. Una rama permite probar cambios sin tocar la versión principal; un merge une esos cambios cuando están listos.

En local, vista previa y producción. En local pruebas la app en tu ordenador; una vista previa sirve para revisar; producción es la versión real para otras personas.

Commit y push. Guardar una versión de los cambios (commit) y subirla al repositorio (push).

Desplegar (deploy). Preparar y poner una versión accesible en el entorno adecuado: vista previa, privado o público.

Hosting, dominio y URL. El hosting es donde vive la app; el dominio es su nombre web y la URL es la dirección completa para abrir una página.

Auditoría. Una revisión ordenada para detectar problemas, prioridades y riesgos antes de decidir el siguiente paso.

Responsive y accesibilidad. Responsive adapta la app a móvil, tableta y ordenador; accesibilidad permite usarla con distintas capacidades y formas de navegar.

Bug. Un error en la app que hace que algo no funcione como debería.