Diseña el día cero de tu app con IA
Clase 5 de 15 • Curso de Vibe Coding para Crear Apps sin Programar
Contenido del curso
Dale memoria: persistencia y usuarios reales
Llévala al mundo: publica, integra y monetiza
Diseñar el día cero de una app es uno de los retos más subestimados del producto digital. Es la primera vez que alguien abre tu billetera, dashboard o herramienta, y no hay datos, ni historial, ni nada que mostrar. Si esa pantalla se siente rota, perdiste al usuario antes de empezar.
Aquí vas a ver cómo convertir pantallas vacías en una guía clara que le diga a la persona qué hacer, usando prompts en Google AI Studio y aprovechando el versionamiento para iterar sin miedo.
Qué es el día cero en una aplicación y por qué importa
El día cero es ese momento inicial sin información cargada. Una pantalla vacía no debería parecer un error, sino un punto de partida que orienta.
¿Qué es el día cero de una app? Es la primera vez que un usuario abre el producto sin datos previos. No hay historial, no hay registros y la interfaz debe guiar el siguiente paso en lugar de mostrarse rota.
El problema clásico es escribir cosas como "No hay datos" o "Sin información". Eso no ayuda. La idea es transformar el vacío en una invitación concreta a la acción.
Cómo escribir los estados vacíos de una billetera digital
Para una app de gastos, hay tres pantallas que necesitan su propia versión vacía. Cada una con un mensaje específico y, cuando aplica, un botón que active el primer paso [01:00].
Dashboard sin gastos registrados
El dashboard principal necesita un título tipo "Aún no hay gastos en este mes", una invitación a registrar el primero para empezar a ver en qué se va la plata, y un botón visible para hacerlo.
Movimientos sin historial
Aquí el título funciona como promesa: "Tus gastos se van a vivir aquí". El subtítulo aclara la mecánica: "Cada vez que pagas algo, lo registras y aparece en esta lista". Acompañas con un botón que muestre cómo registrar el gasto.
Detalle vacío sin selección
El detalle muestra: "Selecciona un gasto en movimientos para ver el detalle". En este caso no incluyes botón, porque primero debe existir un gasto registrado para tener algo que abrir.
Cómo escribir un prompt claro para estados vacíos en Google AI Studio
El prompt debe declarar dos condiciones: si hay gastos registrados, muestra la versión normal; si no hay ninguno, muestra la versión vacía [01:55]. También conviene especificar la transición automática: cuando se registre el primer gasto, la app debe pasar de la versión vacía a la versión con datos sin pasos extra.
¿Cómo le digo a la IA que muestre estados vacíos? Define dos condiciones explícitas en el prompt: qué mostrar con datos y qué mostrar sin datos. Agrega también la regla de transición automática al registrar el primer ítem.
En la primera ejecución, el modelo no devolvió lo esperado. Eso no es un fallo del proceso, es señal de que el prompt necesita más contexto.
Cómo usar checkpoints y versiones para iterar sin perder trabajo
Google AI Studio guarda checkpoints automáticos que registran el estado de la app después de cada prompt importante [02:30]. Puedes restaurar el estado anterior a un cambio que no funcionó, por ejemplo volver al momento antes de arreglar una gráfica o de añadir botones de editar y eliminar.
Además, en Configuraciones encuentras Versiones, donde aparece el historial completo de cómo ha evolucionado tu app prompt por prompt [03:15]. Esto te permite:
- Restaurar un estado previo cuando un cambio rompe algo.
- Comparar cómo respondió el modelo a distintos prompts.
- Mantener un versionamiento claro como buena práctica de desarrollo.
Por qué un prompt necesita contexto adicional para corregir errores
Cuando el modelo devolvió una "pantalla de bienvenida" en lugar de mostrar el estado vacío dentro del dashboard, el siguiente paso fue leer cómo estaba pensando la IA. El propio modelo explicó: "He implementado el estado día cero de tu billetera. Si no hay gastos, se muestra una pantalla de bienvenida". Justo lo que no queríamos.
La solución fue añadir un prompt correctivo: "No quiero que el dashboard muestre una pantalla de bienvenida. Quiero que esta información aparezca dentro del dashboard principal" [04:20]. Con esa precisión, el resultado final mostró el contador en cero y la invitación a registrar gastos directamente en el dashboard.
¿Qué hago si la IA no entiende mi prompt? Lee la explicación que da el modelo sobre lo que implementó, identifica la palabra que generó la confusión y envía un prompt correctivo eliminando esa interpretación errónea.
Qué hacer cuando quedan inconsistencias en el resultado final
Incluso después de iterar, pueden quedar detalles desalineados con los casos de uso originales. Por ejemplo, que la actividad diaria no muestre explícitamente la ausencia de gastos. La práctica recomendada es revisar pantalla por pantalla contra la lista inicial y enviar prompts puntuales para cada inconsistencia.
Ya tienes una aplicación que se entiende en el frente y que guía al usuario desde el primer segundo. El siguiente paso es darle memoria para que recuerde los datos de verdad. Cuéntame en los comentarios qué estados vacíos has tenido que rediseñar en tus propios proyectos.