Vibe coding: MVP de una app en tiempo récord

Hoy te quiero contar cómo en aproximadamente 1 hora trabajé en el MVP de un proyecto que quiero llevar a producción.

Es una app que por el momento funcionará en móviles con Android.

Estoy usando la IA como apoyo directo en el diseño y la construcción del producto, y la experiencia está siendo muy buena.

No voy a entrar en la temática concreta de la app, lo que me interesa es contarte el proceso, las decisiones y cómo colaboré con ChatGPT y Google AI Studio para pasar de una idea a algo funcional y usable en muy poco tiempo.

Mi punto de partida fue asumir que no iba a pedirle una app a la IA en 1 prompt, quería ir paso a paso.

En lugar de eso, estructuré el trabajo en 3 fases, cada una con un objetivo distinto y sin mezclar tareas ni responsabilidades.

Después de soltar apuntes en un Doc de Workspace monté 3 prompts bien estructurados con la ayuda de ChatGPT para que Google AI Studio los entienda, debajo de la explicación de cada fase te dejo los prompts mínimamente mofidicados para no mostrar la temática de la app.

Fase 1: prompt de diseño (las pantallas)

El primer paso lo dediqué exclusivamente al diseño del producto a nivel de UX, no a la estética. Definí todas las pantallas, los estados posibles de cada una y el flujo entre ellas. En ningún momento hablé de tamaños, colores ni jerarquía visual “fina”.

Básicamente hablamos de qué ve el usuario, qué acciones tiene disponibles y qué ocurre después de cada acción. Este prompt sirvió para que AI Studio construyera una primera versión navegable del producto. El objetivo no era que fuera bonita, sino que se pudiera recorrer mentalmente para empezar a detectar problemas reales de uso.

No tuve que iterar nada, lo que hizo la IA quedó como yo quería.

PROMPT #1

Actúa como diseñador UX senior.

Quiero que definas y diseñes las pantallas de una app móvil minimalista, centrada en uso diario, personal y privado.
No implementes lógica técnica ni persistencia. Solo define pantallas, estados visibles y flujo entre ellas.

PRINCIPIOS
- UX simple
- Muy baja carga cognitiva
- Sin gamificación
- Sin juicios
- Sin mensajes motivacionales exagerados
- Mucho espacio en blanco
- Tono neutro y humano

PANTALLAS A DEFINIR

1. Onboarding
- Explica de forma clara qué hace la app
- Un solo CTA para empezar
- Lenguaje genérico, no específico de ninguna temática

2. Hoy (pantalla principal)
Debe contemplar tres estados:
- Día no registrado
- Día cerrado con estado positivo
- Día cerrado con estado negativo

Define para cada estado:
- Texto visible
- Acciones disponibles
- Acciones no disponibles

3. Pausa
- Pantalla intermedia antes de confirmar una decisión negativa
- Introduce una pausa obligatoria
- Permite volver atrás o confirmar

4. Historial
- Lista de días anteriores
- Estado por día
- Sin estadísticas ni interpretación

5. Ajustes
- Modo claro / oscuro
- Opción para borrar historial
- Información de privacidad

IMPORTANTE
- No definas tamaños, colores ni estilos visuales
- No definas lógica interna
- No inventes funcionalidades nuevas
- Limítate a UX y flujo

Fase 2: prompt de funcionalidades (cómo funciona la app)

Una vez claras las pantallas, el segundo paso se centró en cómo funciona la app por dentro. Aquí definí los estados diarios, las reglas de transición, la persistencia de datos y la lógica temporal (de la app).

En esta fase resolví cuestiones clave del MVP, como qué significa “Hoy” dentro del flujo del usuario, cuándo un día queda cerrado y cómo se comporta la app al cada vez que se inicia una sesión.

Aquí fue donde aparecieron los primeros bugs importantes, pero los fui resolviendo ajustando detalles del UX sin tocar diseño ni copy.

El código no muerde, solo hay que saber llevarlo por donde quieres…

PROMPT #2

Actúa como product designer técnico.

La UX ya está definida. No la cambies.
Tu tarea es definir y aplicar la lógica interna de la app.

CONCEPTO CLAVE
Cada día tiene un único estado final:
- estado positivo
- estado negativo

REGLAS DIARIAS

