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

El vibe coding para principiantes se reduce a 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 publícala cuando funcione. No necesitas saber programar. Este tutorial recorre cada paso con un primer proyecto real, los prompts exactos que hay que 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é se discute tanto), lee qué es el vibe coding. Esta página es la parte práctica.

Lo que necesitas antes de empezar

Menos de lo que crees:

• Un navegador y una cuenta en una herramienta de vibe coding. Quienes empiezan 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ú 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. Nada que instalar, ningún curso de programación, ninguna terminal.

Qué herramienta elegir como principiante

La herramienta importa menos que los hábitos, pero debería hacer tres cosas: mostrar una vista previa en directo mientras construye, permitirte deshacer un mal cambio y publicar en un enlace que puedas compartir. Nuestra comparativa de las mejores herramientas de vibe coding cubre las opciones principales con honestidad. Mythex es una de ellas: describes la app en el chat, construye una app real de pila completa con vista previa en directo, 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 a ti personalmente, así que lo probarás a fondo.
• Cabe en una o dos pantallas.
• Guarda una pequeña cantidad de tus propios datos.
• No tiene pagos, equipos ni datos personales sensibles.

Buenos primeros proyectos:

Usaremos la lista de lecturas en 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 cómo debe verse. Basta con un párrafo corto.

Un primer prompt flojo:

Hazme una app de libros.

Un buen primer prompt:

Crea una app de lista de lecturas para mí. Puedo añadir un libro con título, autor y estado (por leer, leyendo, terminado). Muestra los libros como tarjetas agrupadas por estado, con los más nuevos primero. Puedo cambiar el estado de un libro o eliminarlo. Que sea limpia y sencilla: fondo blanco, un solo color de acento, que funcione bien en mi móvil. Guarda los libros para que sigan ahí después de recargar la página.

Fíjate en lo que hace el segundo. Enumera los campos, las acciones, la maquetación y una regla que los principiantes siempre olvidan: guardar los datos para que sobrevivan a una recarga. Sin esa línea, muchas herramientas crean una página que parece terminada pero olvida todo al recargar.

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

Pide un plan cuando no estés seguro

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

Antes de construir nada, dime en palabras sencillas qué pantallas crearás, qué datos guardarás y qué necesitas que decida yo.

En Mythex, para esto 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 ha construido

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

1. Añade tres libros, uno con un título muy largo.
2. Cambia un estado. ¿La tarjeta pasa al grupo correcto?
3. Recarga 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.

Apunta lo que está mal con palabras sencillas. «El título largo rompe el diseño de la tarjeta» es un informe de error perfecto. «Está roto» no lo es.

Paso 4: corrige una cosa por mensaje

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

El título largo «La guía del autoestopista galáctico: la trilogía completa» se sale de la tarjeta. Haz que los títulos largos ocupen 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 aparece 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 solo mensaje, la IA puede hacer bien cuatro y romper algo sin que te des cuenta, y no sabrás qué cambio lo causó. Los pasos pequeños también hacen útil deshacer: si un cambio sale mal, vuelve a la versión anterior e intenta una petición más clara.

Cuando algo se rompe

Pasará. Todos los creadores tienen errores. Copia el texto exacto del error, o describe con precisión lo que pulsaste y lo que viste, y pégalo de vuelta:

Cuando pulso Eliminar en una tarjeta aparece «Algo ha salido mal» 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

Una vez que funcione, mejórala en los mismos pasos pequeños:

• «Añade una valoración de 1 a 5 estrellas que se muestre en los libros terminados.»
• «Añade un buscador encima de las tarjetas que filtre por título o autor.»
• «Usa un fondo blanco roto cálido y un verde oscuro como color de acento.»
• «Añade un contador arriba: libros terminados este año.»

Cada una es un cambio único y comprobable.

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 sobre cómo conectar un dominio propio lo explica.

Antes de compartir algo más allá de unos cuantos 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 conviene evitar

• Pedirlo todo a la vez. «Hazme Goodreads» produce algo que impresiona a primera vista y funciona mal. Empieza por la versión más pequeña útil.
• No probar la recarga. Los datos que desaparecen al recargar son la sorpresa más habitual de los principiantes.
• Reescribir la petición desde cero cada vez. Di qué cambiar y qué mantener: «Mantén la maquetación, cambia solo los colores».
• Creer que «ya está arreglado». La IA suele decir que un error está corregido. Compruébalo tú cada vez.
• Pegar contraseñas o claves de API en el chat. Si tu app necesita una clave de un servicio externo, ponla en los ajustes de secretos de la herramienta, nunca en un mensaje ni en el código. Consulta cómo mantener seguras las claves de API.
• Rendirse tras el primer error. Los errores son normales. Pégalos de vuelta y pide la causa.

Qué aprender por el camino

No necesitas un curso, pero unas pocas 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 frente a 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 cada persona.
• Secretos: claves privadas que usa la app y que los visitantes nunca deben ver.

Un buen prompt para esto: «Explícame cómo mi lista de lecturas guarda un libro, desde que pulso Añadir hasta que el dato queda almacenado. Usa palabras sencillas y menciona los archivos reales».

Tu segundo y tercer proyecto

Tras la primera app, elige algo un paso más difícil. Un tracker 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 Sheets. Nuestros ejemplos de vibe coding muestran tipos de app reales con los prompts 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 lecturas y cámbialo por tu propia idea.

Preguntas