Ejemplos de vibe coding: 10 tipos de app reales, prompts y lo que salió mal

Los ejemplos más habituales de vibe coding son apps web pequeñas y útiles: trackers, páginas de reservas, herramientas internas, portales de clientes, páginas de captación, cuestionarios, paneles y herramientas sencillas de IA. Abajo tienes diez. Para cada una verás quién la construye, el primer prompt, lo que suele salir mal y el prompt de seguimiento que lo corrige.

Son composiciones de los proyectos que más llevan a los creadores de apps con IA, no casos de estudio de una sola persona. Los prompts se pueden copiar. Los fallos son los que aparecen una y otra vez, y por eso son la parte útil. Si el vibe coding en sí te resulta nuevo, empieza con qué es el vibe coding.

1. Un tracker de presupuesto personal

Quién lo construye: particulares que han probado con hojas de cálculo y lo han dejado.

Primer prompt:

Crea un tracker de presupuesto mensual. Añado gastos con importe, categoría (comida, alquiler, transporte, ocio, otros), fecha y una nota. Muestra el total del mes por categoría en un gráfico de barras y una lista de los gastos recientes. Puedo fijar un presupuesto por categoría y ver cuánto me queda.

Lo que salió mal: el gráfico contaba todos los gastos introducidos desde siempre, no solo los del mes, así que al segundo mes todas las categorías parecían excedidas. Además, los importes escritos con coma («1,200») se guardaban como 1.

Prompt de corrección:

Los gráficos y los totales deben incluir solo los gastos del mes seleccionado. Añade un selector de mes arriba, con el mes actual por defecto. Acepta también importes escritos con comas o espacios y guárdalos como números.

Lección: «este mes» es una regla. Di las reglas en voz alta.

2. Una página de reservas para un pequeño salón de belleza

Quién lo construye: pequeños empresarios cansados de reservar por teléfono y por mensajes directos.

Primer prompt:

Crea una página de reservas para mi salón. Los clientes eligen un servicio, una fecha y un hueco libre, y luego escriben su nombre y teléfono. Tengo una página privada de administración, detrás de un inicio de sesión, que muestra las reservas por día.

Lo que salió mal: dos clientas reservaron el mismo hueco de las 10:00 con un minuto de diferencia, porque la página solo comprobaba la disponibilidad al cargarse por primera vez. Además, una reserva de color de 90 minutos no bloqueaba los huecos posteriores.

Prompt de corrección:

Cuando un cliente envíe una reserva, comprueba en el servidor que todos los huecos que cubre siguen libres, y recházala con el mensaje «Ese horario acaba de ocuparse» si no lo están. Un servicio bloquea toda su duración, así que una reserva de 90 minutos a las 10:00 bloquea las 10:00, las 10:30 y las 11:00.

Lección: todo lo que dos personas pueden hacer a la vez necesita una comprobación en el servidor. Para la versión completa, consulta cómo crear una app de reservas.

3. Una carta de restaurante con código QR

Quién lo construye: dueños de cafeterías y restaurantes que reimprimen la carta con demasiada frecuencia.

Primer prompt:

Crea una web de carta para móvil para mi cafetería. Secciones para desayunos, comidas, bebidas y postres, y cada plato con nombre, precio, descripción corta y etiquetas dietéticas (vegano, sin gluten). Necesito una página de administración para editar los platos y marcarlos como agotados. Muestra un código QR que pueda imprimir y que enlace a la carta.

Lo que salió mal: nada se rompió, pero la carta iba lenta con el wifi de la cafetería porque se cargaban las fotos de tamaño completo del móvil en cada plato.

Prompt de corrección:

Las fotos de la carta pesan demasiado. Redimensiona las imágenes subidas a un máximo de 800 px de ancho, comprímelas y cárgalas de forma diferida a medida que el visitante hace scroll.

Lección: prueba con una conexión lenta, no solo en tu oficina.

4. Un control de equipos o de stock para un equipo

