Codex 
OpenDesign Cómo diseñar interfaces con OpenAI Codex en OpenDesign: la configuración, una tarea completa desde el briefing hasta el archivo revisado y los límites que debe conocer antes de empezar.
“Un panel de proyecto más tranquilo.
Prioridades claras. Espacio para concentrarse.”
TRES PÁGINAS DE CODEX
Esta guía: briefing, referencias, reglas de diseño y un resultado HTML revisado.
Lea esta guía PLUGINS E INSTALACIÓNExplore plugins de diseño u obtenga las instrucciones de instalación de OpenDesign.
Ir a recursos UN RESULTADO DIFERENTELas presentaciones de diapositivas tienen una guía separada con su propio workflow.
Abrir Codex SlidesUna tarea de diseño completa con Codex
Una sola tarea, mostrada de principio a fin: el briefing y las restricciones que entrega, el artefacto que resulta y las comprobaciones que sigue realizando antes de darla por terminada. La interfaz de abajo es un ejemplo ilustrativo creado para esta página, no una ejecución real de Codex.
BriefingDiseñe un tablero de progreso de proyecto para un equipo de producto pequeño. Muestre el progreso general, el próximo hito y el trabajo bloqueado de un vistazo. Las tareas se mueven entre Por hacer, En curso y Hecho. El tablero debe funcionar en escritorio y en móvil.
data-od-id establesEscriba el briefing, seleccione el sistema de diseño y defina los criterios de aceptación.
Planifica el diseño, escribe el HTML, CSS y JavaScript, ejecuta el archivo y lo revisa a petición.
Proporciona el sistema de diseño y el skill, genera la vista previa y guarda cada versión como un archivo en el proyecto.
La jerarquía visual, el espaciado en la cuadrícula de 8px, ambos breakpoints y cada interacción se verifican antes de la entrega.
La barra lateral, el encabezado, las estadísticas y las columnas se ajustan a la cuadrícula de 8px; nada se superpone en 1440 ni en 390.
El progreso, el próximo hito y el número de bloqueados priman sobre los encabezados de columna; el acento marca solo una etiqueta de hito.
Las columnas se convierten en un interruptor segmentado; la barra de hitos permanece; la barra lateral se pliega en una barra de pestañas.
Cambie la vista previa entre Desktop y Mobile aquí. En su propio artefacto, abra una tarea y pruebe los filtros, la navegación con teclado y el comportamiento del foco.
Ajuste
Compatibilidad
Esta guía cubre Codex local. Otros modos tienen una configuración y facturación diferentes. Referencias publicadas verificadas el 11 de septiembre de 2026.
OpenAI Codex, el agente de código — no el modelo de autocompletado de código más antiguo. Esta página trata sobre diseñar interfaces con Codex, no sobre la propia UI de la app Codex. Las notas de configuración de OpenDesign incluyen a Codex entre los agentes disponibles.
Para Codex local, inicie sesión con ChatGPT o use una clave API de OpenAI. Tienen implicaciones de facturación y política distintas. Siga las instrucciones de autenticación de OpenAI; esta página no promete una cuota ni un precio.
Consulte la página de descargas para compilaciones de escritorio. Los requisitos de Node.js y pnpm en el quickstart desde código fuente se aplican a la ejecución desde el código fuente, no a la instalación de un paquete de escritorio. Versión mínima compatible de Codex: no verificada aquí.
Siga las instrucciones de conexión que muestra su versión instalada y luego ejecute una tarea pequeña. Confirme que el agente previsto la gestionó y que el artefacto se abre. Una descarga por sí sola no establece una conexión funcional.
Empiece con la app de escritorio
Descargue primero, complete la configuración de Codex para su versión instalada y luego verifique un pequeño resultado. No necesita compilar OpenDesign desde el código fuente para seguir este camino.
Elija el paquete para su ordenador, instálelo y abra la app.
Descargar OpenDesignSiga las instrucciones de Codex en su versión instalada. Para Codex local, complete el inicio de sesión con ChatGPT o la autenticación con clave API antes de enviar una tarea.
Leer las notas de autenticación de CodexUse un briefing pequeño para poder evaluar todo el ciclo, incluida una revisión.
Construya una pantalla de configuración con un formulario de perfil y una confirmación de guardado. Use mis reglas de diseño. Compruébela en anchos de escritorio y móvil.
Para ejecutar desde el código fuente, siga la guía técnica de inicio rápido. Para instalar el plugin en Codex, use la entrada de instalación a continuación.
El flujo de trabajo de diseño de Codex
La misma tarea del progress-board, seguida desde el briefing hasta el archivo verificado. Cada paso indica qué aporta usted, qué hace Codex, qué aporta OpenDesign y qué debe comprobar.
Lenguaje sencillo, de tres a seis líneas. Indique el público, la función de la pantalla y las plataformas.
AGENTS.md del proyecto; pregunta cuando algo es ambiguo.Un design system y unas pocas reglas estrictas. Esto es lo que distingue un resultado fiel a la marca de un aspecto genérico.
Codex escribe un archivo HTML autocontenido: maquetación, estilos, interacciones y ganchos estables.
El archivo se renderiza dentro de OpenDesign en los anchos que solicitaste. Aquí es donde se juzga el diseño.
data-od-id para comentarios y ediciones.Solicite cambios señalando elementos en la vista previa. Cada revisión es un archivo nuevo; nada se sobrescribe en silencio.
Recursos
Una dirección de texto plano con instrucciones de instalación para que Codex las lea, no un tutorial visual. Copie el prompt en Codex y este lee la entrada por sí mismo.
Instale OpenDesign en Codex leyendo https://open-design.ai/codex-plugin/ y siguiendo sus instrucciones de instalación. Pregunte antes de cambiar la configuración.
Plugins de frontend y de sistemas de diseño para Codex, cada uno con su propia fuente e instrucciones de configuración.
Los tipos de artifact que Codex puede producir en OpenDesign, un skill por tipo.
Tokens de marca y componentes que vincular antes de que Codex genere algo.
Las presentaciones tienen una guía independiente; el resultado y el workflow difieren de la UI de producto.
Limitaciones
Preguntas frecuentes
Comience con una tarea pequeña, evalúe el ciclo de ida y vuelta y luego traiga el briefing real. Elija la opción que corresponda a su configuración; la página no la detecta.