Cómo crear una app con vibe coding: de la idea a la app publicada

Para crear una app con vibe coding, escribe una descripción de una página de la primera versión, dásela a un creador de apps con IA como primer prompt y luego haz crecer la app en pasos pequeños y probados: datos, inicio de sesión, el flujo principal, pulido, una revisión de seguridad y, por último, la publicación. Esta guía sigue un proyecto de ejemplo, una app de reservas de clases para un pequeño estudio de yoga, en cada etapa, con los prompts usados en cada paso.

Si nunca has creado nada de este modo, nuestro tutorial de vibe coding para principiantes empieza con algo más pequeño. Para una visión general más amplia que no se limita al vibe coding, consulta cómo crear una app con IA.

El proyecto

Imagina a Sara, dueña de un estudio de yoga que imparte ocho clases a la semana. Las reservas llegan por WhatsApp; ella lleva una lista en papel por clase y a menudo sobrevende plazas. Quiere que:

• Los alumnos vean el horario de la semana y reserven una plaza.
• Cada clase tenga un aforo.
• Ella tenga una lista por clase que pueda consultar en la puerta.
• Los alumnos puedan cancelar hasta dos horas antes.

Esa es toda la primera versión. Nada de pagos, bonos o aplicación de la tienda. Eso vendrá después, o nunca.

Paso 1: escribe una especificación de una página

Antes de abrir ninguna herramienta, escribe la primera versión en palabras sencillas. Diez minutos aquí ahorran horas de ida y vuelta. Una forma útil:

• Quién la usa: los alumnos (reservar y cancelar), Sara (gestionar clases y ver las listas).
• Pantallas: horario, detalle de la clase, mis reservas, clases de administración, lista de clases de administración.
• Datos: clases (nombre, profesor, hora de inicio, duración, aforo), reservas (alumno, clase, estado), alumnos (nombre, correo, teléfono).
• Reglas: no reservar una clase llena; una reserva por alumno y clase; cancelar hasta dos horas antes; solo Sara ve las páginas de administración.
• Fuera de la v1: pagos, bonos de clases, listas de espera, recordatorios.

La lista de «fuera de la v1» es la más importante. Es lo que mantiene el proyecto terminable. Nuestra guía sobre cómo escribir un documento de requisitos de producto con IA profundiza si quieres una especificación más completa.

Paso 2: elige una herramienta que cubra todo el ciclo

Para una app con base de datos, inicios de sesión y una URL pública, usa un creador de apps con IA que ejecute el código, conecte una base de datos y publique, en lugar de un asistente de chat que te entregue archivos. Nuestra comparativa de herramientas de vibe coding enumera las opciones. Aquí usaremos Mythex porque cubre cada paso en un solo sitio: chat, vista previa en vivo, una base de datos real y almacenamiento de archivos, y publicación con un clic.

Paso 3: el primer prompt

Convierte la especificación en un párrafo. No pegues todo el documento de golpe con cada detalle; da el núcleo y añade el resto por pasos.

Crea una app de reservas de clases para mi estudio de yoga. Los alumnos se registran con nombre, correo y teléfono, ven el horario de esta semana y reservan una plaza en una clase. Cada clase tiene nombre, profesor, hora de inicio, duración y aforo; una clase llena muestra «Completa» y no se puede reservar. Los alumnos ven sus reservas y pueden cancelar hasta dos horas antes de la clase. Soy la administradora: puedo añadir y editar clases y ver la lista de quién tiene reserva en cada una. Diseño tranquilo y sencillo que funcione bien en el móvil.

Si no estás seguro de que la herramienta lo ha entendido, pide primero un plan. En Mythex, el modo Plan describe las pantallas y los datos antes de escribir código, y tú lo apruebas.

Paso 4: haz funcionar el bucle básico

El bucle básico es lo único para lo que existe la app: un alumno reserva una clase y Sara la ve. Prueba solo eso:

1. Regístrate como alumno y reserva una clase.
2. Abre la vista de administración. ¿Está la reserva?
3. Reserva la misma clase otra vez. Debería rechazarlo.
4. Pon el aforo de una clase en 2, resérvala desde dos cuentas de alumno e intenta una tercera.

En este punto suelen aparecer dos problemas. El horario muestra las horas en la zona horaria del servidor, no en la del estudio. Y la comprobación de «Completa» solo ocurre en la página, así que un doble clic rápido crea dos reservas.

Muestra todas las horas de las clases en la zona horaria del estudio, [Asia/Dubai], sea cual sea la configuración del dispositivo del visitante.

Comprueba el aforo y las reservas duplicadas en el servidor cuando se crea una reserva, no solo en la página. Si dos peticiones llegan a la vez para la última plaza, solo una debe tener éxito.