Quién lo construye: personas de operaciones que sustituyen una hoja de cálculo compartida.

Primer prompt:

Crea una herramienta de inventario para el equipo de almacén. Los artículos tienen nombre, SKU, cantidad, ubicación y un nivel mínimo. El personal inicia sesión y puede añadir stock, retirar stock indicando un motivo y ver una lista de los artículos por debajo del mínimo resaltados en rojo. Guarda un historial de cada cambio y de quién lo hizo.

Lo que salió mal: el historial mostraba «usuario 3» en lugar de nombres, y retirar más stock del disponible dejaba la cantidad en negativo.

Prompt de corrección:

Muestra en el historial el nombre de la persona, no su ID. No permitas una retirada que deje la cantidad por debajo de cero; muestra «Solo quedan 4 en stock» en su lugar.

Lección: describe lo que debe ser imposible, no solo lo que debe ser posible. Nuestra guía sobre cómo crear una app de gestión de inventario cubre el resto.

5. Un portal de clientes para un autónomo o un estudio

Quién lo construye: diseñadores, contables, consultores y agencias.

Primer prompt:

Crea un portal de clientes. Invito a los clientes por correo electrónico. Cada cliente inicia sesión y ve solo sus proyectos, archivos y facturas, y puede dejar comentarios. Entro como administrador y lo veo todo.

Lo que salió mal: este es el fallo más importante de la lista. Las páginas solo mostraban a cada cliente sus propios proyectos, pero el servidor devolvía cualquier proyecto si cambiabas el número en la barra de direcciones. Navegar como un solo cliente nunca lo revelaba.

Prompt de corrección:

Revisa cada ruta del servidor que devuelva proyectos, archivos, comentarios o facturas. Cada una debe confirmar que el cliente que ha iniciado sesión es el propietario del registro, y devolver «no encontrado» en caso contrario. Después pruébalo: inicia sesión como cliente A e intenta abrir el proyecto del cliente B por su ID.

Lección: ocultar algo en pantalla no es lo mismo que protegerlo. Más sobre esto en ¿es seguro el vibe coding?.

6. Una página de lanzamiento con lista de espera

Quién lo construye: fundadores que prueban una idea antes de construirla.

Primer prompt:

Crea una página de inicio para una app que ayuda a profesores particulares a programar clases y cobrar pagos. Titular principal, subtítulo, registro por correo electrónico, tres beneficios, una sección de cómo funciona y unas preguntas frecuentes. Guarda los registros en una base de datos con la fecha y permíteme descargarlos en CSV desde una página privada.

Lo que salió mal: en pocos días la lista se llenó de registros basura de bots, y la página no tenía título ni descripción, así que los enlaces compartidos mostraban una vista previa en blanco.

Prompt de corrección:

Añade una protección básica contra bots al formulario de registro (un campo oculto tipo honeypot y un límite de 5 registros por IP a la hora). Añade un título de página, una meta descripción y una imagen para compartir en redes sociales.

Lección: un formulario público acaba encontrándose. Consulta cómo crear una página de lista de espera.

7. Una app de cuestionarios para un profesor

Quién lo construye: profesores y formadores que quieren algo más ligero que un LMS.

Primer prompt:

Crea una app de cuestionarios para mi clase. Creo cuestionarios con preguntas de opción múltiple y una única respuesta correcta en cada una. Los alumnos entran con un código y su nombre de pila, responden las preguntas y ven su puntuación al final. Yo veo una tabla de resultados por cuestionario.

Lo que salió mal: las respuestas correctas se enviaban al navegador junto con las preguntas, así que un alumno curioso podía leerlas en el código fuente de la página. Además, los alumnos podían volver a enviar hasta sacar un 100 %.

Prompt de corrección:

No envíes las respuestas correctas al navegador. Comprueba las respuestas en el servidor después del envío. Permite un único envío por nombre de alumno y cuestionario, y muéstrale al profesor si alguien lo intenta de nuevo.

Lección: el navegador pertenece al usuario. Todo lo que hay allí se puede leer.

