Desarrollo con IA
Vibe coding: de la idea a la primera pantalla
Un flujo de trabajo práctico para convertir una idea en la primera pantalla de una aplicación mediante objetivo, flujo, contenido, estados y revisión.
La primera pantalla no debe ser una colección de componentes decorativos. Debe ayudar a una persona concreta a entender qué puede hacer, aportar lo necesario y avanzar en el flujo principal. La IA puede convertir un brief en una maqueta o interfaz inicial; la dirección de producto sigue siendo humana.
Flujo de trabajo paso a paso
- Defina usuario, problema, tarea principal, acción deseada y señal de éxito.
- Elija una pantalla y un flujo antes de pedir componentes.
- Liste contenido real o representativo, prioridades, restricciones de marca y accesibilidad.
- Especifique estados de carga, vacío, error, éxito y permisos.
- Pida una jerarquía clara, no solo un estilo visual.
- Revise lenguaje, contraste, foco, móvil, navegación y acción principal.
- Pruebe la pantalla con usuarios o un recorrido real y ajuste con evidencia.
Plantilla de prompt
Diseña la primera pantalla para [producto]. El usuario es [usuario], quiere [tarea] y el resultado de éxito es [resultado]. Incluye contenido prioritario, acción principal, navegación necesaria, estados vacío/carga/error/éxito, requisitos de accesibilidad y restricciones de marca. Explica la jerarquía y no añadas funciones fuera del flujo definido.
Lista de verificación
- ¿Se entiende quién es el usuario y qué puede hacer?
- ¿La acción principal es visible y tiene contexto?
- ¿Existen estados vacíos, de carga y error?
- ¿Se revisaron móvil y accesibilidad básica?
Errores comunes
- Diseñar antes de definir el flujo
- Llenar la pantalla con funciones secundarias
- Usar texto de relleno que oculta problemas reales
- Omitir estados de error y datos vacíos