Vibe Coding paso a paso Creado por Raquel Marco
Tu avance se guarda automáticamente en este navegador. Si cambias de dispositivo o borras los datos del navegador, el avance se perderá.
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.

Hoja de ruta

1
Preparas tus archivosDejas 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é puedes esperar de esta guía?

No construye tu app directamente. Te ayuda a preparar el camino para construirla mejor, con un chat de IA que actúa como asesor y con un agente programador que trabaja sobre el código.

¿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.

Otros conceptos que acabarán sonándote

Para hablar con la IA

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.

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

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.

Primero pensar y documentar. Después código.

Antes de empezar

Crea la base de tu proyecto

Aquí vas a crear una base ordenada para guardar todo lo importante de tu MVP. No tienes que rellenar nada todavía: solo dejar lista la estructura desde la que vas a trabajar.

Descarga la estructura base

Tendrás en tu dispositivo los archivos principales, listos para usar. Aquí vivirá tu proyecto mientras lo preparas y hasta que decidas si quieres publicarlo.

Descomprime el ZIP en el lugar que quieras de tu dispositivo
Opcional: guardar versiones con Git

Git sirve para guardar versiones de tu proyecto, como puntos de control a los que puedes volver si algo sale mal. Es útil, pero no obligatorio: si ahora te suena raro, puedes saltarte este bloque sin problema.

Si te animas a activarlo, sigue estas instrucciones.

Importante: haz esto dentro de la carpeta descomprimida del proyecto, no dentro del archivo ZIP.

PC Windows: abrir la terminal en la carpeta correcta

1. Descomprime el ZIP de tu proyecto.

2. Abre la carpeta descomprimida. Si ves AGENTS.md, HANDOFF.md, .gitignore y Documentos, estás en el sitio correcto.

3. Haz clic en la barra de dirección de la carpeta, arriba del todo.

4. Escribe cmd y pulsa Enter. Se abrirá una terminal ya colocada en esa carpeta.

Otra opción: clic derecho en un espacio vacío de la carpeta y elige Abrir en Terminal.

Comprobar si tienes Git

Copia esto, pégalo en la terminal y pulsa Enter:

git --version

Si aparece algo parecido a git version ..., ya lo tienes.

Si Windows dice que no reconoce el comando, instala Git desde la página oficial: git-scm.com/downloads/win. Después cierra la terminal, abre una nueva y vuelve a probar git --version.

Mac: abrir la terminal en la carpeta correcta

1. Descomprime el ZIP de tu proyecto.

2. Abre la carpeta descomprimida en Finder. Si ves AGENTS.md, HANDOFF.md, .gitignore y Documentos, estás en el sitio correcto.

3. Abre la app Terminal.

4. Escribe cd dejando un espacio al final.

5. Arrastra la carpeta del proyecto desde Finder hasta la terminal y pulsa Enter. Así no tienes que escribir la ruta a mano.

Comprobar si tienes Git

Copia esto, pégalo en la terminal y pulsa Enter:

git --version

Si aparece algo parecido a git version ..., ya lo tienes.

Si macOS te ofrece instalar herramientas de desarrollo, acepta la instalación y vuelve a probar.

También puedes instalar Git desde la página oficial: git-scm.com/downloads/mac. Si ya usas Homebrew, otra opción es copiar brew install git.

Primer guardado de versión

Cuando la terminal esté abierta en la carpeta correcta y Git funcione, copia este bloque entero, pégalo en la terminal y pulsa Enter:

git init
git add .
git commit -m "estructura inicial del proyecto"

Si Git te pide nombre y email, copia este bloque cambiando los datos por los tuyos:

git config --global user.name "Tu nombre"
git config --global user.email "tu@email.com"

Después vuelve a copiar y pegar el bloque de Primer guardado de versión.

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 investigar mercado y competencia

Úsala antes de cerrar del todo la idea, para detectar alternativas, huecos y dudas sin convertir esto en un curso de negocio.

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í aclaras y diagnosticas la idea, como se la contarías a una persona. Todavía no hablamos de pantallas, datos ni herramientas técnicas: 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 7 bloques. Abre cada bloque, responde sus preguntas y pasa al siguiente. Puedes dejar en blanco lo que aún no tengas claro.

Tu idea va tomando forma0 / 19

¿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.
El mercado 0/3

Qué alternativas existen, en qué te diferencias y si estás entrando en un nicho pequeño o grande.

Directos: hacen algo parecido. Indirectos: resuelven el problema de otra forma.

Busca una diferencia concreta y creíble, no una promesa enorme.

No hace falta calcularlo perfecto. Basta con una primera hipótesis razonable.

Las personas 0/3

Para quién existe la app, qué problema tiene y cómo lo resuelve hoy.

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

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

Piensa en herramientas, costumbres, hojas de cálculo, WhatsApp, llamadas, papel o soluciones manuales.

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.

Modelo de negocio 0/2

Cómo podría sostenerse el producto, aunque no se monetice desde el primer día.

Puede ser ahora, más adelante o una hipótesis. No fuerces ingresos si todavía no toca.

Anota el modelo probable: vender a empresas, a consumidores, a instituciones, marketplace, servicio, etc.

Objetivos 0/3

Qué vas a mirar después de lanzar el MVP para decidir si merece la pena seguir.

Elige una señal concreta: uso, registros, publicaciones, reservas, contactos, repetición, etc.

Pueden ser herramientas simples: analítica web, formularios, entrevistas, hojas de cálculo o logs básicos.

No tiene que ser estadístico perfecto. Busca una muestra suficiente para aprender algo real.

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 con sus hipótesis y riesgos.

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

¿Una mirada experta antes de seguir?

Revisa tu briefing conmigo

Acabas de ordenar tu idea. Antes de dársela al agente, puedo revisarla y devolverte un documento mejorado con comentarios en 48h.

Ver revisión de briefing — 97€

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 y su diseño, partiendo del usuario real, el problema, el benchmark, la propuesta de valor, el modelo de negocio, los objetivos de medición, los límites del MVP y los riesgos detectados. 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 diagnosticada la idea, el mercado, el modelo y los objetivos. Ahora vas a preparar el plan de trabajo para construir solo el MVP mínimo.

Crearás tres cosas: las instrucciones de arranque, el plan por fases y las reglas que tu agente deberá seguir siempre, incluida una regla clave: no construir funcionalidades futuras, monetización avanzada ni analítica compleja salvo autorización explícita.

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

¿Prefieres no hacerlo solo/a? En una sesión de 60 minutos preparamos juntos los documentos de tu MVP, paso a paso.
Sesión de preparación de MVP — 120€

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, .gitignore 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.

Comprobación de negocio ligera

Antes de ampliar, haz estas preguntas sencillas:

¿El MVP sigue resolviendo el problema inicial?

¿Se ha construido solo lo imprescindible?

¿La propuesta de valor se entiende frente a las alternativas?

¿La métrica de éxito se puede medir con herramientas simples?

¿Qué habría que validar con usuarios reales antes de seguir ampliando?

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é.

Ahora empieza la validación real: enseñar el MVP a usuarios, observar qué entienden, qué usan y qué sobra.

Acompañamiento completo — desde 450€ Desde la idea hasta el handoff al agente, con feedback en cada fase. Si quieres, te llevo de la mano.