Codex para diseño.

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.
• Una skill de frontend oficial: El catálogo openai/skills incluye una skill de frontend curada que impone gusto real: diseños sin tarjetas, heroes a sangre completa, jerarquía centrada en la marca, movimiento contenido, como máximo dos tipografías y un color de acento — y hace que Codex escriba una tesis visual antes de construir.
• 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.

# 1. Install the Codex CLI
npm install -g @openai/codex
# or: brew install --cask codex
# or: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

# 3. Generate project context
codex            # inside your project, run /init to create AGENTS.md

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for design handoff)
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 \
  "Implement this design in React + Vite + Tailwind + TypeScript.
   Reuse my existing design-system components and tokens.
   Match spacing, layout, and hierarchy; make it responsive.
   Use the Playwright skill to verify the UI matches the
   references and iterate until it does."

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 + 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.

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.

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.