Codex para diseño: crea UI con OpenAI Codex

Qué es realmente OpenAI Codex (y qué no es)

Primero, una aclaración que confunde a casi todos los que buscan “Codex”. El Codex original de OpenAI era un modelo de autocompletado de código de 2021 que impulsaba los primeros GitHub Copilot y fue descontinuado en 2023. No es de eso de lo que trata esta página. El Codex de hoy es la herramienta de codificación agéntica de OpenAI, planifica, escribe, ejecuta y verifica código a partir de tareas en lenguaje natural.

El Codex moderno se distribuye en cuatro superficies: una CLI de terminal (reescrita en Rust, con licencia Apache-2.0), una extensión de IDE para VS Code, Cursor y Windsurf, una experiencia cloud/web para tareas asíncronas delegadas, y una aplicación de escritorio con un navegador integrado y Computer Use.

• Modelo por defecto: A mediados de 2026, el modelo recomendado es gpt-5.5, siendo gpt-5.4 el modelo que OpenAI entrenó explícitamente para frontend y computer use.
• Archivo de instrucciones: Codex lee un archivo AGENTS.md en tu proyecto (un estándar entre herramientas) para las reglas del proyecto, el lugar natural para codificar tus convenciones de diseño.
• Sandbox: Se ejecuta en un sandbox a nivel de kernel (workspace-write por defecto), de modo que un agente que edita tu UI no puede salirse del proyecto.

• Proveedor: OpenAI
• Credencial: clave de API de OpenAI (BYOK) o suscripción a ChatGPT (Free / Go / Plus / Pro / Business / Enterprise)
• Licencia de la CLI: Apache-2.0, open source

Por qué Codex es bueno en diseño ahora

Tres cosas convergieron a principios de 2026 para convertir a Codex en una verdadera herramienta de diseño en lugar de un generador de código genérico.

• Un modelo entrenado para frontend: OpenAI lanzó GPT-5.4, su primer modelo principal entrenado para frontend y computer use, con una comprensión de imágenes mucho mejor en todo el flujo de diseño y una autoverificación más sólida. Incluso puede generar mood boards y opciones visuales antes de comprometerse con los assets finales.
• Un frontend design skill oficial: El catálogo openai/skills incluye un frontend design skill cuidadosamente seleccionado que impone verdadero buen gusto: diseños sin tarjetas, heros a sangre completa, jerarquía centrada en la marca, movimiento contenido, como máximo dos tipografías y un solo color de acento, y obliga a Codex a escribir una tesis visual antes de construir. Añadir este frontend design skill es la palanca individual más rápida para mejorar los resultados de Codex.
• Verificación en el navegador: Con la skill de Playwright, Codex abre un navegador real, redimensiona a los breakpoints y compara su resultado con la referencia en lugar de solo comprobar que la compilación pasa.

La lección detrás de las tres: Codex no tiene gusto por defecto. Produce buen diseño cuando le das restricciones, un sistema de diseño, una skill estética y referencias concretas. Open Design empaqueta exactamente esos insumos, y por eso ambos encajan (más abajo).

Configura Codex para trabajo de diseño, desde cero

Este es el camino completo desde una máquina limpia hasta un Codex capaz de construir y verificar UI.

¿Prefieres la vía de un solo clic? Descarga la app de escritorio de Open Design, incluye Codex junto con una biblioteca de skill y de design system cuidadosamente seleccionada, así que solo tienes que elegir Codex como tu agent y empezar a diseñar sin ninguna configuración de CLI. Los pasos siguientes son la ruta manual por si prefieres conectar Codex tú mismo.

# 1. Instala el Codex CLI
npm install -g @openai/codex
# o: brew install --cask codex
# o: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Autentícate (se recomienda iniciar sesión con ChatGPT para límites más altos)
codex            # luego elige “Sign in with ChatGPT”

# 3. Genera el contexto del proyecto
codex            # dentro de tu proyecto, ejecuta /init para crear AGENTS.md

# 4. Añade el skill de frontend oficial y luego reinicia Codex
# (en la app de Codex) $skill-installer frontend-skill

# 5. Conecta el servidor MCP de Figma (opcional, para el handoff de diseño)
codex mcp add figma --url https://mcp.figma.com/mcp

