Vibe Coding paso a paso Creado por Raquel Marco
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 finalesAfinas los detalles antes de publicar
Publicas tu MVPLa primera versión útil, lista para usarse
¿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 publicar.
  • 07-despliegue.md — cómo publicar tu app en internet.
  • 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

Archivo

Tu proyecto vive en sus documentos. Tenerlos ordenados desde el principio te ayuda a no perder decisiones, cambiar de herramienta sin empezar de cero y darle contexto a tu agente programador.

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 tu archivo vacío

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

Puedes cambiar este nombre antes de descargarlo.
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. 3Descomprime el ZIP: haz clic derecho sobre .zip y elige «Extraer todo» o «Descomprimir». Se creará una carpeta con AGENTS.md, HANDOFF.md y Documentos.
  4. 4Comprueba la carpeta extraída y borra el ZIP. El comprimido solo servía para transportarla; a partir de ahora trabajarás siempre dentro de la carpeta descomprimida.
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

A veces el asesor contesta raro. Aquí tienes algunos prompts para reconducirlo. Úsalos en cualquier paso del método si se va por las ramas, si te suelta un rollo aburrido o se inventa cosas.

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

Los últimos documentos antes de construir: el prompt maestro para arrancar a tu , sus reglas permanentes (el AGENTS.md) y el plan por fases. Con esto cierras la preparación.

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

Aquí el agente convierte tus documentos en una app. Tú decides el orden, revisas lo que hace y usas a tu asesor como segunda opinión cuando lo necesites.

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.

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 la app ya funciona

Ajustes

La app ya funciona. Ahora la afinas antes de abrirla al mundo. Primero la revisas a fondo (auditoría); después la publicas con cabeza: verlo → confirmar → y → . Publica al final de una fase estable, nunca a mitad de un cambio.

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 publicar, ten esto en el radar

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.

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 el agente usa palabras que no conoces

No tienes que dominarlas para avanzar. Si el agente habla de un endpoint, una rama o un merge, pídele que te explique qué significa en este proyecto y qué decisión necesita de ti.

Un endpoint conecta una parte de tu app con una función o unos datos; una rama permite probar cambios sin tocar la versión principal; un merge une esos cambios cuando están listos.

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.

Frases para reconducir a tu asesor

Estas son para el asesor (el chat con el que piensas), no para el agente. Úsalas en cualquier paso del método si se enrolla, se va por las ramas o se inventa cosas:

Para que recorte funciones 
Creo que estoy metiendo demasiadas funciones. Ayúdame a separar lo imprescindible para el MVP de lo que debería dejar para más adelante.
Para que te lo explique sencillo 
Explícame esto en lenguaje sencillo, como si no tuviera conocimientos técnicos. Dime qué significa, por qué importa y qué decisión tengo que tomar.
Para que resuma y simplifique 
Resume y simplifica. Dame solo lo necesario para avanzar al siguiente paso de la guía.
Cuando sospechas que se lo inventa 
Revisa tu respuesta y separa qué sale de la información que yo te he dado y qué son suposiciones tuyas. No quiero que inventes requisitos.
Para guardar la respuesta como documento 
Convierte lo anterior en un documento claro en Markdown, con títulos y listas. No añadas funciones nuevas.

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 tus documentos, un plan por fases, reglas para trabajar con tu agente y un método para revisar y publicar con más control. 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

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 publicar

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 y producción. En local pruebas la app en tu ordenador; en producción ya está publicada para otras personas.

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

Desplegar (deploy). Publicar la app en internet para que otras personas la usen.

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 y prioridades antes de publicar.

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.