Ejemplos de vibe coding: 10 tipos de apps reales, prompts y qué salió mal

Los ejemplos de vibe coding más comunes son aplicaciones web pequeñas y útiles: seguimientos, páginas de reservas, herramientas internas, portales de clientes, landing pages, cuestionarios, paneles y herramientas de IA sencillas. A continuación tienes diez. De cada una verás quién la crea, el primer prompt, qué suele fallar y el prompt de seguimiento que lo arregla.

Son composiciones de los proyectos que la gente lleva con más frecuencia 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 es nuevo para ti, empieza por qué es el vibe coding.

1. Un seguimiento de presupuesto personal

Quién lo crea: personas que probaron las hojas de cálculo y se rindieron.

Primer prompt:

Crea un seguimiento de presupuesto mensual. Añado gastos con importe, categoría (comida, alquiler, transporte, ocio, otros), fecha y una nota. Muestra el total de este 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 queda.

Qué falló: el gráfico contaba todos los gastos introducidos, no solo los de este mes, así que en el segundo mes todas las categorías parecían excedidas. Además, los importes escritos con coma ("1,200") se guardaban como 1.

Prompt para arreglarlo:

El gráfico 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 una peluquería pequeña

Quién lo crea: dueños de pequeños negocios cansados de reservar por teléfono y mensajes directos.

Primer prompt:

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

Qué falló: dos clientes reservaron el mismo horario de las 10:00 con un minuto de diferencia, porque la página solo comprobaba la disponibilidad al cargarse. Además, una reserva de color de 90 minutos no bloqueaba los horarios siguientes.

Prompt para arreglarlo:

Cuando un cliente envíe una reserva, comprueba en el servidor que todos los horarios que cubre siguen libres y recházala con "Ese horario acaba de ocuparse" si no es así. 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: cualquier cosa que dos personas puedan hacer a la vez necesita una comprobación en el servidor. Mira cómo crear una app de reservas para la versión completa.

3. Un menú de restaurante con código QR

Quién lo crea: dueños de cafeterías y restaurantes que reimprimen el menú demasiadas veces.

Primer prompt:

Crea un sitio web de menú para móvil para mi cafetería. Secciones de desayuno, almuerzo, bebidas y postres, 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 al menú.

Qué falló: nada se rompió, pero el menú iba lento con el wifi de la cafetería porque se cargaban fotos de móvil a tamaño completo para cada plato.

Prompt para arreglarlo:

Las fotos del menú 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 inventario para un equipo

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

Primer prompt:

Crea una herramienta de inventario para el equipo de nuestro 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 artículos por debajo del mínimo resaltados en rojo. Guarda un historial de cada cambio y de quién lo hizo.

Qué falló: el historial mostraba "usuario 3" en lugar de nombres, y retirar más stock del disponible dejaba la cantidad en negativo.

Prompt para arreglarlo:

Muestra el nombre de la persona en el historial, 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 debería ser imposible, no solo lo que debería ser posible. Nuestra guía sobre crear una app de inventario cubre el resto.

5. Un portal de clientes para un freelance o un estudio

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

Primer prompt:

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

Qué falló: 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 para arreglarlo:

Revisa cada ruta del servidor que devuelva proyectos, archivos, comentarios o facturas. Cada una debe confirmar que el cliente con sesión iniciada es el propietario del registro y, si no, devolver "no encontrado". Luego pruébalo: inicia sesión como el 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 crea: fundadores que prueban una idea antes de construirla.

Primer prompt:

Crea una landing page para una app que ayuda a los profesores particulares a organizar clases y cobrar. Titular principal, subtítulo, registro por correo, 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 deja que los descargue como CSV desde una página privada.

Qué falló: 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 para arreglarlo:

Añade una protección básica contra bots al formulario de registro (un campo honeypot oculto y un límite de 5 registros por IP por 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. Mira cómo crear una página de lista de espera.

7. Una app de cuestionarios para un profesor

Quién lo crea: 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 respuesta correcta 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.

Qué falló: 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. Los alumnos también podían reenviar hasta sacar el 100 %.

Prompt para arreglarlo:

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

Lección: el navegador pertenece al usuario. Todo lo que hay en él se puede leer.

8. Una pequeña herramienta de IA

Quién lo crea: especialistas en marketing, redactores y fundadores que quieren un asistente de IA específico.

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 de copiar.

Qué falló: 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 para arreglarlo:

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

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

9. Un sitio web de negocio en árabe e inglés

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

Primer prompt:

Crea un sitio web para mi empresa de diseño de interiores en árabe e inglés, con un selector de idioma. Páginas: inicio, servicios, portafolio, quiénes somos y contacto. El árabe debe ser totalmente de derecha a izquierda.

Qué falló: el texto en árabe estaba alineado a la derecha, pero el diseño no estaba reflejado: las flechas seguían apuntando al lado equivocado y el menú estaba en el lado incorrecto. Además, los números de teléfono aparecían al revés en algunos sitios.

Prompt para arreglarlo:

En árabe, refleja todo el diseño: fija 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 de izquierda a derecha dentro del texto en árabe.

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

10. Un seguimiento que se convierte en app móvil

Quién lo crea: 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 registra los pesos. Yo veo el progreso de cada cliente en un gráfico.

Qué falló: la app web funcionaba, pero en el móvil los botones eran demasiado pequeños para tocarlos en plena rutina y el gráfico no se leía.

Prompt para arreglarlo:

Diséñalo para usarse con una sola mano en el móvil: áreas táctiles grandes en la parte inferior de la pantalla, un ejercicio por pantalla con botones grandes de Siguiente y Hecho, y un gráfico sencillo de progreso semanal.

Lección: si la gente lo va a usar en el móvil, diséñalo 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 móvil abre tu app publicada, así que cada Publish 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:

Ninguno de estos casos requiere leer código. Requieren que pruebes como un usuario curioso y algo hostil, y que describas con precisión lo que ves.

Prueba uno tú mismo

Elige el ejemplo más cercano a tu idea, copia su primer prompt y cambia los detalles. Luego usa el prompt de arreglo como lista de comprobación antes de compartirla. Nuestra hoja de prompts de vibe coding tiene 30 más, y cómo crear una app con vibe coding recorre un proyecto desde la idea hasta la app publicada. Cuando estés listo, empieza en el creador de apps con IA o explora las plantillas para ir más rápido.

Preguntas