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 constructor 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 de trabajo 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 esta forma, nuestro tutorial de vibe coding para principiantes empieza con algo más pequeño. Para una visión general más amplia que no esté ligada al vibe coding, consulta cómo crear una app con IA.

El proyecto

Imagina a Sara, dueña de un estudio de yoga, que da 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 las alumnas vean el horario de la semana y reserven una plaza.
• Que cada clase tenga un aforo.
• Una lista por clase que pueda revisar en la puerta.
• Que las alumnas puedan cancelar hasta dos horas antes.

Eso es toda la primera versión. Nada de pagos, membresías ni tiendas de apps. Eso vendrá después, o nunca.

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

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

• Quién la usa: alumnas (reservar y cancelar), Sara (gestionar clases, ver listas).
• Pantallas: horario, detalle de la clase, mis reservas, clases de administración, lista de clases de administración.
• Datos: clases (nombre, profesora, hora de inicio, duración, aforo), reservas (alumna, clase, estado), alumnas (nombre, correo, teléfono).
• Reglas: no reservar una clase llena; una reserva por alumna 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 lo más importante. Es lo que mantiene la construcción terminable. Nuestra guía sobre cómo escribir un documento de requisitos de producto con IA va más allá 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 constructor 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 lugar: 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 una vez con cada detalle; dale el núcleo y añade el resto por pasos.

Construye una app de reservas de clases para mi estudio de yoga. Las alumnas se registran con nombre, correo y teléfono, ven el horario de esta semana y reservan una plaza en una clase. Cada clase tiene un nombre, una profesora, una hora de inicio, una duración y un aforo; una clase llena muestra “Completa” y no se puede reservar. Las alumnas ven sus reservas y pueden cancelar hasta dos horas antes de la clase. Yo soy la administradora: puedo añadir y editar clases y ver la lista de quién está apuntado a cada una. Diseño tranquilo y sencillo que funcione bien en teléfonos.

Si no estás seguro de que la herramienta entendió, 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 ciclo básico

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

1. Regístrate como alumna 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, reserva desde dos cuentas de alumna 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 clase 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 solicitudes llegan a la vez por la última plaza, solo una debe tener éxito.

Arregla el ciclo 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 revisa las reglas de la especificación una a una:

Las alumnas pueden cancelar una reserva hasta dos horas antes de que empiece 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ú.

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

Paso 6: Pule lo que los usuarios reales van a notar

Los usuarios reales notan las pequeñas cosas. 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 para teléfono: botones grandes, horario legible en una pantalla de 375 px.
• Plazas libres: “Quedan 3 plazas” en cada clase, para que las alumnas reserven antes.

En cada tarjeta de clase muestra las plazas libres, por ejemplo “3 de 12 libres”. Después de 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 extraño

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

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

Enumera diez cosas que una alumna real podría hacer y que podrían romper la reserva o la cancelación, prueba cada una y corrige lo que falle. Dime qué cambiaste.

Paso 8: Una revisión de seguridad

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

• ¿Puede una alumna ver las reservas o los datos de contacto de otra?
• ¿Hay claves o contraseñas en código que se ejecuta en el navegador?
• ¿Está el formulario de registro protegido contra bots?
• ¿Hay una copia de seguridad de los datos?

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

Paso 9: Publica

Cuando el ciclo 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 teléfono. La versión de producción y la de vista previa deberían comportarse igual, pero confírmalo.

Paso 10: Primeros usuarios y la siguiente versión

Da el enlace primero a cinco alumnas habituales, no a todas. Pídeles que reserven su próxima clase a través de él y que te digan qué les resultó confuso. Luego corrige las tres cosas principales que mencionen.

Después de unas semanas de uso real, una lista v2 para una app así suele salir sola: una lista de espera para clases llenas, recordatorios por correo la tarde anterior y bonos de clases pagados en línea. Cada una recibe el mismo tratamiento: especificarla en unas líneas, pedirla con un prompt, probarla y publicarla. 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 teléfono

Muchos estudios quieren un icono en los teléfonos de sus alumnas. En Mythex Pro, la app publicada puede convertirse en una app 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 teléfono abre la app web publicada, así que cada vez que publicas una actualización, la app para teléfono también la tiene.

Qué llevarse de esto

La construcción en sí fue la parte corta. Lo que hizo la app utilizable fue la lista de “fuera de la v1” de la especificación, probar primero el ciclo 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 constructor de apps con IA. Si quieres ver más tipos de apps y los prompts detrás de ellas, lee nuestros ejemplos de vibe coding.

Preguntas