• Codifica tus reglas de diseño: Coloca tus tokens, primitivas y convenciones en AGENTS.md o en un DESIGN.md y dirige a Codex hacia ellas, para que el resultado coincida con una marca en lugar de recaer en un aspecto genérico.
• Elige el nivel de razonamiento adecuado: OpenAI señala que los niveles de razonamiento de bajo a medio suelen producir mejores resultados de frontend que el ajuste más alto.

El flujo de trabajo de captura a UI

El bucle de diseño de mayor apalancamiento con Codex es convertir una imagen de referencia en una UI funcional y responsive e iterar hasta que coincida. La propia guía de OpenAI se reduce a cinco pasos.

1. Parte de las referencias visuales más claras que tengas, e incluye varios estados (escritorio y móvil, hover, vacío, cargando), no solo una única toma principal.
2. Sé específico en el prompt; los prompts vagos producen UI genérica.
3. Prepara un sistema de diseño e indícale a Codex dónde viven los tokens y las primitivas canónicas.
4. Habilita la skill interactiva de Playwright para que Codex renderice en un navegador real y redimensione a los breakpoints.
5. Itera haciendo que Codex compare su implementación con las capturas, no solo que confirme que compila.

Alimenta las imágenes arrastrando una captura a la terminal o con el flag de imagen, y luego formula el prompt con restricciones concretas:

codex -i reference-desktop.png -i reference-mobile.png \
  "Implementa este diseño en React + Vite + Tailwind + TypeScript.
   Reutiliza mis componentes y tokens de design system existentes.
   Respeta el espaciado, el layout y la jerarquía; hazlo responsive.
   Usa el skill de Playwright para verificar que la UI coincide con las
   referencias e itera hasta que lo haga."

Ejecuta un servidor de desarrollo en una segunda terminal, mantén los prompts pequeños y enfocados, y confirma las buenas iteraciones / revierte las malas (diciéndole a Codex cuándo reviertes) para que cada pasada parta de una base limpia.

Codex para frontend y diseño de UI

Convertir una captura en una página es la demo; entregar un frontend real es el trabajo. El diseño de UI con Codex se vuelve bueno cuando lo tratas como construir un sistema, componentes reutilizables, diseños responsive y cada estado de interacción, y no una única toma principal. La mejor comprensión de imágenes y la autoverificación de GPT-5.4 lo hacen práctico, pero la estructura sigue viniendo de ti.

• Primero los componentes: Pídele a Codex que construya componentes atómicos y reutilizables (botones, inputs, tarjetas, navegación) contra tus tokens antes de componer páginas enteras, para que el frontend se mantenga coherente en lugar de puntual.
• Responsive por defecto: Aporta referencias de escritorio y móvil y nombra los breakpoints; haz que Codex redimensione en un navegador real y corrija los diseños que se rompen, en lugar de confiar en un único viewport.
• Cada estado de interacción: Detalla los estados hover, focus, activo, vacío, cargando y error, los estados que hacen que la UI se sienta terminada y que el resultado genérico de la IA suele omitir.
• Marcado accesible: Exige HTML semántico, controles etiquetados, anillos de foco visibles y contraste adecuado, y pídele a Codex que los compruebe como parte de la construcción.

Formula el prompt para un componente y sus estados de forma explícita, y luego deja que Codex verifique contra la referencia:

codex "Construye una sección de precios responsive en React + Tailwind + TypeScript.
   Reutiliza los tokens de mi design-system y los componentes Button/Card.
   Incluye los estados hover, focus y apilado en móvil.
   Usa la skill de Playwright para compararla con pricing-desktop.png
   y pricing-mobile.png a 375px y 1280px, e itera hasta que coincida."

El patrón que separa un buen resultado de frontend de la “bazofia de IA” es la verificación: Codex renderiza la UI, la compara con tus referencias en distintos breakpoints e itera, en lugar de solo confirmar que la compilación pasa.

Construir un sistema de diseño con Codex

Un sistema de diseño es la mayor palanca sobre la calidad del resultado, es como Codex conoce tus colores, escala tipográfica, espaciado y componentes en lugar de recaer en el aspecto genérico de Inter y morado. Dale a Codex un sistema de diseño contra el que construir y cada pantalla que produzca hereda el mismo gusto.

