Genera imágenes de interfaces con Ideogram: trucos y prompts para devs

Mira, colega, no voy a venderte humo. Todos sabemos que pasar de un boceto a una imagen decente de interfaz es un dolor. Puedes usar Figma, sí, pero si necesitas una imagen rápida para una demo, una documentación o un pitch, abrir el editor es perder el tiempo.

Ideogram ha pegado fuerte porque tiene un modelo de texto endiabladamente bueno. No solo dibuja, escribe dentro de las imágenes. Para un dev, esto es oro. Puedes generar un dashboard sin escribir una sola línea de CSS. Pero ojo, no es magia: hay que hablar su idioma. Aquí van los trucos que funcionan de verdad.

El truco: sé un director de arte, no un programador

Olvídate de "hazme una app bonita". Eso es basura. Ideogram necesita contexto visual. Tienes que definir estilo, paleta y layout. Y lo más importante: los textos exactos que quieres que aparezcan. Si le pides "un botón que diga Login", lo pondrá perfecto. Si le pides un "botón genérico", inventará basura.

Otro consejo: usa la palabra "UI design, high fidelity" y "flat design" para evitar ese aspecto de dibujo 3D raro. Y si quieres que se parezca a una app real, menciona "iOS style" o "Material Design".

Prompts que funcionan (cópialos sin vergüenza)

Estos los he probado y dan resultados bastante sólidos. Ajusta los colores a tu gusto.

1. Dashboard analítico (el clásico):

UI design, high fidelity, Analytics dashboard for a SaaS app. Flat design, light mode, white background, blue and green accents. Contains a sidebar on the left with navigation, a top bar with a search field, and a main area with line charts, a bar chart, and KPI cards. Text labels exactly: "Revenue", "Users", "Churn Rate", "Q3 Report". Style: Material Design, clean, modern.

2. Pantalla de login minimalista:

Minimalist login page UI, mobile app screen. Centered card with soft shadows. Light grey background. Two input fields, one large blue button. Text exactly on the button: "Sign In". Below the button, small text: "Forgot Password?". Style: iOS, rounded corners, subtle gradients. High fidelity.

3. Diagrama de arquitectura (para documentación técnica):

Technical architecture diagram, 2D flat style. Simple boxes and arrows layout. White background. Boxes labeled exactly: "Frontend" (blue), "API Gateway" (orange), "Microservices" (green), "Database" (red. Arrows connecting them in order. Minimalist, clean, vector style. No 3D, no shadows.

4. Tarjeta de perfil de usuario:

UI component design, user profile card for a social network. Rounded rectangle, white background, small avatar circle on the left, two lines of text on the right. Name text exactly: "Ana García". Username text exactly: "@ana_dev". Follow button on the top right, colored blue. Flat design, high fidelity, isolated on a light purple background.

Errores que te van a joder

• Pedir demasiado texto: Si metes 5 párrafos, fallará. Limítate a etiquetas, títulos y 1-2 botones.

• No especificar el color: Si no lo dices, te va a sacar una paleta psicodélica.

• Olvidar "flat design" o "ui design": Si lo omites, parecerá un render de videojuego de 2005.

Con estos mimbres, puedes generar assets para una demo en dos minutos. No es Figma, pero para una imagen conceptual, va de lujo.

Y tú, ¿qué herramienta usas para tus mockups rápidos? ¿Ideogram, Midjourney o sigues peleándote con capas? Cuéntame.