Cómo diseñar interfaces con ChatGPT.
ChatGPT puede llevar una interfaz de una idea en bruto a una pantalla que funciona, pero cada paso sale mejor en un sitio distinto. Usa el chat para pensar, la generación de imágenes para explorar el estilo y Codex para crear pantallas reales que puedes abrir, comparar y publicar.
Actualizado el 2 de noviembre de 2026 · 7 min de lectura
La respuesta corta
Sí, ChatGPT puede diseñar la interfaz de una app o un sitio web. Elige el modo que corresponda al paso en el que estás:
| Paso | Mejor lugar en ChatGPT | Qué obtienes |
|---|---|---|
| Dar forma a la idea | Chat | Un brief de diseño, la lista de pantallas y el flujo |
| Explorar el estilo | Generación de imágenes | Imágenes de mockup de varias direcciones visuales |
| Crear pantallas reales | Codex | Archivos HTML que puedes abrir, probar y editar |
| Comparar y refinar | Codex con un lienzo | Varias pantallas lado a lado, revisadas rápido |
| Llevarlo a producción | Codex en tu código | El diseño elegido en tu framework |
Chat y Work sirven para pensar y para documentos. Codex es el modo pensado para trabajar con software: lee y escribe archivos en tu proyecto, y eso es lo que convierte un diseño en algo real. En la app de escritorio de ChatGPT, selecciona Codex en el selector de producto.
Paso 1: da forma a la idea en el chat
Empieza con una conversación, no con un diseño. Pídele a ChatGPT que convierta una idea en bruto en un brief: para quién es el producto, qué pantallas necesita y qué debe mostrar cada una.
Estoy diseñando una app de seguimiento de hábitos para gente que quiere leer más. Ayúdame a escribir un brief de diseño de una página: usuarios objetivo, las cinco pantallas más importantes, qué muestra cada pantalla y tres estilos visuales posibles con una frase cada uno. Si algo no está claro, hazme antes hasta tres preguntas.
Guarda el brief. Lo pegarás en todos los pasos siguientes, para que cada uno parta del mismo contexto.
Paso 2: explora el estilo con imágenes
Antes de que nadie escriba código, las imágenes de mockup son una forma barata de ver un estilo. El modelo de imágenes de ChatGPT es bueno creando imágenes de interfaces con texto legible, y la última versión, GPT Image 2.6, añade imágenes de referencia, GIF y exportación a SVG. En el chat, basta con pedir una imagen. En Codex, incluye $imagegen en tu prompt para llamar directamente a la skill de generación de imágenes.
$imagegen Crea tres imágenes de mockup de la pantalla de inicio de este brief, una por estilo visual. Pantalla de iPhone, 390×844, UI realista con textos y números creíbles, sin marco de dispositivo. Mantén el contenido idéntico en las tres para que solo cambie el estilo.
Tómalas como moodboards, no como especificaciones. El texto pequeño y el espaciado exacto de las imágenes generadas todavía hay que revisarlos. En Codex, además, la generación de imágenes consume tus límites de uso de tres a cinco veces más rápido que un turno normal, así que explora con unas pocas imágenes y no con docenas.
Paso 3: crea pantallas reales con Codex
Una imagen muestra cómo podría verse una pantalla. Un archivo HTML es una pantalla en la que puedes hacer clic, cambiar de tamaño y modificar línea a línea. Cambia a Codex, abre la carpeta de un proyecto y pide las pantallas en código:
A partir del brief adjunto y de la imagen de mockup que elegí, crea la pantalla de inicio como un único archivo HTML autocontenido, de 390×844, con CSS en línea y fuentes del sistema. Después haz dos direcciones alternativas en archivos separados con el mismo contenido: una más contundente y otra más tranquila.
Adjunta la imagen de mockup que te gustó para que Codex reproduzca su layout y su ambiente. Un archivo autocontenido por pantalla hace que cada versión sea portátil y fácil de revisar.
Paso 4: compara las propuestas lado a lado
Juzgar tres diseños pestaña por pestaña es lento. Ponlos uno junto a otro:
- Sin plugin: pídele a Codex que cree una única página de comparación que muestre las tres pantallas en fila.
- Con un plugin de lienzo: Codex Design añade un lienzo a Codex, donde las pantallas aparecen lado a lado como HTML en vivo, junto a tus imágenes de referencia. Instálalo con un solo prompt.
Después elige una dirección o combina lo que te guste: “el encabezado de la versión contundente con las tarjetas de la versión tranquila” es una buena siguiente instrucción.
Paso 5: refina con feedback concreto
Nombra el elemento y el cambio. “Haz que destaque” no le da al agente nada con lo que trabajar. Esto sí:
Refina la dirección tranquila: - Haz que el contador de racha sea lo primero que se vea. - Reduce el padding de las tarjetas a 16px y usa un solo color de acento para los estados activos. - Deja todo lo demás igual.
Para los cambios que son más rápidos de hacer que de describir, como un tamaño de fuente o un tono de color, edita el HTML directamente o selecciona el elemento en el lienzo de Codex Design y ajústalo en el panel de propiedades.
Paso 6: convierte el diseño en código de producción
Cuando se apruebe una dirección, pídele a Codex que la reconstruya en tu app real, con tu framework, tus componentes y tus colores. El mockup HTML se convierte en la especificación:
Implementa la pantalla de inicio aprobada en nuestra app de SwiftUI. Reproduce el layout y el espaciado de home-calm.html, usa los colores de Theme.swift y reutiliza nuestro componente de tarjeta actual.
Consejos para obtener mejores resultados
- Da tamaños reales. 390×844 para un móvil, 1440×900 para una página de escritorio.
- Usa contenido real. Nombres, números y fechas verosímiles revelan problemas de layout que el texto de relleno oculta.
- Pide opciones. Tres direcciones distintas a propósito valen más que diez pequeñas variaciones de una.
- Añade una skill de diseño. Skills como Taste Skill le dan a Codex un criterio más firme sobre tipografía y layout. Consulta las mejores skills de Codex para diseño UI.
Preguntas frecuentes
¿ChatGPT puede diseñarme una app?
Puede diseñar y crear las pantallas. El chat te ayuda a planificarlas, la generación de imágenes muestra cómo podrían verse y Codex las escribe como código que funciona. Las decisiones siguen siendo tuyas: qué dirección, qué cambiar y cuándo está terminado.
¿Hay algún plugin de diseño UI para ChatGPT?
Sí. Los plugins funcionan en Chat, Work y Codex en la app de escritorio de ChatGPT, y en Codex CLI. Codex Design es un plugin de diseño UI que añade un lienzo visual a Codex. El directorio de plugins de OpenAI también incluye un plugin de Figma para equipos que trabajan en Figma.
¿Uso ChatGPT o Codex para diseñar UI?
Los dos son ChatGPT. Usa el chat para ideas y briefs, y cambia a Codex cuando quieras archivos reales: pantallas que puedes abrir, comparar, editar y llevar a tu código.