• Define los tokens: Captura color, tipografía, espaciado, radio y sombra como tokens con nombre, el vocabulario que Codex reutiliza en lugar de inventar valores en cada pantalla.
• Captura las primitivas: Apunta a Codex hacia tus componentes canónicos (Button, Input, Card, Modal) para que componga a partir de ellos en lugar de volver a dibujar cada uno.
• Escríbelo donde Codex lo lee: Codifica las reglas en un AGENTS.md o DESIGN.md que el agente carga en cada ejecución: sin tarjetas hero, como máximo dos tipografías, un color de acento, jerarquía centrada en la marca.
• Hazlo cumplir en cada pasada: Pídele a Codex que compruebe la nueva UI contra el sistema y señale las desviaciones, para que el sistema de diseño siga siendo real en lugar de degradarse tras la primera pantalla.

También puedes trabajar en la dirección contraria: entrégale a Codex unas cuantas pantallas de referencia y pídele que extraiga un sistema de diseño inicial, tokens más primitivas, que luego refinas. En cualquier caso, el sistema es el artefacto que hace que los resultados sean repetibles.

Codex + Figma: round-trip diseño ↔ código

En febrero de 2026, OpenAI y Figma anunciaron una asociación oficial, convirtiendo la beta anterior del MCP de Figma en una integración bidireccional de primera clase. Funciona en ambas direcciones.

• Diseño → Código: Copia el “link to selection” de un frame en Figma, pégalo en Codex con get_design_context y pídele que implemente el diseño usando tu biblioteca de componentes existente.
• Código → Diseño: La herramienta generate_figma_design (“Code to Canvas”) convierte una UI en vivo y en ejecución de vuelta en frames editables de Figma, pantalla completa, un elemento seleccionado o un archivo entero.

El MCP de Figma se ejecuta como un servidor remoto y está exento de límites de tasa. Añádelo una vez y estará disponible para Codex, Claude Code, Cursor, VS Code y más, exactamente el tipo de capacidad portátil y multiagente que Open Design está hecho para orquestar.

Codex vs Cursor vs Claude Code para diseño

No hay un único ganador para el trabajo de diseño, cada agente tiene una fortaleza distinta, y los equipos con experiencia los combinan. Un resumen justo:

El veredicto recurrente de la comunidad es que el gusto proviene de las personas: los tres recaen en una estética genérica sin skills, referencias y restricciones. Ese es el verdadero problema a resolver, y tiene forma de herramienta de diseño, no de modelo.

Comparativa de plugins de diseño para Codex (incluido Open Design)

La capacidad de diseño de Codex proviene casi por completo de lo que le conectas. Estos son los principales plugins y herramientas de diseño que puedes usar hoy con Codex, y dónde encaja Open Design entre ellos:

Cómo elegir: si quieres el flujo de diseño propio de OpenAI dentro de Codex, el Product Design plugin cubre explorar direcciones, auditar flujos y prototipar a partir de una URL en vivo. Para la calidad bruta de la salida, la frontend design skill es el añadido con mayor apalancamiento. La integración con Figma oficial es imprescindible si tu equipo vive en Figma, y es portátil, así que puedes combinarla con cualquiera de las demás, incluidos Claude Code y Cursor.

Open Design es la única opción que es de código abierto, local-first y BYOK de principio a fin. Envuelve Codex en una skill y una biblioteca de sistemas de diseño cuidadas, un pipeline de renderizado estructurado y una UI de escritorio local, de modo que el contexto de diseño que hace bueno a Codex está ahí desde la primera ejecución, sin tener que ensamblarlo a mano en cada proyecto, y cada artefacto permanece en tu propio repositorio.

Codex para diseñadores que no programan

No tienes que ser ingeniero para diseñar con Codex. El agente toma una intención en lenguaje natural y referencias reales y devuelve una UI funcional y responsive, lo que lo convierte en una herramienta genuina para diseñadores y personas de producto, no solo para desarrolladores de frontend. El truco es dirigirlo como un brief de diseño, no como una sesión de programación.

