¿Qué hace Codex y qué hace OpenDesign?
Codex es el agente: lee su briefing, escribe y ejecuta el código, y revisa. OpenDesign es el espacio de trabajo que lo rodea: sistemas de diseño, skills, una vista previa, comentarios y archivos versionados. OpenDesign es un proyecto independiente de código abierto y no está afiliado a OpenAI.
¿Qué necesito antes de empezar?
La aplicación de escritorio, una conexión de Codex funcional para el modo elegido y una tarea pequeña para probar. Consulte
compatibilidad; los requisitos de compilación desde el código fuente son independientes. Un sistema de diseño ayuda; elija uno de la biblioteca si no tiene ninguno.
Ya instalé OpenDesign. ¿Qué sigue?
¿En qué se diferencia el plugin de diseño de esta guía?
¿Dónde puedo ver otros agentes?
El
centro de agentes enumera las guías de agentes disponibles. Claude Code, Cursor y OpenCode están enlazados arriba, en agentes relacionados.
¿Cómo evito diseños de Codex que se vean genéricos?
Dale a Codex referencias concretas y tokens de diseño, indica las reglas de marca en las instrucciones del proyecto, como AGENTS.md o DESIGN.md, y verifica la página renderizada en los puntos de interrupción objetivo. Una habilidad de diseño de frontend también puede aportar una dirección visual más deliberada. Revisa el resultado tú mismo; las comprobaciones del navegador no sustituyen el criterio de diseño.
¿Puede Codex construir una UI a partir de una captura de pantalla o un diseño de Figma?
Una captura de pantalla puede servir como referencia visual para una implementación. Los flujos de trabajo de Figma son independientes: usa la integración oficial de Figma cuando necesites contexto del archivo de diseño o una ida y vuelta hacia marcos editables de Figma. Esta guía se centra en revisar una interfaz web renderizada, no en producir un archivo de diseño vectorial editable.
¿Cómo le doy a Codex un sistema de diseño?
Proporciona las reglas de color, tipografía, espaciado y componentes del sistema en las instrucciones del proyecto, como
DESIGN.md o
AGENTS.md, y pídele a Codex que las siga. OpenDesign también tiene una
biblioteca de sistemas de diseño entre la que puedes elegir antes de generar una interfaz.
¿Puedo conectar Codex a Figma?
Sí. La integración de Figma de OpenAI permite trabajar entre diseños de Figma y código. Configúrala usando la
documentación actual de Codex; los comandos y capacidades exactos pueden cambiar. El flujo de trabajo principal de esta página produce y revisa HTML, no archivos de Figma editables.
¿Qué significa BYOK cuando se usa Codex con OpenDesign?
Bring Your Own Key significa que autenticas Codex con tu propia cuenta de OpenAI o clave de API, sujeto a los términos de facturación y uso del modo que elijas. OpenDesign no actúa como proxy de tus credenciales. Consulta la
sección de compatibilidad y la guía de autenticación actual de OpenAI para los detalles que se aplican a tu configuración.
¿Codex UI se refiere a la aplicación Codex o a una interfaz creada con Codex?
La frase puede referirse a la aplicación Codex de OpenAI o a una interfaz de producto generada con el agente Codex. Esta página trata sobre lo segundo: diseñar y revisar una interfaz web con Codex.
¿Qué debería revisar antes de entregar una interfaz generada por Codex?
Revise la interfaz renderizada en anchos de escritorio y móvil, pruebe cada interacción y cada ruta de teclado, compruebe el foco y la accesibilidad, y compare el resultado con el brief y las referencias. Una compilación exitosa o la propia comprobación del navegador de un agente es solo una primera pasada; una persona debería verificar el artefacto antes de la entrega.
Qué es OpenAI Codex en realidad (y qué no es)
Primero, una aclaración que confunde a casi todos los que buscan “Codex.” El OpenAI Codex original era un modelo de completado de código de 2021 que impulsaba el primer GitHub Copilot y se declaró obsoleto en 2023. No es de lo que trata esta página. El Codex actual es la herramienta de programació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 en la nube/web para tareas asíncronas delegadas, y una aplicación de escritorio con un navegador integrado y Computer Use.
Una segunda aclaración, porque las búsquedas de “Codex UI” se dividen en dos sentidos. Uno es la propia interfaz de Codex: la aplicación de escritorio y web que OpenAI distribuye para ejecutar el agente. El otro, y de esto trata esta página, es la UI que usted construye con Codex: los componentes, los diseños y las pantallas de su producto.
Modelo predeterminado: a mediados de 2026 el modelo recomendado es gpt-5.5, y gpt-5.4 es el modelo que OpenAI entrenó explícitamente para frontend y computer use.
Archivo de instrucciones: Codex lee un archivo AGENTS.md en su proyecto (un estándar entre herramientas) para las reglas del proyecto, el lugar natural para plasmar sus convenciones de diseño.
Sandbox: se ejecuta en un sandbox a nivel de kernel (workspace-write de forma predeterminada), por lo que un agente que edite su UI no puede salirse del proyecto.
Credencial: clave de API de OpenAI (BYOK) o suscripción a ChatGPT (Free / Go / Plus / Pro / Business / Enterprise)
Proveedor: OpenAI
Licencia de la CLI: Apache-2.0, código abierto
Por qué Codex es bueno en diseño ahora
Tres cosas confluyeron 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 en frontend: OpenAI lanzó GPT-5.4, su primer modelo principal entrenado para
frontend y uso de computadora, con una comprensión de imágenes mucho mejor en todo el flujo de trabajo de diseño y una autoverificación más sólida. Incluso puede generar mood boards y opciones visuales antes de comprometerse con los recursos finales.
Una habilidad oficial de diseño frontend: El catálogo
openai/skills incluye una habilidad de diseño frontend seleccionada que impone buen gusto: diseños sin tarjetas, héroes a sangre completa, jerarquía que prioriza 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. Añadir esta habilidad de diseño frontend es la mejora individual más rápida para el resultado de Codex.
Verificación en navegador: Con la habilidad de Playwright, Codex abre un navegador real, redimensiona a los breakpoints y compara su salida con la referencia en lugar de solo comprobar que la compilación se complete correctamente.
El buen gusto proviene de tres entradas que tú proporcionas: un sistema de diseño, una habilidad e imágenes de referencia reales.
La lección detrás de las tres: Codex no tiene buen gusto por defecto. Produce buen diseño cuando le das restricciones, un sistema de diseño, una habilidad estética y referencias concretas. OpenDesign empaqueta exactamente esas entradas, y por eso los dos encajan (más abajo).
Configurar Codex para el trabajo de diseño, empezando desde cero
Aquí está la ruta completa desde una máquina limpia hasta un Codex que puede construir y verificar UI.
¿Prefieres una ruta con un solo clic?
Descarga la aplicación de escritorio de OpenDesign, incluye Codex con una habilidad seleccionada y una biblioteca de sistemas de diseño, así que eliges Codex como tu agente y empiezas a diseñar sin ninguna configuración de CLI. Los pasos siguientes son la ruta manual si prefieres conectar Codex tú mismo.
La secuencia de configuración: instalar → autenticar → configurar AGENTS.md → instalar la habilidad de frontend → habilitar la verificación en navegador.
Codifica tus reglas de diseño: Pon tus tokens, primitivas y convenciones en AGENTS.md o en un DESIGN.md y dirige Codex a ellos, para que el resultado coincida con una marca en lugar de recurrir a una apariencia genérica por defecto.
Elige el nivel de razonamiento correcto: OpenAI señala que los niveles de razonamiento de bajo a medio a menudo producen resultados de frontend más sólidos que la configuración más alta.
Usa la sección de configuración actual para comandos y detalles específicos de la versión, que pueden cambiar.
# 1. Instalar el Codex CLI
npm install -g @openai/codex
# o: brew install --cask codex
# o: curl -fsSL https://chatgpt.com/codex/install.sh | sh
# 2. Autenticar (se recomienda iniciar sesión con ChatGPT para límites más altos)
codex # luego elige “Sign in with ChatGPT”
# 3. Generar contexto del proyecto
codex # dentro de tu proyecto, ejecuta /init para crear AGENTS.md
# 4. Añadir la habilidad oficial de frontend, luego reiniciar Codex
# (en la app de Codex) $skill-installer frontend-skill
# 5. Conectar el servidor MCP de Figma (opcional, para traspaso de diseño)
codex mcp add figma --url https://mcp.figma.com/mcpEjemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
El flujo de trabajo de captura de pantalla a interfaz de usuario con Codex
El bucle de diseño con mayor apalancamiento con Codex consiste en convertir una imagen de referencia en una interfaz de usuario funcional y adaptable, e iterar hasta que coincida.
la propia guía de OpenAI se resume en cinco pasos.
Comienza con las referencias visuales más claras que tengas, e incluye múltiples estados (escritorio y móvil, hover, vacío, carga), no solo una imagen destacada.
Sé específico en el prompt; los prompts vagos producen interfaces de usuario genéricas.
Prepara un sistema de diseño y dile a Codex dónde se encuentran los tokens y las primitivas canónicas.
Habilita la habilidad interactiva de Playwright para que Codex renderice en un navegador real y cambie el tamaño a los puntos de interrupción.
Itera haciendo que Codex compare su implementación con las capturas de pantalla, no solo que confirme que compila.
Introduce imágenes arrastrando una captura de pantalla a la terminal o con la opción de imagen, luego indica restricciones concretas:
Ejecuta un servidor de desarrollo en una segunda terminal, mantén los prompts pequeños y enfocados, y haz commit de las buenas iteraciones / revierte las malas (diciéndole a Codex cuándo reviertes) para que cada pasada se base en una base limpia.
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."Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Diseño de interfaz de usuario con Codex: de componentes a un frontend lanzado
Codex construye interfaces de usuario a partir de tres tipos de entrada: una descripción escrita, una captura de pantalla de referencia o un marco de Figma. Con un sistema de diseño en contexto y la habilidad de Playwright habilitada, produce frontends adaptables basados en componentes y verifica su propio trabajo en un navegador real.
Convertir una captura de pantalla en una página es la demostración; lanzar un frontend real es el trabajo. El trabajo de diseño de interfaz de usuario con Codex mejora cuando lo tratas como la construcción de un sistema, componentes reutilizables, diseños adaptables y cada estado de interacción, no una sola imagen destacada. La comprensión de imágenes más sólida y la autoverificación de GPT-5.4 hacen que esto sea práctico, pero la estructura aún proviene de ti.
Primero los componentes: Pídele a Codex que construya componentes atómicos y reutilizables (botones, entradas, tarjetas, navegación) según tus tokens antes de componer páginas completas, para que el frontend se mantenga consistente en lugar de ser único.
Adaptable por defecto: Proporciona referencias de escritorio y móvil y nombra los puntos de interrupción; haz que Codex cambie el tamaño en un navegador real y corrija los diseños que se rompen, en lugar de confiar en un solo viewport.
Cada estado de interacción: Especifica los estados hover, focus, active, vacío, carga y error, los estados que hacen que la interfaz de usuario se sienta terminada y que la salida genérica de IA suele omitir.
Marcado accesible: Exige HTML semántico, controles etiquetados, anillos de enfoque visibles y contraste adecuado, y pídele a Codex que los verifique como parte de la compilación.
Indica explícitamente un componente y sus estados, luego deja que Codex verifique contra la referencia:
El patrón que separa la buena salida de frontend de la “basura de IA” es la verificación: Codex renderiza la interfaz de usuario, la compara con tus referencias en todos los puntos de interrupción e itera, en lugar de solo confirmar que la compilación pasa.
codex "Build a responsive pricing section in React + Tailwind + TypeScript.
Reuse my design-system tokens and Button/Card components.
Include hover, focus, and mobile-stacked states.
Use the Playwright skill to check it against pricing-desktop.png
and pricing-mobile.png at 375px and 1280px, and iterate until it matches."
Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Crear un sistema de diseño con Codex
Un sistema de diseño es la palanca más importante para la calidad del resultado: es la forma en que Codex conoce tus colores, tu escala tipográfica, tu espaciado y tus componentes en lugar de recurrir por defecto al aspecto genérico de Inter y morado. Dale a Codex un sistema de diseño sobre el que construir y cada pantalla que produzca heredará el mismo gusto.
Define tokens: captura color, tipografía, espaciado, radio y sombra como tokens con nombre, el vocabulario que Codex reutiliza en lugar de inventar valores para cada pantalla.
Captura primitivas: señala a Codex 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 lea: codifica las reglas en un AGENTS.md o DESIGN.md que el agente cargue en cada ejecución: sin tarjetas hero, como máximo dos tipografías, un color de acento, jerarquía con la marca primero.
Aplícalo en cada pasada: pide a Codex que compruebe la nueva interfaz de usuario contra el sistema y señale las desviaciones, para que el sistema de diseño se mantenga real en lugar de degradarse tras la primera pantalla.
También puedes trabajar en la dirección opuesta: dale a Codex unas cuantas pantallas de referencia y pídele que extraiga un sistema de diseño inicial, tokens más primitivas, que después refinarás. En cualquier caso, el sistema es el artefacto que hace que los resultados sean repetibles.
Codex + Figma: ida y vuelta entre diseño y código
En febrero de 2026, OpenAI y Figma anunciaron una
colaboración oficial, convirtiendo la anterior beta del MCP de Figma en una integración bidireccional de primer nivel. 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 interfaz de usuario en vivo y en ejecución de nuevo en frames editables de Figma: una pantalla completa, un elemento seleccionado o un archivo entero.
El MCP de Figma se ejecuta como servidor remoto y está exento de límites de velocidad. Añádelo una vez y estará disponible para Codex,
Claude Code,
Cursor, VS Code y más, que es exactamente el tipo de capacidad portátil y multiagente que OpenDesign está diseñado para orquestar.
Codex, Cursor y Claude Code comparados para diseño
No hay un único ganador para el trabajo de diseño, cada agente tiene una fortaleza diferente, y los equipos experimentados los combinan. Un resumen justo:
Codex — Fuerte pulido visual después de GPT-5.4 + frontend-skill; comprensión de imágenes — Compilaciones asíncronas delegadas, ejecuciones en sandbox, reglas portables de AGENTS.md
Cursor — Bucle visual de construir y ver con vista previa en vivo y ediciones en línea — Trabajo de UI de iterar y observar en un IDE
Claude Code — Decisiones de diseño específicas (hex, espaciado, tipografía) y UX consciente del código base — Razonamiento frontend y refactorizaciones de gran contexto
El veredicto recurrente de la comunidad es que el gusto viene de los humanos: los tres por defecto tienen una estética genérica sin habilidades, referencias y restricciones. Ese es el verdadero problema a resolver, y tiene forma de herramienta de diseño, no de modelo.
Agente — Fortaleza de diseño — Mejor para
Complementos de diseño de Codex comparados (incluyendo OpenDesign)
La capacidad de diseño de Codex proviene casi por completo de lo que le conectas. Aquí están los principales complementos y herramientas de diseño que puedes usar con Codex hoy, y dónde encaja OpenDesign entre ellos:
Complemento Product Design de OpenAI — Complemento de rol de OpenAI: explora direcciones, audita flujos de usuario, prototipa desde una URL en vivo, haz interactivas las capturas de pantalla, exporta a Figma o Canva — No — Tareas de diseño oficiales rápidas dentro de Codex
openai/skills frontend-skill — Una estética curada, diseños sin tarjetas, jerarquía centrada en la marca, movimiento contenido, una tesis visual antes de construir — Sí (Apache-2.0) — Elevar la calidad de la salida bruta
Integración con Figma (MCP) — Figma ↔ código bidireccional: implementa marcos en código, envía una UI en ejecución de vuelta a Figma editable — No (oficial) — Equipos que viven en Figma
OpenDesign — Una capa de diseño abierta y local-first alrededor de Codex: skill curada + biblioteca de sistema de diseño, un pipeline de renderizado, una UI de escritorio y BYOK — Sí (Apache-2.0) — Un flujo de trabajo de diseño real y portátil que posees
Cómo elegir: si quieres el propio flujo de diseño de OpenAI dentro de Codex, el complemento Product Design cubre la exploración de direcciones, la auditoría de flujos y la creación de prototipos desde una URL en vivo. Para la calidad de la salida bruta, la
habilidad de diseño frontend es el añadido de mayor apalancamiento. La
integración oficial con Figma es esencial si tu equipo vive en Figma, y es portátil, por lo que puedes combinarla con cualquiera de las otras, incluyendo
Claude Code y
Cursor.
OpenDesign es la única opción que es de código abierto, local-first y BYOK de principio a fin. Envuelve Codex en una
skill curada y una
biblioteca de sistema de diseño, un pipeline de renderizado estructurado y una UI de escritorio local, por lo que el contexto de diseño que hace bueno a Codex está ahí desde la primera ejecución, no se arma a mano en cada proyecto, y cada artefacto permanece en tu propio repositorio.
Complemento / herramienta — Qué añade — Código abierto — Mejor para Codex para diseñadores que no programan
No tienes que ser ingeniero para diseñar con Codex. El agente toma 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 perfiles de producto, no solo para desarrolladores frontend. El truco está en 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, disposición, jerarquía, tono, la sensación, y deja que Codex lo traduzca a marcado.
Trabaja a partir de referencias: Añade capturas de pantalla, un moodboard o el sitio de una marca; las referencias concretas superan a cualquier cantidad de texto para acertar con el aspecto.
Previsualiza en un navegador real: Deja que Codex renderice y abra el resultado para que lo juzgues con tus ojos, cambies su tamaño y señales qué está mal.
Itera y revierte de forma segura: El agente se ejecuta en un sandbox, así que puedes probar una dirección, conservar los aciertos y revertir los errores sin romper nada.
Errores comunes y cómo evitar el aspecto de «chapuza 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 enormes, sombras dramáticas, una vibra 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 los límites de uso rápidamente.
Instala una skill de frontend: Una skill estética curada obliga a Codex a comprometerse con una dirección real en lugar del aspecto predeterminado.
Habilita la verificación con Playwright: Haz que Codex renderice y se autoverifique en distintos breakpoints para que los diseños no se rompan silenciosamente en móvil.
Proporciona tokens y referencias: Los tokens de diseño reales y las capturas de referencia son la mayor palanca individual 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 que prioriza la marca» donde el agente las lea en cada ejecución.
Ten en cuenta que cada mitigación consiste en darle al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto por proyecto, es el trabajo tedioso que OpenDesign elimina.
BYOK: tu clave de OpenAI, tu plan de ChatGPT, tus límites
Codex es BYOK (trae tu propia clave): te autenticas con tu propia clave de API de OpenAI o tu suscripción de ChatGPT, y tus credenciales te pertenecen. Eso importa para el control de costos y para la privacidad; nada de tu clave ni de tu trabajo tiene que pasar por un tercero.
Clave de API de OpenAI (BYOK) — Pago por uso por token — Control de costos detallado, automatización y CI
Suscripción de ChatGPT — Incluida en Plus / Pro / Business / Enterprise — Límites más altos y predecibles para el diseño interactivo diario
Elige el nivel de razonamiento adecuado: OpenAI señala que el razonamiento bajo a medio a menudo da mejores resultados de frontend que la configuración más alta, 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 prompt gigante.
Registra las buenas iteraciones: guarda las pasadas que funcionan y revierte el resto, para que no pagues por regenerar una base limpia cada vez.
Opción — Cómo se factura — Ideal para
Diseñar con Codex dentro de OpenDesign
OpenDesign es la capa de diseño de código abierto que el flujo de trabajo anterior sigue pidiendo. Trata a Codex como un adaptador de primera parte y lo envuelve en una biblioteca seleccionada de habilidades y sistemas de diseño, un pipeline de renderizado estructurado y una interfaz de escritorio local, para que el contexto de diseño que hace bueno a Codex esté ahí desde la primera ejecución, no ensamblado a mano cada vez.
La aplicación de escritorio de OpenDesign: elige un plugin, describe lo que quieres y Codex lo construye, sin línea de comandos.
Autentícate con tu clave de API de OpenAI (BYOK) o suscripción de ChatGPT; las credenciales permanecen en tu máquina y nunca se transmiten a través de nosotros.
Elige un
sistema de diseño y una
habilidad, luego genera presentaciones, prototipos y páginas de destino con un gusto consistente.
Cada artefacto y archivo DESIGN.md vive en tu propio repositorio, no en una nube alojada.
Codex despliega OpenDesign localmente y lo abre en su navegador integrado, luego controla el lienzo desde allí.
El mismo agente Codex, la misma clave, más un flujo de trabajo de diseño real, portátil y de código abierto 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.
Resultado real de una sesión de Codex + OpenDesign: presentaciones, páginas de destino y un video renderizado, todo guardado en tu propio repositorio.
Instala OpenDesign y selecciona Codex como tu agente.
¿Está OpenDesign afiliado a OpenAI?
No. Codex es un producto de OpenAI; OpenDesign es un proyecto de código abierto independiente que lo admite como adaptador de primera parte.
Codex 
OpenDesign 