8. Una pequeña herramienta de IA

Quién lo construye: profesionales del marketing, redactores y fundadores que quieren un asistente de IA centrado en una tarea.

Primer prompt:

Crea una herramienta que convierta la descripción de un producto en cinco publicaciones para redes sociales con distintos tonos (cercano, experto, divertido, corto, largo). Usa una API de IA. Pego la descripción, elijo una plataforma y obtengo las publicaciones con botones para copiar.

Lo que salió mal: la primera versión llamaba al servicio de IA directamente desde el navegador, con la clave de la API dentro de la página, donde cualquiera podía copiarla y disparar la factura.

Prompt de corrección:

Traslada la llamada a la IA al servidor. Guarda la clave de la API como secreto, nunca en el código del frontend. Limita cada visitante a 20 generaciones al día.

Lección: las claves van en secretos en el servidor. Consulta cómo mantener seguras las claves de API y cómo añadir funciones de IA a tu app.

9. Una web de empresa en árabe e inglés

Quién lo construye: empresas del Golfo y del resto del mundo árabe que atienden en dos idiomas.

Primer prompt:

Crea una web para mi empresa de interiorismo en árabe e inglés, con un selector de idioma. Páginas: inicio, servicios, portafolio, sobre nosotros y contacto. El árabe debe ir completamente de derecha a izquierda.

Lo que salió mal: el texto árabe estaba alineado a la derecha, pero la maquetación no estaba reflejada: las flechas seguían apuntando en el sentido equivocado y el menú estaba en el lado incorrecto. Además, algunos números de teléfono se mostraban al revés.

Prompt de corrección:

En árabe, refleja toda la maquetación: pon la dirección de la página de derecha a izquierda, coloca el menú a la derecha, invierte los iconos direccionales y mantén los números de teléfono y los correos electrónicos de izquierda a derecha dentro del texto en árabe.

Lección: el diseño de derecha a izquierda es una maquetación, no una simple alineación. Mythex gestiona el árabe y otros diseños de derecha a izquierda, y puedes escribir los prompts directamente en árabe.

10. Un tracker que se convierte en app para el teléfono

Quién lo construye: entrenadores, gimnasios y grupos comunitarios cuyos usuarios viven en el móvil.

Primer prompt:

Crea un registro de entrenamientos para mis clientes de entrenamiento personal. Cada cliente inicia sesión, ve el plan que le he asignado para la semana, marca los ejercicios y anota los pesos. Yo veo el progreso de cada cliente en un gráfico.

Lo que salió mal: la app web funcionaba, pero en el móvil los botones eran demasiado pequeños para tocarlos en mitad del entrenamiento y el gráfico no se leía.

Prompt de corrección:

Diseña esto para usarlo con una sola mano en el móvil: zonas de toque grandes en la parte inferior de la pantalla, un ejercicio por pantalla con botones grandes de Siguiente y Hecho, y un gráfico semanal de progreso sencillo.

Lección: si la gente lo va a usar en el móvil, diseña primero para el móvil. En Mythex Pro, la app publicada puede convertirse después en una app de Android para Google Play y en una app de iPhone enviada a TestFlight; la app del teléfono abre tu app publicada, así que cada publicación la actualiza. Consulta la página del creador de apps móviles.

Los patrones detrás de estos ejemplos

En los diez casos, los fallos se agrupan en unas pocas categorías:

Nada de esto exige leer código. Exige probar como un usuario curioso y algo hostil, y describir con precisión lo que ves.

Pruébalo tú

Elige el ejemplo más cercano a tu idea, copia su primer prompt y cambia los detalles. Después usa el prompt de corrección como lista de comprobación antes de compartirlo. Nuestra chuleta de prompts de vibe coding tiene 30 más, y cómo crear una app con vibe coding lleva un proyecto desde la idea hasta la app publicada. Cuando estés listo, empieza en el creador de apps con IA o mira las plantillas para tener un punto de partida.

Preguntas