• Describe en lenguaje natural: Di lo que quieres en términos de diseño, distribución, jerarquía, tono, la sensación, y deja que Codex lo traduzca a marcado.
• Trabaja a partir de referencias: Suelta capturas, un moodboard o el sitio de una marca; las referencias concretas superan cualquier cantidad de prosa para acertar con el aspecto.
• Previsualiza en un navegador real: Deja que Codex renderice y abra el resultado para que lo juzgues con tus propios ojos, lo redimensiones y señales lo que está mal.
• Itera y revierte con seguridad: El agente se ejecuta en un sandbox, así que puedes probar una dirección, conservar las buenas pasadas y revertir las malas sin romper nada.

Escollos y cómo evitar el aspecto de “bazofia de IA”

La queja más común sobre el diseño generado por Codex es que parece genérico, degradados suaves, paneles flotantes, esquinas redondeadas excesivas, sombras dramáticas, un aire de Inter-y-morado que “grita que esto lo hizo una IA”. Otros problemas reportados incluyen diseños móviles rotos, instrucciones que se filtran en el texto de la UI y alcanzar rápidamente los límites de uso.

• Instala una skill de frontend: Una skill estética curada obliga a Codex a comprometerse con una dirección real en lugar del aspecto por defecto.
• Habilita la verificación con Playwright: Haz que Codex renderice y se autoverifique en distintos breakpoints para que los diseños no se rompan en silencio en móvil.
• Aporta tokens y referencias: Los tokens de diseño reales y las capturas de referencia son la mayor palanca sobre la calidad del resultado.
• Codifica reglas en AGENTS.md: Pon reglas de estilo como “sin tarjetas hero, máximo dos tipografías, jerarquía centrada en la marca” donde el agente las lea en cada ejecución.

Observa que cada mitigación consiste en dar al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto a proyecto, es el trabajo pesado que Open Design elimina.

BYOK: tu clave de OpenAI, tu plan de ChatGPT, tus límites

Codex es bring-your-own-key (BYOK): te autenticas con tu propia clave de API de OpenAI o tu suscripción a ChatGPT, y tus credenciales te pertenecen. Eso importa para el control de costes y para la privacidad, nada sobre tu clave ni tu trabajo tiene que pasar por un tercero.

• Elige el nivel de razonamiento adecuado: OpenAI señala que un razonamiento de bajo a medio suele dar mejores resultados de frontend que el ajuste más alto, y cuesta menos.
• Mantén los prompts pequeños y enfocados: Las tareas cortas y específicas usan menos tokens y producen diffs más limpios que un único prompt gigante.
• Confirma las buenas iteraciones: Guarda las pasadas que funcionan y revierte el resto, para que no pagues por regenerar una base limpia cada vez.

Diseñar con Codex dentro de Open Design

Open Design es la capa de diseño open-source que el flujo de trabajo anterior no deja de pedir. Trata a Codex como un adaptador de primera parte y lo envuelve en una biblioteca curada de skills y sistemas de diseño, una canalización de render estructurada y una UI de escritorio local, para que el contexto de diseño que hace bueno a Codex esté ahí desde la primera ejecución, no se ensamble a mano cada vez.

1. Instala Open Design y selecciona Codex como tu agente.
2. Autentícate con tu clave de API de OpenAI (BYOK) o tu suscripción a ChatGPT, las credenciales permanecen en tu máquina y nunca pasan por nuestros servidores.
3. Elige un sistema de diseño y una skill, y luego genera presentaciones, prototipos y landing pages con un gusto consistente.
4. Cada artefacto y archivo DESIGN.md vive en tu propio repositorio, no en una nube alojada.

El mismo agente Codex, la misma clave, más un flujo de trabajo de diseño real, portátil y open-source a su alrededor. Es local-first y Apache-2.0, así que nada de tu trabajo ni de tus credenciales sale de tu máquina.

Preguntas frecuentes

1. 01 ¿Puede OpenAI Codex realmente hacer trabajo de diseño? +

   Sí, con una skill de frontend, un sistema de diseño e imágenes de referencia reales en contexto, Codex (especialmente con GPT-5.4) produce UI responsive de calidad de producción y puede verificarla en un navegador. Sin ese contexto tiende a recaer en un aspecto genérico, que es la brecha que Open Design cubre.

2. 02 ¿Es este el plugin de Product Design de OpenAI Codex? +

   No. Open Design es un proyecto open-source independiente que integra a Codex como agente. Complementa las propias herramientas de OpenAI con una biblioteca de skills y sistemas de diseño abierta y local-first.

