Genera imágenes de UI/UX con Stable Diffusion y conviértelas en código

Mira, colega. Si estás leyendo esto es porque estás hasta las narices de maquetar a mano o de pelearte con Figma para sacar una idea rápida. Y te entiendo. Pero hay una forma de ir mucho más rápido: generar la interfaz directamente con Stable Diffusion y luego pasarla a código con herramientas de conversión. No es magia, es flujo de trabajo. Y te voy a contar exactamente cómo lo hago yo.

El flujo: de imagen a código

Primero, olvídate de generar interfaces "bonitas" sin más. El objetivo es generar una imagen que sea funcional como mockup. Eso significa: estructura clara, tipografía legible y espacios bien definidos. Luego, esa imagen la metemos en un conversor (te recomiendo htmlcsstoimage, Locofy o incluso el viejo Figma to Code si estás en ese ecosistema).

El truco está en el prompt. No pidas "una web". Pide un "dashboard de analítica, estilo minimalista, con sidebar, gráficas de líneas y tabla de datos". Cuanto más específico, mejor.

Prompts que funcionan de verdad

Aquí tienes algunos prompts que he probado y que dan resultados decentes. Cópialos, pégelos y ajústalos a tu gusto.

1. Dashboard de métricas

ui/ux dashboard design, analytics, dark mode, minimal, with sidebar, line charts, data table, high fidelity, 4k, clean typography, professional, dribbble style

2. Landing page moderna

landing page ui design, hero section with headline, product mockup, gradient background, modern, clean, Figma design, high resolution, sans-serif font

3. App móvil ecommerce

mobile app ui design, ecommerce product page, product photo, price tag, add to cart button, bottom navigation, light theme, material design, high fidelity

4. Pantalla de login

login screen ui, centered card, glassmorphism, blurred background, minimal, clean, high fidelity, mobile app, 8k, photorealistic render

5. Perfil de usuario con gráficas

user profile dashboard ui, user avatar, stats cards, activity graph, progress bars, modern, light mode, high fidelity, desktop web app design

Ajustes que marcan la diferencia

No todo es el prompt. Los parámetros también importan, y mucho.

• Sampler: Usa DPM++ 2M Karras o Euler a. Son más predecibles para texturas y líneas finas.

• Steps: Entre 25 y 35. Menos, y la imagen queda sucia; más, y no ganas nada.

• CFG Scale: 7 es un buen punto de partida. Si subes a 10, la imagen se vuelve rígida y los textos se rompen.

• Resolución: Genera en 768x512 o 512x512 para web, y luego escala a 2x con Hires. Fix. Te ahorrarás artefactos raros.

• Modelo: Si puedes, usa un modelo específico para UI. DreamShaper o Deliberate funcionan bien. El vanilla SD 1.5 es muy malo con texto.

El problema con el texto

Ojo, colega. Stable Diffusion sigue siendo un desastre con el texto. Las palabras salen deformadas, con letras inventadas... Por eso, el truco es:

• Genera la imagen con placeholders ("Lorem ipsum" o líneas rectas de colores).

• La pasas por el conversor a código.

• Sustituyes el texto en el HTML/CSS resultante.

No pierdas el tiempo intentando que SD escriba "Comprar ahora" perfectamente. No va a pasar.

Herramientas para la conversión

Una vez tienes la imagen, tienes varias opciones:

• Locofy.ai: Convierte el mockup en React o HTML/CSS. Bueno para prototipos.

• Figma to Code: Si ya usas Figma, importas la imagen como frame y usas plugins.

• htmlcsstoimage.com: Más orientado a generar imágenes desde código, pero sirve al revés.

Yo suelo usar Locofy para un primer boceto y luego lo limpio a mano. No esperes un código perfecto, pero sí una base sólida sobre la que trabajar.

El flujo completo en 5 minutos

• Generas la imagen con SD usando los prompts de arriba.

• La importas a Locofy (o el que uses).

• Limpias el HTML/CSS generado.

• Ajustas los textos y colores a tu marca.

Así, en vez de tardar dos días en maquetar un dashboard, lo tienes en una tarde. Y no, no es hacer trampas. Es trabajar de forma más inteligente.

Cuidado con la coherencia

El mayor problema de este flujo es que SD no entiende de "layouts". A veces te saca una tarjeta flotando o un botón fuera de sitio. Por eso, revisa bien la imagen antes de convertirla. Si ves un elemento raro, regenera con un prompt más restrictivo (añade "symmetrical", "grid layout", "aligned").

Y tú, colega, ¿qué usas para prototipar rápido? ¿Te tiras al Stable Diffusion o sigues con el clásico Figma? Cuéntame.