Cómo diseñar interfaces con Codex.
Codex puede diseñar pantallas de apps y páginas web además de programarlas. La clave es tratarlo como a un diseñador al que le das un brief, no como un botón que pulsas: dale contexto, pídele opciones y dale un feedback con el que pueda trabajar.
Actualizado el 1 de noviembre de 2026 · 8 min de lectura
Qué puede hacer Codex en el diseño de UI
Codex es el agente de programación de OpenAI. Lee y escribe archivos y ejecuta comandos en tu proyecto, así que en el trabajo de UI puede:
- Escribir pantallas en HTML y CSS. Un archivo HTML autocontenido es la forma más rápida de conseguir un mockup realista y clicable que puedes abrir en cualquier navegador.
- Trabajar a partir de imágenes. Adjunta una captura de pantalla, un boceto o una referencia que te guste, y pídele a Codex que reproduzca su layout o su ambiente.
- Hacer cambios cuando se los pides. “Haz las tarjetas más suaves” o “ajusta el espaciado” basta cuando Codex puede ver el archivo que escribió.
- Llevar el resultado a tu código. Una vez elegida una propuesta, el mismo agente puede reconstruirla con tu framework y tus componentes.
Lo que Codex no te da por sí solo es un lugar donde ver varios diseños a la vez. Cada archivo HTML se abre en su propia pestaña, y eso hace que comparar propuestas sea lento. Por eso creamos Codex Design, un plugin de lienzo para Codex. Puedes seguir esta guía con él o sin él.
Paso 1: escribe un brief de diseño
Las peticiones vagas dan resultados genéricos. Un buen brief responde a cinco preguntas: qué es el producto, quién lo usa, qué pantallas necesitas, qué sensación debe transmitir y cuáles son las restricciones, como el tamaño de pantalla, los colores de marca o las fuentes.
Diseña la pantalla de inicio de una app de suscripción de café llamada Ember & Bean. Sus usuarios ya preparan café en casa y quieren una bolsa nueva de café de origen único cada dos semanas. La pantalla de inicio muestra la próxima entrega, dos tuestes elegidos para ellos y un consejo breve de preparación. Hazla como una pantalla móvil de 390×844 en un único archivo HTML autocontenido con CSS en línea. Usa fuentes del sistema. Sin imágenes externas: dibuja las bolsas de café con CSS.
Pedir un solo archivo autocontenido importa. Hace que cada pantalla sea portátil, rápida de revisar y fácil de previsualizar.
Paso 2: pide varias propuestas, no una
El primer diseño rara vez es el mejor. Pide tres propuestas que se diferencien a propósito, para elegir entre alternativas reales y no entre variaciones de la misma idea.
Crea tres propuestas para esta pantalla, cada una en su propio archivo: A — cálida y editorial, con un titular serif B — oscura y contundente, con un solo color de acento brillante C — suave y tranquila, con tarjetas redondeadas y mucho aire Mantén el contenido idéntico para que comparemos solo el estilo visual.
Paso 3: revisa los diseños lado a lado
Pon las propuestas una junto a otra antes de juzgarlas. Las diferencias de jerarquía, densidad y tono se ven mucho mejor de un vistazo que pestaña por pestaña.
- Sin plugin: abre cada archivo HTML en tu navegador, o pídele a Codex que cree una página de comparación que muestre las tres pantallas en fila.
- Con Codex Design: pídele a Codex que ponga las pantallas en un lienzo. Aparecen una al lado de otra como HTML en vivo, y puedes añadir imágenes de referencia junto a ellas. Instala Codex Design con un solo prompt para probarlo.
Elige una propuesta o nombra lo que te gusta de cada una: “la tarjeta de entrega de B con los colores más tranquilos de C” es un buen brief para el siguiente paso.
Paso 4: refina con feedback concreto
Codex responde mejor al feedback que nombra un elemento y un cambio. Compara estas dos peticiones:
- Débil: “Haz que se vea mejor.”
- Fuerte: “Sube el saludo a 32px, reduce el padding de las tarjetas a 16px y haz que la barra de progreso de la entrega sea lo primero que se vea.”
Refina la propuesta C: - Haz el saludo más grande y la fecha más pequeña. - Muestra el progreso de la entrega antes de las recomendaciones de tueste. - Usa un único verde de acento solo para los estados activos. - Deja todo lo demás igual.
“Deja todo lo demás igual” merece la pena en casi cualquier revisión. Evita que el agente rediseñe partes con las que ya estabas contento.
Paso 5: ajusta los detalles a mano
Algunos cambios son más rápidos de hacer que de describir: retocar un tamaño de fuente, probar tres tonos de un color o ajustar el padding unos píxeles. Edita el HTML directamente o, con Codex Design, selecciona un elemento en el lienzo y cambia su fuente, color y espaciado en el panel de propiedades. Codex verá el archivo actualizado la próxima vez que le pidas un cambio.
Paso 6: convierte el diseño en código de producción
Un mockup es una especificación, no el código final. Cuando se apruebe una propuesta, pídele a Codex que la reconstruya dentro de tu app:
Implementa la pantalla de inicio aprobada en nuestra app de React Native. Usa nuestros componentes Button y Card y los colores de theme.ts. Reproduce el layout y el espaciado del mockup asset/coffee-home-soft.html.
Consejos para obtener mejores resultados
- Da tamaños reales. 390×844 para un móvil, 1440×900 para una página de escritorio. Sin ellos, los layouts se desvían.
- Usa contenido real. Nombres, precios y fechas verosímiles revelan problemas de layout que el “Lorem ipsum” oculta.
- Muestra, no solo cuentes. Una captura de referencia comunica un estilo más rápido que un párrafo de adjetivos.
- Nombra tus tokens. Si tienes colores de marca, fuentes o una escala de espaciado, ponlos en el brief para que todas las propuestas los usen.
- Una pantalla por archivo. Así cada revisión es pequeña y fácil de revisar.
Preguntas frecuentes
¿Codex puede diseñar UI de verdad o solo escribe código?
Las dos cosas. Codex escribe el HTML y el CSS de los que está hecha una pantalla, así que puede producir diseños visuales completos. La calidad depende del brief y de lo concreto que sea tu feedback.
¿Sigo necesitando Figma?
No para explorar y probar propuestas. Muchos equipos siguen usando Figma para los sistemas de diseño compartidos y el handoff. Los mockups en HTML tienen una ventaja: ya son código.
¿Necesito un plugin para diseñar con Codex?
No. Todo lo de esta guía funciona con archivos HTML normales. Un plugin de lienzo como Codex Design hace más rápido comparar y refinar varias pantallas.