3. 03 ¿Necesito una suscripción a ChatGPT para diseñar con Codex? +

   Puedes usar una clave de API de OpenAI (BYOK) o tu suscripción a ChatGPT. El inicio de sesión con ChatGPT suele dar límites más generosos; en cualquier caso, Open Design nunca actúa como proxy de tus credenciales.

4. 04 ¿Codex o Claude Code para diseño de frontend? +

   Ambos son fuertes. Claude Code es conocido por decisiones de diseño específicas y conscientes de la base de código; Codex tiene un fuerte pulido visual tras GPT-5.4 y destaca en compilaciones delegadas en sandbox. Muchos equipos usan ambos, Open Design te permite cambiar de agente sin cambiar tu flujo de trabajo de diseño.

5. 05 ¿Cómo conecto Codex con Figma? +

   Añade el servidor MCP oficial de Figma (codex mcp add figma --url https://mcp.figma.com/mcp). Después podrás implementar frames de Figma en código con get_design_context y enviar una UI en ejecución de vuelta a frames editables de Figma con generate_figma_design.

6. 06 ¿Cómo evito la estética genérica de “bazofia de IA”? +

   Instala una skill de frontend, aporta tokens de diseño reales y capturas de referencia, codifica las reglas de marca en AGENTS.md y habilita la verificación con Playwright. Open Design incluye todo esto como una biblioteca curada para que te saltes la configuración por proyecto.

7. 07 ¿Está Open Design afiliado a OpenAI? +

   No. Codex es un producto de OpenAI; Open Design es un proyecto open-source independiente que lo soporta como adaptador de primera parte. OpenAI y Codex son marcas comerciales de OpenAI.

8. 08 ¿Están seguros mis archivos y credenciales? +

   Sí, Open Design es local-first. Tus archivos, artefactos y DESIGN.md permanecen en tu propio repositorio, y tus credenciales de OpenAI las usa directamente tu agente, sin enrutarse nunca a través de los servidores de Open Design.

9. 09 ¿Puede Codex construir una UI de frontend responsive? +

   Sí. Con referencias de escritorio y móvil y la skill de Playwright, Codex construye una UI de frontend responsive, la renderiza en un navegador real en cada breakpoint e itera hasta que coincide, componentes, diseños y estados de interacción incluidos. Darle los tokens de tu design-system es lo que mantiene el resultado consistente en lugar de genérico.

10. 10 ¿Cómo le doy a Codex un sistema de diseño? +

    Codifica tus tokens (color, tipografía, espaciado) y componentes canónicos en un archivo AGENTS.md o DESIGN.md que Codex lea en cada ejecución, y pídele que construya contra ellos. Open Design incluye una biblioteca curada de sistemas de diseño para que puedas elegir un sistema en lugar de escribir uno desde cero, y Codex luego construye cada pantalla contra él.

11. 11 ¿Puedo usar Codex para diseño si no sé programar? +

    Sí. Codex convierte briefs en lenguaje natural e imágenes de referencia en una UI funcional, de modo que diseñadores y personas de producto pueden usarlo sin escribir código. La aplicación de escritorio de Open Design elimina por completo la terminal y la configuración, eliges un agente, un sistema de diseño y una skill, y luego generas y previsualizas en una UI local.

12. 12 ¿Open Design admite BYOK con Codex? +

    Sí. Open Design es bring-your-own-key: autentica Codex con tu propia clave de API de OpenAI o suscripción a ChatGPT, y la credencial la usa directamente tu agente, sin enrutarse nunca a través de Open Design. Es local-first, así que tus archivos y tu DESIGN.md permanecen en tu propio repositorio.

13. 13 ¿Cómo añado un frontend design skill a Codex? +

    Instala el frontend design skill oficial desde el catálogo openai/skills: en la app de Codex ejecuta el instalador de skill para el frontend-skill y luego reinicia Codex. El frontend design skill hace que Codex se comprometa con una estética de verdad, diseños sin tarjetas, jerarquía centrada en la marca, como máximo dos tipografías y un solo color de acento, en lugar del aspecto genérico por defecto, y es la mayor palanca sobre la calidad de diseño de Codex.