Diseño de paneles, consolas de administración y espacios de trabajo de escritorio con IA
Pide un panel a un modelo de IA y, casi por reflejo, dibujará cuatro tarjetas KPI en la parte superior, un gráfico de curvas en el centro y una tabla genérica abajo. Las herramientas operativas reales (consolas de incidencias, libros de facturación, gestores de muestras de laboratorio y editores de vídeo) se organizan en torno al objeto principal que las personas manipulan todo el día: qué seleccionan, cómo detectan anomalías y qué acción emprenden después.
Ideas clave
- Centra la pantalla en el objeto principal del sector (una topología de servicios, un libro de facturas, una rejilla de criocajas 9×9 o una línea de tiempo), no en tarjetas decorativas de resumen de KPI.
- Mantén la claridad en pantallas densas mediante la alineación de columnas, cifras tabulares y espaciado, en lugar de enmarcar cada dato en una caja con borde.
- Conecta los controles para que las acciones tengan sentido: recorrer una ventana temporal alinea registros y trazas; seleccionar una fila fallida abre acciones de recuperación.
- Oil UI Pro incluye 10 arquetipos especializados de espacios de trabajo (lista-detalle, lienzo-inspector, línea de tiempo, grafo de nodos y otros) con comprobaciones de continuidad en toda la página.
npx skills add oil-oil/oil-uiExplora consolas y herramientas de escritorio funcionales en /es/inspiration/desktop-app-design/.
De cuadrículas de gráficos genéricos a espacios de trabajo centrados en objetos
Ninguna de las obras de escritorio de la galería de Oil UI depende de una plantilla analítica genérica de cuatro tarjetas, porque cada profesión trabaja con un objeto distinto:
En Nightwatch (ops), el espacio de trabajo gira en torno a la topología de servicios en directo y una ventana de incidencia arrastrable que alinea gráficos de latencia, marcadores de despliegue y trazas de errores. En Vesper, el objeto central es el ciclo de vida de la factura del cliente, con filtros por umbral y un panel de excepciones para inspeccionar webhooks y reintentar pagos. En GridStore (lims), los investigadores interactúan directamente con una rejilla visual 9×9 de cajas del congelador para localizar, transferir y auditar muestras biológicas.
| Obra de la galería | Ámbito | Objeto principal del espacio de trabajo | Estados y acciones vinculados |
|---|---|---|---|
| Nightwatch (ops) | Respuesta a incidencias y guardias | Topología de servicios + control temporal sincronizado | Vista general correcta, resaltado de la ruta de incidencia activa, investigación de picos en registros y atribución a publicaciones |
| Vesper (vesper) | Consola de facturación por uso de API | Tabla de facturas de clientes + panel de cronología de eventos | Filtrado por umbral, desglose de facturas fallidas con acciones de reintento/cuota y paleta de comandos |
| Runrate (revenue) | Ingresos y retención SaaS | Libro de movimientos de MRR (nuevos, expansión, abandono) + matriz de cohortes | Cambio de granularidad temporal vinculado al desglose de NRR y al análisis detallado de cuentas |
| GridStore (lims) | Gestión de muestras de laboratorio | Jerarquía del congelador + rejilla 9×9 de pocillos de criocajas | Selección directa de pocillos, panel de cadena de custodia, transferencia por lotes y alerta de temperatura |
Cuatro reglas para mantener la claridad en interfaces densas
Las herramientas empresariales y de desarrollo concentran decenas de datos en un viewport de 1440×900. Si todas las etiquetas brillan y cada celda tiene un borde grueso, quienes operan la herramienta se fatigan rápidamente. Oil UI aplica cuatro hábitos de simplificación a las pantallas densas:
- Confía en la alineación y las cifras tabulares en lugar de las líneas verticales de la cuadrícula
- Alinea a la derecha las columnas numéricas con tabular-nums, alinea a la izquierda los identificadores de texto y elimina los bordes verticales innecesarios para recorrer las filas sin esfuerzo.
- Reserva los colores saturados para las excepciones que requieren acción
- Si cincuenta filas «Correctas» llevan etiquetas verdes brillantes, el único pago fallido o servicio degradado pasa desapercibido. Mantén discretos los estados normales y reserva el ámbar o el rojo para los elementos que necesitan intervención.
- Traslada las cargas útiles secundarias a un panel inspector
- Mantén la lista principal centrada en las 5 o 6 columnas necesarias para la clasificación. Al hacer clic en una fila se abre la carga útil completa del webhook, el registro de auditoría o la cascada de trazas en un panel lateral.
- Mantén la calidad visual desde la barra superior hasta las ventanas modales
- Los borradores de IA suelen pulir la cabecera y descuidar las tablas, los estados vacíos y los diálogos inferiores. Mantén coherentes la tipografía, el grosor de los bordes y el espaciado en todas las capas.
Plantilla de prompt para paneles y herramientas de escritorio
Indica a tu agente de programación qué objeto ocupa el centro de la pantalla y qué tres estados operativos deben poder verificarse:
Usa Oil UI para diseñar e implementar [nombre de la herramienta, por ejemplo, una consola de gestión de muestras de laboratorio / espacio de trabajo de logística] en un viewport de escritorio de 1440×900.
- Objeto principal del espacio de trabajo: [No crees un panel KPI genérico de 4 tarjetas; centra el espacio directamente en la rejilla de muestras 9×9 / tabla de envíos con excepciones / mapa de topología].
- Diseño y densidad: Utiliza una estructura de [barra de navegación izquierda + espacio de trabajo central + panel inspector derecho]. Da formato a todas las cifras con tabular-nums y reserva los colores de acento saturados estrictamente para advertencias y selecciones activas.
- Estados que debes entregar: Implementa 1) clasificación cotidiana y filtrado en directo, 2) inspección de la excepción seleccionada con acciones de recuperación y 3) acción por lotes o paleta de comandos rápidos. Captura pantallas del navegador a 1440×900 para los tres estados.Descartar explícitamente una cabecera KPI genérica de 4 tarjetas dirige al agente directamente hacia un espacio de trabajo real.
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.
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 →
Runrate
Panel de ingresos SaaS
Una app de escritorio para que desarrolladores independientes y equipos pequeños observen sus ingresos por suscripción (1440×900): MRR, ingresos nuevos, por expansión, por contracción, por abandono y retención neta de ingresos, con tendencias mensuales. Abre un mes para ver qué clientes impulsaron el cambio y abre un cliente para ver su historial de suscripción. La pantalla de inicio debe responder primero a «cómo cambió el dinero este mes», en lugar de acumular tarjetas de métricas. Diseña la visión general, un mes expandido con sus cambios y el detalle de un cliente.
Ver obra y prompt →
GridStore
Sistema de gestión de muestras de laboratorio
Un sistema de gestión de muestras para un laboratorio biomédico: recepción de muestras, ubicaciones de almacenamiento en congeladores, flujos de trabajo de análisis y registros de auditoría. Construye la interfaz principal.
Ver obra y prompt →Oil UI Pro: 10 arquetipos de espacios de trabajo y comprobaciones de continuidad en toda la página
Oil UI Pro proporciona a tu agente 10 diseños especializados de paneles y herramientas —consolas de incidencias, libros de facturación, editores de varios paneles, líneas de tiempo y grafos de nodos— y exige continuidad visual en tablas, paneles laterales y elementos emergentes.
npx github:oil-oil/oil-cli install oil-ui-proPreguntas frecuentes
¿Cómo evito que mi agente coloque cuatro tarjetas KPI gigantes en la parte superior de cada página de administración?
Especifica en tu prompt que el viewport principal debe abrirse directamente en el objeto de trabajo (la tabla filtrable, el lienzo o el calendario) y que cualquier métrica de resumen debe estar en una franja de estado compacta sobre la lista.
¿Cuándo debe una herramienta de escritorio usar un viewport fijo de 1440×900 y cuándo desplazamiento de página completa?
Las herramientas con barras laterales, líneas de tiempo o lienzos persistentes —como Cut (editor de vídeo), Loom (pizarra), Sonar (mensajería) y Nightwatch (consola de incidencias)— funcionan mejor como espacios de trabajo de viewport fijo con desplazamiento independiente en los paneles. Los informes editoriales pueden desplazarse con naturalidad.
¿Cómo encajo más de 15 campos de datos en una consola sin recortes horizontales?
Divide los campos en columnas de clasificación (5 o 6 columnas en la tabla principal) y campos de inspección (cargas útiles JSON sin procesar, cronologías completas y metadatos secundarios dentro de un panel de detalles deslizante).
¿Puedo probar los distintos estados de las obras de escritorio en la galería de Oil UI?
Sí. Abre obras como Nightwatch, Vesper o Sonar para probar directamente filtros e hilos, o utiliza los botones del selector de estados de la barra del visor para saltar entre estados predefinidos.