Vibe coding para principiantes: cómo empezar paso a paso

El vibe coding para principiantes se resume en cinco pasos: elige una herramienta que ejecute la app por ti, describe una app pequeña con palabras sencillas, pruébala como un usuario, pide una corrección cada vez y publica cuando funcione. No necesitas saber programar. Este tutorial recorre cada paso con un primer proyecto real, los prompts exactos que debes escribir y los errores que casi todos los principiantes cometen en su primera semana.

Si primero quieres el contexto (de dónde viene el término y por qué la gente discute sobre él), lee qué es el vibe coding. Esta página es la parte práctica.

Qué necesitas antes de empezar

Menos de lo que crees:

• Un navegador y una cuenta en una herramienta de vibe coding. Los principiantes deberían elegir un creador de apps con IA, que escribe el código, lo ejecuta y lo aloja, en lugar de un asistente de programación que espera que gestiones tú mismo los archivos y los servidores.
• Una idea pequeña. No tu startup. Una herramienta para una persona (tú) con una o dos pantallas.
• Una o dos horas sin interrupciones. La primera sesión te enseña el ritmo.

Eso es todo. Sin instalaciones, sin curso de programación, sin terminal.

Qué herramienta elegir si empiezas

La herramienta importa menos que los hábitos, pero debería hacer tres cosas: mostrar una vista previa en vivo mientras construye, permitirte deshacer un cambio malo y publicar en un enlace que puedas compartir. Nuestra comparativa de las mejores herramientas de vibe coding cubre las principales opciones con honestidad. Mythex es una de ellas: describes la app en el chat, construye una app full-stack real con vista previa en vivo, añade una base de datos cuando la app necesita recordar cosas y publica con un clic. El plan Free no pide tarjeta.

Paso 1: elige un primer proyecto que puedas terminar

Los principiantes suelen fracasar por apuntar demasiado alto. Un buen primer proyecto:

• Te resulta útil personalmente, así que lo probarás bien.
• Cabe en una o dos pantallas.
• Guarda una pequeña cantidad de tus propios datos.
• No tiene pagos, ni equipos, ni datos personales sensibles.

Buenos primeros proyectos:

Usaremos la lista de lectura durante el resto de este tutorial.

Paso 2: escribe tu primer prompt

Tu primer mensaje define la forma de todo lo demás. Di para quién es, qué hace y qué aspecto debería tener. Mantenlo en un párrafo corto.

Un primer prompt débil:

Hazme una app de libros.

Un buen primer prompt:

Crea una app de lista de lectura para mí. Puedo añadir un libro con título, autor y estado (quiero leerlo, leyendo, terminado). Muestra los libros como tarjetas agrupadas por estado, con los más recientes primero. Puedo cambiar el estado de un libro o eliminarlo. Hazlo limpio y simple: fondo blanco, un color de acento, que funcione en mi móvil. Guarda los libros para que sigan ahí después de refrescar.

Fíjate en lo que hace el segundo. Enumera los campos, las acciones, el diseño y una regla que los principiantes siempre olvidan: guarda los datos para que sobrevivan a un refresco. Sin esa línea, muchas herramientas crean una página que parece terminada pero lo olvida todo al recargar.

Para más puntos de partida, consulta nuestra hoja de prompts de vibe coding.

Pide un plan cuando tengas dudas

Si no sabes bien cómo describir algo, pide a la IA que planifique antes de construir:

Antes de construir nada, dime con palabras sencillas qué pantallas vas a crear, qué datos vas a guardar y qué necesitas que decida yo.

En Mythex para eso sirve el modo Plan: el agente expone el enfoque y tú lo apruebas antes de que cambie ningún archivo.

Paso 3: pruébala como un usuario, no como quien la construyó

Cuando aparezca la vista previa, no te limites a admirarla. Úsala:

1. Añade tres libros, uno de ellos con un título muy largo.
2. Cambia un estado. ¿La tarjeta pasa al grupo correcto?
3. Refresca la página. ¿Siguen ahí los libros?
4. Intenta añadir un libro con el título vacío. ¿Qué pasa?
5. Abre la vista previa en tu móvil o estrecha la ventana del navegador.

Anota con palabras sencillas lo que va mal. "El título largo rompe el diseño de la tarjeta" es un reporte de error perfecto. "No funciona" no lo es.

Paso 4: corrige una cosa por mensaje

Este es el hábito que separa a quienes terminan de quienes se rinden. Envía un cambio, compruébalo y luego envía el siguiente.