1. Un día empieza sin estado.
2. Un día puede marcarse con estado positivo.
3. Un día marcado como positivo puede pasar a estado negativo el mismo día.
4. Un día marcado como negativo no puede volver a positivo.
5. Al cambiar de día, todo vuelve a empezar.

PANTALLA HOY
- Determina el estado del día en función de la fecha actual
- Activa o desactiva acciones según el estado

PANTALLA PAUSA
- Introduce una espera obligatoria antes de confirmar una decisión negativa
- No permitir saltarla

PERSISTENCIA (INICIAL)
- Usa almacenamiento local
- Al recargar, la app debe restaurar el estado correctamente
- Nunca mostrar pantalla en blanco

RESTRICCIONES
- No modificar textos
- No modificar diseño
- No añadir pantallas
- No añadir métricas ni estadísticas

Fase 3: prompt de coherencia y refinado (que todo tenga sentido)

Aquí me puse a refinar la experiencia, no para añadir funcionalidades. Ajusté el microcopy, eliminé textos técnicos que la IA soltó y me aseguré de que cada pantalla explicara claramente qué estaba pasando sin poner a pensar demasiado al usuario.

También resolví problemas de coherencia cuando el día ya estaba cerrado y aclaré qué acciones seguían siendo posibles. Este paso fue clave para que la app dejara de sentirse como una demo técnica y empezara a comportarse como un producto usable para gente de carne y hueso.

Durante los 3 pasos anteriores la IA no tomó decisiones de producto por sí sola. Las decisiones clave, las pantallas que existían, qué estados eran válidos, qué acciones tenían sentido y cuáles no, las definí yo, a mano y con lenguaje natural.

Utilicé la IA como una herramienta de ejecución rápida, ajustada mediante prompts cada vez más específicos. Esto me permitió iterar a una velocidad que antes era impensable sin perder el control sobre el comportamiento real del producto.

PROMPT #3

La app ya funciona, pero necesito asegurar coherencia total en estados, tiempo y experiencia.

OBJETIVO
Refinar el comportamiento sin añadir funcionalidades nuevas.

TIEMPO
- Define claramente qué es “Hoy”
- Usa una fecha activa como referencia
- Permite simular el cambio de día en modo desarrollo

REGLAS DE ESTADO
- El estado visible debe derivarse siempre de la fecha activa
- Nunca mantener estados UI heredados de otro día
- Al cambiar de día, recalcular todo

HISTORIAL
- Ordenar por fecha
- Mostrar fecha absoluta
- Etiquetas “Hoy” / “Ayer” solo si corresponde

MICROCOPY
- Evitar términos técnicos como “registrado” o “guardado”
- El texto debe describir lo ocurrido hoy, no lo que hizo el sistema

ROBUSTEZ
- Evitar bloqueos
- Evitar estados sin salida
- La pantalla Hoy debe ser siempre un punto estable

IMPORTANTE
- No cambiar diseño
- No añadir pantallas
- No añadir funcionalidades
- Solo corregir coherencia y comportamiento

Iteración

A partir de las fases iniciales, mi trabajo continuó de forma iterativa.

De manera provisional añadí en el apartado Ajustes de la app herramientas para simular el paso del tiempo, revisé todo el sistema de fechas para evitar inconsistencias e integré una base de datos con Supabase para poder usar la app durante varios días.

El ejercicio quedó perfecto, fui guiando a la IA corrigiendo errores de lógica, consistencia y estado sin reescribir todo el sistema cada vez.

El resultado no fue solo un MVP que realmente funciona, sino una forma de trabajar muy clara: separar diseño, lógica y refinado, usar Google AI Studio como capa de ejecución y validar comportamiento real antes de invertir tiempo en jerarquía visual, colores y estilos, branding y todo lo demás.

Me sentí muy cómodo trabajando rápido de este modo sin perder el control del producto.

Como te dije antes, no pensaba darte mucho detalle del MVP, solo quería contarte las 3 fases que para mí son un antes y un después en mi forma de trabajar.

Ahora bien, hay una 4ª fase, que apliqué en otro proyecto y los resultados son incluso mejores.

Pero de eso te hablaré más adelante.

Y no lo dudes, en cuanto pueda mostrar la app lo haré.