¿Tienes una idea de diseño clarísima en tu cabeza pero no logras explicarla con palabras? Usar una imagen de referencia en Google AI Studio te ahorra párrafos enteros de instrucciones y acelera el proceso de convertir una visión en código real. Aquí verás cómo combinar dos herramientas de IA para lograrlo sin escribir una línea.
¿Cómo combinar ChatGPT y Google AI Studio para diseñar una app?
La estrategia es repartir el trabajo entre dos modelos especializados. Uno genera la imagen, el otro la traduce a código.
- ChatGPT se encarga de crear el mockup visual a partir de referencias.
- Google AI Studio toma esa imagen como contexto y ajusta el dashboard para que se parezca al diseño propuesto.
- La referencia inicial sale de un sitio como dribbble.com, donde puedes buscar inspiración filtrando por dashboard u otros términos visuales.
El flujo es directo: tomas un pantallazo de tu app actual, lo combinas con la referencia de Dribbble y le pides a ChatGPT que genere un mockup mejorado conservando la estructura original pero adoptando la paleta, jerarquía visual, densidad y formato de gráficas del nuevo estilo.
¿Qué son los tokens y por qué importan al usar IA?
Cada vez que le pides algo a un modelo de inteligencia artificial, consumes tokens. Y entender cómo funcionan cambia la forma en que decides qué herramienta usar para cada tarea.
¿Qué son los tokens en IA? Son las unidades que consume un modelo cada vez que procesa una instrucción. Funcionan como fichas de feria: algunos juegos cuestan más fichas que otros y cuando se acaban tienes que esperar o pagar más.
Los modelos baratos consumen menos fichas pero son menos potentes. Los modelos avanzados gastan más, aunque resuelven tareas más complejas. Por eso conviene no concentrar todo el consumo en una sola plataforma.
¿Por qué usar modelos especializados para cada tarea?
No todos los modelos son buenos para todo. Para generar imágenes, OpenAI tiene uno de los mejores modelos del mercado. Para generar código, Google AI Studio cumple muy bien.
Si usas ChatGPT para imágenes y Google AI Studio para código, no agotas tus fichas en un solo lugar. Es como tener fichas de dos ferias diferentes y aprovechar lo mejor de cada una sin quedarte sin recursos a mitad de proyecto [02:00].
¿Cómo iterar un mockup hasta dejarlo listo para producción?
Una vez que ChatGPT genera la primera versión del mockup, casi nunca queda perfecto al primer intento. Y ahí entra la iteración visual.
Por ejemplo, en la clase se eliminaron los botones de Remix y Dispositivos usando la herramienta de Seleccionar dentro de ChatGPT, marcando la zona específica y pidiendo el cambio en lenguaje natural. Así puedes refinar el diseño hasta que represente fielmente el brief visual que tienes en mente.
Cuando el mockup está listo, lo copias, vuelves al builder de Google AI Studio, lo pegas como contexto y escribes algo tan simple como: ajusta el dashboard actual para que sea lo más parecido al mockup adjunto. El modelo entrega un resultado muy cercano a la referencia.
¿Qué es el contexto multimodal y por qué cambia las reglas?
Cuando envías un prompt que combina texto e imagen, estás usando contexto multimodal. Esto significa que el modelo procesa los dos formatos al mismo tiempo y los integra para generar la respuesta.
¿Qué es el contexto multimodal? Es la capacidad de un modelo de IA para recibir y procesar información en varios formatos a la vez, como texto e imagen, y generar una respuesta que considere ambos. Te permite comunicar ideas complejas con menos palabras.
Con solo dar una imagen como referencia se obtiene un resultado muy parecido al deseado. El equivalente sin imagen hubiera sido escribir párrafos enteros tratando de describir colores, tipografías, espaciados y estructura. La imagen comprime todo eso en un solo input.
¿Qué otras herramientas existen para generar mockups con IA?
ChatGPT no es la única opción para generar imágenes. Existe todo un ecosistema de modelos especializados que puedes explorar según el estilo que busques.
- NanoBanana de Google.
- Meta AI Image.
- Midjourney.
- Flux.
- Ideogram.
- Leonardo.
Cada uno tiene fortalezas distintas en estilo, control de detalle y velocidad. El reto es elegir uno que no hayas usado, jugar con él hasta llegar al mockup que mejor represente la visión de tu billetera, capturarlo y compartirlo en los comentarios indicando qué modelo usaste.
En la siguiente clase ese mockup se convierte en una app de cuatro pantallas con navegación completa, donde la persona puede moverse entre vistas. ¿Cuál modelo vas a probar tú?