Arregla el bucle básico antes de añadir nada más. Todo lo demás depende de él.

Paso 5: añade el resto de reglas, una por mensaje

Ahora repasa las reglas de la especificación una a una:

Los alumnos pueden cancelar una reserva hasta dos horas antes del inicio de la clase. Después de ese momento, oculta el botón de cancelar y rechaza la cancelación en el servidor con un mensaje claro.

Solo mi cuenta puede abrir las páginas de administración. Asegúrate de que esto se comprueba en el servidor para cada acción de administración, no solo ocultando el menú.

Tras cada una, pruébala y avanza solo cuando funcione. Si un cambio rompe algo, vuelve al último punto de control correcto y prueba con una petición más clara, en lugar de apilar arreglos encima.

Paso 6: pule lo que notarán los usuarios reales

Los usuarios reales se fijan en los pequeños detalles. Una lista corta para la app de Sara:

• Estados vacíos: «Todavía no hay clases esta semana» en lugar de una página en blanco.
• Confirmación: «Tienes plaza en Vinyasa, martes a las 18:00» después de reservar.
• Diseño en el móvil: botones grandes, horario legible en una pantalla de 375 px.
• Plazas libres: «3 plazas libres» en cada clase, para que los alumnos reserven antes.

En cada tarjeta de clase muestra las plazas libres, por ejemplo «3 de 12 libres». Tras reservar, muestra una confirmación con el nombre de la clase, el día y la hora, y un botón para ir a mis reservas.

Paso 7: prueba como si fueras un desconocido

Antes de que lo use nadie más, dedica media hora a intentar romperla:

También puedes pedir a la IA que recorra casos límite:

Enumera diez cosas que podría hacer un alumno real que rompieran la reserva o la cancelación, prueba cada una y corrige lo que falle. Dime qué has cambiado.

Paso 8: una revisión de seguridad

Esta app guarda nombres, correos y teléfonos, así que merece la pena una revisión de seguridad breve. Las preguntas principales:

• ¿Puede un alumno ver las reservas o los datos de contacto de otro?
• ¿Hay claves o contraseñas en código que se ejecuta en el navegador?
• ¿Está el formulario de registro protegido frente a bots?
• ¿Existe una copia de seguridad de los datos?

Nuestra página sobre si el vibe coding es seguro explica cada comprobación y ofrece prompts para cada una, y la lista de seguridad para apps creadas con IA es la versión completa.

Paso 9: publica

Cuando el bucle básico, las reglas y las comprobaciones pasen, publica. En Mythex es un clic, y la app obtiene una URL pública con su base de datos y su alojamiento ya configurados. En Pro puedes conectar tu propio dominio, como book.sarasyoga.com; consulta cómo conectar un dominio propio.

Antes de enviar el enlace, revisa una vez más la versión publicada. Reserva una clase desde tu móvil. Producción y vista previa deberían comportarse igual, pero compruébalo.

Paso 10: primeros usuarios y la siguiente versión

Da el enlace primero a cinco alumnos habituales, no a todos. Pídeles que reserven su próxima clase a través de él y que te digan qué les resultó confuso. Después, arregla los tres puntos principales que mencionen.

Tras unas semanas de uso real, una lista de v2 para una app así suele escribirse sola: una lista de espera para las clases llenas, recordatorios por correo la tarde anterior y bonos de clases pagados online. Cada una recibe el mismo tratamiento: especifícala en unas pocas líneas, haz el prompt, pruébala y publícala. Para añadir pagos, consulta cómo añadir pagos a tu app. Para dar a conocer la app, cómo lanzar una app y conseguir primeros usuarios.

Convertirla en una app para el móvil

Muchos estudios quieren un icono en el teléfono de sus alumnos. En Mythex Pro, la app publicada puede convertirse en una app de Android (un archivo que puedes subir a Google Play) y en una app de iPhone enviada a TestFlight con tu propia clave de App Store Connect, sin Mac. La app para el móvil abre la app web publicada, así que cada vez que publiques una actualización, la app del móvil también la tendrá.

Lo que hay que llevarse

La construcción en sí fue la parte corta. Lo que hizo la app usable fue la lista de «fuera de la v1» de la especificación, probar primero el bucle básico, las reglas del servidor para el aforo y el acceso, y cinco usuarios reales antes que cincuenta. Así es el vibe coding cuando la app tiene que funcionar para otras personas.

¿Listo para probar la tuya? Escribe tu especificación de una página y pega el primer párrafo en el creador de apps con IA. Si quieres ver más tipos de app y los prompts detrás de ellas, lee nuestros ejemplos de vibe coding.

Preguntas