El título largo "The Hitchhiker's Guide to the Galaxy: The Complete Trilogy" se sale de la tarjeta. Divide los títulos largos en dos líneas y corta el resto con "…".

Después:

Si envío el formulario con el título vacío, no pasa nada y no hay ningún mensaje. Muestra "Añade un título" debajo del campo y no guardes el libro.

¿Por qué de uno en uno? Cuando pides cinco cambios en un mensaje, la IA puede hacer cuatro bien y romper algo más sin avisar, y no sabrás qué cambio lo causó. Los pasos pequeños también hacen útil el deshacer: si un cambio sale mal, vuelve a la versión inmediatamente anterior e inténtalo con una petición más clara.

Cuando algo se rompe

Pasará. Todos los creadores se topan con errores. Copia el texto exacto del error, o describe exactamente en qué hiciste clic y qué viste, y pégalo de vuelta:

Cuando hago clic en Eliminar en una tarjeta veo "Something went wrong" y el libro sigue ahí. Averigua por qué y arréglalo. Dime cuál era la causa.

Pedir la causa importa. Te enseña cómo funcionan las apps y evita que la IA adivine. Nuestra guía sobre cómo depurar una app creada con IA profundiza más.

Paso 5: hazla tuya

Cuando funcione, mejórala con los mismos pasos pequeños:

• "Añade una valoración de 1 a 5 estrellas que se vea en los libros terminados."
• "Añade un cuadro de búsqueda sobre las tarjetas que filtre por título o autor."
• "Usa un fondo blanco roto cálido y un acento verde oscuro."
• "Añade un contador arriba: libros terminados este año."

Cada uno es un único cambio que se puede probar.

Paso 6: publícala y compártela

Cuando haga lo que necesitas, publícala. En Mythex es un clic y obtienes una URL pública que puedes abrir en cualquier dispositivo o enviar a un amigo. Si más adelante quieres tu propio dominio, es una función de Pro, y nuestra guía para conectar un dominio propio lo explica.

Antes de compartir nada más allá de unos pocos amigos, lee ¿es seguro el vibe coding?. Para una lista de lectura personal el riesgo es bajo. Para una app donde desconocidos se registran y guardan datos, hay comprobaciones que debes hacer antes.

Errores de principiante que debes evitar

• Pedirlo todo a la vez. "Hazme Goodreads" produce algo que impresiona y funciona mal. Empieza por la versión útil más pequeña.
• No probar el refresco. Los datos que desaparecen al recargar son la sorpresa más común entre principiantes.
• Reescribir tu petición desde cero cada vez. Di qué cambiar y qué conservar: "Mantén el diseño, cambia solo los colores".
• Fiarte de "ya está arreglado". La IA dirá muchas veces que un error está corregido. Compruébalo tú mismo cada vez.
• Pegar contraseñas o claves de API en el chat. Si tu app necesita una clave para un servicio externo, ponla en los ajustes de secretos de la herramienta, nunca en un mensaje ni en el código. Mira cómo mantener seguras tus claves de API.
• Abandonar tras el primer error. Los errores son normales. Pégalos de vuelta y pregunta por la causa.

Qué aprender por el camino

No necesitas un curso, pero unas cuantas ideas harán más precisa cada petición. Pide a la IA que te las explique en el contexto de tu propia app:

• Frontend y backend: qué se ejecuta en el navegador del visitante y qué en un servidor. (Frontend vs backend)
• Base de datos: dónde guarda tu app sus datos. (¿Qué es una base de datos?)
• Autenticación: cómo sabe la app quién es alguien.
• Secretos: claves privadas que usa la app y que los visitantes nunca deben ver.

Un buen prompt para esto: "Explica cómo mi lista de lectura guarda un libro, desde que hago clic en Añadir hasta que se almacenan los datos. Usa palabras sencillas y menciona los archivos reales."

Tu segundo y tercer proyecto

Después de la primera app, elige algo un escalón más difícil. Un seguimiento de hábitos con un gráfico semanal. Un formulario de reservas que te envíe un correo. Un pequeño panel que lea de una hoja de Google. Nuestros ejemplos de vibe coding muestran tipos de apps reales con los prompts que hay detrás y lo que salió mal, y cómo crear una app con vibe coding lleva un proyecto más grande desde la idea hasta una app publicada con usuarios.

Cuando estés listo para empezar, abre el creador de apps con IA, pega el prompt de la lista de lectura de arriba y cámbialo por tu propia idea.

Preguntas