Cómo crear mockups de UI con IA.
Un agente de IA puede convertir una frase en un mockup de UI clicable en minutos. La clave está en elegir la fidelidad adecuada para la pregunta que te haces: un wireframe para cerrar el layout, un mockup HTML de alta fidelidad para juzgar el aspecto o una imagen de mockup para explorar un ambiente.
Actualizado el 6 de noviembre de 2026 · 7 min de lectura
Tres tipos de mockup con IA
| Tipo | Se crea como | Ideal para | Limitaciones |
|---|---|---|---|
| Wireframe | HTML en escala de grises | Acordar el layout y el contenido | No dice nada del estilo visual |
| Mockup de alta fidelidad | HTML y CSS con estilo | Juzgar el aspecto real, probar a tamaño real | Cuesta más de revisar que un wireframe |
| Imagen de mockup | Imagen generada | Explorar un ambiente antes de que exista un layout | No se puede hacer clic, redimensionar ni editar |
Cuando trabajas con un agente de programación, los mockups en HTML suelen ser la mejor opción por defecto: se abren en cualquier navegador, responden a tamaños de pantalla reales y ya están a medio camino del código de producción. Las imágenes son útiles antes, cuando todavía estás decidiendo qué sensación debe transmitir el producto.
Paso 1: describe la pantalla
Empieza por para qué sirve la pantalla, quién la usa y qué tiene que aparecer en ella. Un contenido concreto te da un layout concreto.
Necesitamos el dashboard principal de [una tostadora de café que vende suscripciones]. El usuario es [el maestro tostador, que lo consulta cada mañana]. Debe mostrar: [suscripciones activas, bolsas enviadas esta semana, bajas, ingresos frente al objetivo, envíos semanales de 8 semanas y los tuestes previstos esta semana con su estado]. Escritorio, 1440×900.
Paso 2: cierra el layout con un wireframe
Un wireframe responde a una sola pregunta: ¿el layout presenta el contenido en el orden correcto? Mantenlo en gris para que nadie discuta todavía sobre colores.
Haz un wireframe de baja fidelidad de este dashboard como un único archivo HTML autocontenido, de 1440×900: cajas grises con bordes discontinuos, una etiqueta dentro de cada caja que diga qué va ahí, sin colores y sin estilos reales. Pon primero la información más importante.
Mueve las cajas hasta que la jerarquía sea la correcta. En esta fase, los cambios salen baratos.
Paso 3: conviértelo en un mockup de alta fidelidad
Una vez acordado el layout, mantenlo y añade el diseño visual. Dale al agente una dirección, números reales y tus normas de marca si las tienes.
Convierte el wireframe aprobado en un mockup de alta fidelidad en un archivo HTML nuevo. Mantén el layout exactamente igual. Estilo: [cálido y tranquilo, fondo crema, barra lateral marrón oscuro, un único acento óxido para la acción principal y la semana actual]. Usa datos realistas: nombres, números, fechas y estados. Dibuja el gráfico con HTML y CSS.
Si tienes un sistema de diseño, un archivo DESIGN.md mantiene cada mockup fiel a la marca sin repetir las normas en cada prompt.
Paso 4: explora un ambiente con imágenes (opcional)
Antes de decidirte por un estilo, las imágenes de mockup son una forma rápida de probar varios. En Codex, incluye $imagegen para llamar a la skill de generación de imágenes.
$imagegen Crea tres imágenes de mockup de este dashboard en estilos distintos: editorial cálido, oscuro y técnico, y luminoso y cercano. Pantalla de escritorio, textos y números de UI realistas, sin marco de dispositivo.
Elige una dirección y adjunta la imagen que te guste al prompt de alta fidelidad del paso 3. Trata las imágenes como referencias: el texto pequeño y el espaciado exacto todavía hay que revisarlos.
Paso 5: crea variaciones y compáralas
Pide dos o tres versiones de la misma pantalla que se diferencien a propósito y míralas una junto a otra. En un lienzo de Codex Design, cada versión aparece como HTML en vivo junto a las demás y junto a tu wireframe, así que ves de un vistazo qué ha cambiado.
Haz dos versiones más del mockup con el mismo contenido: una más densa para usuarios avanzados y otra con números más grandes y menos detalles para un vistazo rápido por la mañana. Cada una en su propio archivo.
Paso 6: entrégalo
- A las partes interesadas: comparte el archivo HTML o una captura de pantalla. Los archivos HTML se abren en cualquier navegador y muestran el layout real a tamaño real.
- Al equipo de desarrollo: pídele al agente que reconstruya el mockup aprobado en tu app, con tu framework y tus componentes. El mockup se convierte en la especificación, como en cómo diseñar interfaces con Codex.
Consejos
- Una pantalla por archivo. Los archivos pequeños se revisan rápido y se comparan fácilmente.
- Cierra el layout antes que el estilo. Cambiar un wireframe lleva segundos; volver a dar estilo a tres mockups lleva más.
- Usa tamaños y datos reales. 1440×900 para escritorio, 390×844 para móvil y números creíbles.
- Vigila los patrones genéricos. Consulta lo que delata una UI hecha con IA para saber qué evitar.
Preguntas frecuentes
¿La IA puede crear un wireframe a partir de una descripción?
Sí. Describe la pantalla y su contenido y pide un wireframe HTML de baja fidelidad, como en el paso 2. Codex te devuelve un archivo que puedes abrir, editar y convertir en un mockup de alta fidelidad.
¿Hago los mockups como imágenes o en HTML?
Usa imágenes para explorar un ambiente rápido, y HTML para todo lo que quieras evaluar a tamaño real o construir. Los mockups en HTML se pueden clicar, redimensionar y editar, y pasan directamente a código.
¿Sigo necesitando Figma?
No para explorar y probar propuestas. Los equipos que tienen su sistema de diseño en Figma suelen seguir usándolo para las bibliotecas compartidas y el handoff.