Guía de diseño de interfaces con OpenAI Codex: sitios web, consolas y aplicaciones con Oil UI
OpenAI Codex y los modelos GPT destacan en lógica con estado, controles sincronizados e interfaces con gran densidad de datos. Junto con Oil UI Skill, Codex convierte esa fortaleza técnica en tipografía disciplinada, jerarquía clara e interacciones precisas: desde un probador de tipos en directo con precios de licencia instantáneos hasta una consola de topología de incidencias y una aplicación de previsión de surf a 390×844.
Ideas clave
- Instala Oil UI con npx skills add oil-oil/oil-ui para que Codex establezca la jerarquía visual y la moderación cromática antes de escribir el código de los componentes.
- Aprovecha la capacidad de Codex para implementar estados funcionales: especifica cómo se actualizan unos controles con otros, por ejemplo al arrastrar una línea de tiempo para alinear registros, trazas y marcadores de despliegue.
- Utiliza el mismo brief del producto para explorar direcciones visuales diferenciadas, como las nueve páginas de destino de Orvo o las series Atelier Volders y Fonderie Mercier de la galería.
- Verifica cada estado a 1440×900 o 390×844 mediante capturas de navegador y revisiones a ciegas con subagentes para eliminar el exceso de bordes y las etiquetas truncadas.
npx skills add oil-oil/oil-uiSelecciona el directorio de tu agente Codex / OpenAI en el instalador interactivo.
Dónde destaca Codex en interfaces y dónde necesita límites
Más de ochenta obras de la galería de Oil UI se crearon con modelos GPT y Codex (GPT 6.1 Sol, GPT 6 Luna y GPT 6 Astra). Al examinar esas páginas en directo se aprecia lo que Codex maneja especialmente bien: interfaces cuyo diseño depende de cálculos funcionales y estados vinculados. En Fieldwork Type, escribir en el probador de caracteres actualiza el grosor, la anchura y las licencias del carrito al instante; en Nightwatch, arrastrar la ventana temporal alinea la topología de servicios, los marcadores de despliegue y los registros de errores; en Vesper, filtrar facturas permite abrir cargas útiles de webhook y acciones de reintento.
Si se deja que siga sus patrones predeterminados, Codex puede convertir herramientas complejas en paneles de depuración ruidosos: enmarca cada campo, alinea etiquetas de estado y asigna el mismo peso visual a todas las columnas de una tabla. Oil UI proporciona a Codex las reglas de jerarquía y simplificación necesarias para mantener la claridad en pantallas densas.
| Obra y modelo | Formato | Interacción principal | Viewport y estados |
|---|---|---|---|
| Fieldwork Type (GPT 6.1 Sol) | Web de fundición tipográfica independiente | Probador de tipos en directo vinculado a los precios de licencias para escritorio, web y aplicaciones | De 1440×900 a 390 píxeles; portada, probador ampliado y selector de licencias |
| Nightwatch (GPT 6.1 Sol) | Consola de respuesta a incidencias | Arrastrar el intervalo temporal alinea las rutas de topología, los despliegues y los registros | 1440×900; estado correcto, incidencia activa, investigación de picos y vista de publicación |
| Vesper (GPT 6.1 Sol) | Consola de facturación por uso de API | Filtrado de clientes por umbral e inspección de cronologías de facturas fallidas | 1440×900; espacio de trabajo general, panel de detalles de excepciones y paleta de comandos |
| Tide (GPT 6.1 Sol) | Aplicación de previsión de surf y mareas | Recorrer la línea de tiempo actualiza a la vez la altura del oleaje, el viento y la curva de mareas | Móvil a 390×844; index.html interactivo y screens.html con 3 pantallas |
El ciclo de dirección → estado → captura en Codex
En lugar de pedir a Codex que genere toda una aplicación multipantalla en una única pasada sin verificar, divide el trabajo en puntos de control claros.
Instala Oil UI y proporciona un brief centrado en la tarea
Instala la Skill con npx skills add oil-oil/oil-ui y describe después el usuario, los objetos principales, los estados necesarios y las dimensiones del viewport.
npx skills add oil-oil/oil-uiCompara direcciones en un único panel antes de decidir
Pide a Codex que cree un panel con 3 o 4 direcciones diferenciadas usando textos reales del producto. Elige una y no incorpores a la ganadora controles sueltos de las opciones descartadas.
Expón los estados clave mediante parámetros de URL o un panel multipantalla
Sigue el patrón de la galería (?state=incident o screens.html) para que cada estado crítico pueda abrirse directamente en un navegador sin interfaz gráfica y capturarse de forma determinista.
Elimina ruido visual tras inspeccionar capturas al 100 % y al 200 %
Revisa las capturas renderizadas para quitar bordes redundantes, corregir saltos de línea problemáticos y comprobar que la acción principal destaque a primera vista.
Una plantilla de prompt precisa para Codex
Codex produce interfaces mucho mejores cuando especificas cómo afectan las acciones del usuario a la pantalla. Puedes adaptar esta estructura directamente a tu producto:
Usa Oil UI para diseñar e implementar [nombre y categoría del producto, por ejemplo, una consola de facturación por uso de API y facturas de clientes para equipos de herramientas de desarrollo] en un viewport de escritorio de 1440×900.
- Tarea principal: Gestionar planes de suscripción y uso en directo, revisar los importes pendientes y las excepciones de facturación del ciclo actual, filtrar clientes por estado y umbral de uso, e inspeccionar partidas, cronologías de pago y cargas útiles de webhook.
- Interacciones vinculadas: Al actualizar los filtros se actualizan juntas la lista de clientes y la tendencia de uso; al abrir una factura con excepciones aparecen las acciones de reintentar el pago, ajustar la cuota y exportar.
- Estados que debes entregar: 1) espacio de trabajo cotidiano con filtrado en directo, 2) vista detallada de factura con excepciones y acciones de recuperación y 3) paleta de comandos rápidos. Verifica los tres estados con capturas reales del navegador.Adaptado del brief utilizado para crear Vesper en la galería de Oil UI.
Ejemplos funcionales y prompts de la galería
Abre las demos en directo a 1440 o 390 píxeles para examinar cómo el modelo y el prompt dieron forma a la interfaz final.
Fieldwork Type
Fundición de tipos independiente
El sitio web de una fundición de tipos independiente (desde 1440×900, adaptable hasta 390 px de ancho). La primera pantalla presenta una tipografía insignia: los visitantes pueden escribir su propio texto y ajustar el tamaño, el peso y la anchura. Más abajo aparecen la tabla de pesos de la familia, el juego de caracteres, ejemplos de uso y licencias según la finalidad (escritorio, web y app), que pueden añadirse al carrito. El probador de tipos y el selector de licencias son el corazón de esta pieza: la composición cambia mientras escribes y el precio de la licencia se actualiza con cada opción. Diseña la primera pantalla, el panel del probador desplegado y la selección de licencias.
Ver obra y prompt →
Nightwatch
Supervisión de operaciones y respuesta a incidentes
Una herramienta de supervisión y guardia para un equipo de plataforma de tamaño medio (1440×900), con interfaz en inglés: topología de servicios, gráficos de latencia, tasa de errores y tráfico, despliegues recientes, registros y trazas; durante un incidente, muestra alertas, la persona de guardia y una cronología del incidente. El desarrollo de un incidente es el núcleo: el servicio que falla y los servicios descendentes afectados deben resultar evidentes en la topología. Al arrastrar el intervalo temporal, los gráficos, los marcadores de despliegue y los registros se alinean para que se pueda ver qué despliegue causó el problema. Diseña tres estados: una visión general saludable; un incidente en curso con una alerta y la ruta afectada resaltada en la topología; y registros y trazas abiertos en el pico de errores para identificar el despliegue responsable.
Ver obra y prompt →
Vesper
Consola de facturación por uso de API
Diseña una consola de facturación por uso de API y de facturas de clientes para equipos de IA y herramientas de desarrollo, con interfaz en inglés y una ventana de escritorio de 1440×900. Los usuarios pueden gestionar planes de suscripción y uso de API en vivo, revisar importes pendientes y excepciones de facturación del ciclo actual, filtrar clientes o facturas por estado y umbral de uso, y abrir un registro para inspeccionar partidas, cronologías de pagos y Webhook y cargas de eventos. Incluye reintentos de pago, ajustes de cuota y exportación de facturas. Implementa tres estados clave: el espacio de trabajo cotidiano con tendencias de ingresos y uso, listas de clientes o facturas y filtrado en vivo; una vista de detalle de factura con excepción que muestre el desglose de uso, la cronología de estado y acciones de recuperación; y una paleta rápida de comandos. Entrega un `index.html` que funcione sin conexión y captura `shots/desktop.png`, `shots/state-1.png` y `shots/state-2.png` a 1440×900, DPR=2.
Ver obra y prompt →
Tide
App de pronóstico de surf y mareas
Una app de pronóstico de surf y mareas para surfistas (390×844): una lista de puntos de surf guardados y, para cada punto, la altura y el periodo de las olas, la dirección y velocidad del viento de hoy y de los próximos siete días, una curva de mareas y una sugerencia sobre la mejor hora para ir. Las mareas y las condiciones cambian con el tiempo, por lo que esta es una pieza de visualización de datos: al arrastrar la línea temporal, las olas, el viento y la marea se actualizan a la vez. Diseña la lista de puntos, el detalle de un punto y el arrastre de la línea temporal hasta un momento concreto. Entrega `index.html` y un `screens.html` con tres pantallas una al lado de otra.
Ver obra y prompt →Uso de Oil UI Pro con OpenAI Codex
Cambia a Oil UI Pro cuando quieras que Codex utilice los 10 arquetipos especializados de espacios de trabajo (lista-detalle, lienzo-inspector, línea de tiempo, grafo de nodos y otros), renueve un código de producción existente o realice revisiones a ciegas en varias rondas con el objetivo de alcanzar una calidad de 9/10.
npx github:oil-oil/oil-cli install oil-ui-proPreguntas frecuentes
¿Por qué la galería incluye varias obras de Codex para el mismo producto, como las nueve páginas de Orvo?
Esas series muestran cómo exactamente el mismo brief puede producir direcciones de diseño realmente diferentes. Las nueve páginas de Orvo comparten los datos del producto y los precios de $0 / $24.99 / $34.99, pero Launch Garden, Tandem, Coastal Workshop y Open Creative Studio adoptan enfoques editoriales y espaciales distintos.
¿Cómo evito que Codex convierta una aplicación móvil en una página de escritorio comprimida?
Especifica un viewport de 390×844 y pide tanto un index.html interactivo como un screens.html que muestre de tres a cinco pantallas clave una junto a otra. Oil UI orienta a Codex para diseñar teniendo en cuenta el alcance del pulgar, tareas centradas en una sola pantalla y transiciones propias del móvil.
¿Cómo gestiona Oil UI el modo oscuro en Codex sin llenarlo todo de neón?
Oil UI adapta el brillo de las superficies al contexto físico: utiliza superficies oscuras para la conducción nocturna (Yantu) o salas de guardia 24/7 (Nightwatch), y reserva los acentos de alta saturación estrictamente para rutas activas, advertencias y controles principales.
Si instalo Oil UI Pro, ¿debo eliminar la Skill de código abierto?
Sí. Oil UI Pro incluye todo el método de código abierto y flujos de trabajo avanzados. Conservar únicamente Pro evita que se activen Skills duplicadas.