Design for AI

Estilo Dashboard / denso en datos: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para dashboard / denso en datos. También llamado UI densa en datos, diseño de panel de administración, UI de analítica, estilo terminal Bloomberg, UI empresarial densa, estilo Tufte. terminales de los 80; web de 2010 en adelante (Google Analytics, Datadog, Grafana, Bloomberg).

Rasgos

  • tipo pequeño (12-13px), espaciado apretado (retícula de 4px), muchas filas por pantalla
  • tablas con cifras tabulares alineadas a la derecha, filas alternas o filetes finísimos
  • sparklines, múltiplos pequeños, mosaicos de estadísticas con flechas de variación
  • grises apagados con una paleta semántica estricta (verde sube, rojo baja, ámbar aviso, azul info)
  • barras laterales plegables, barras de herramientas densas, atajos de teclado
  • la densidad de información es la función; el espacio en blanco se gasta con cuidado
  • movimiento mínimo: 100-150ms, solo en cambios de estado; los valores en vivo se actualizan sin animación

Paleta

#ffffff página (o #0f1117 oscuro), #f6f7f9 superficie, #1f2328 texto, #6e7781 apagado, #d0d7de línea, #1f6feb info, #1a7f37 sube, #cf222e baja, #9a6700 aviso

Tipografía

IBM Plex Sans, Geist o Source Sans 3 a 13px con font-variant-numeric: tabular-nums; JetBrains Mono o IBM Plex Mono para IDs y códigos a 12px; títulos 600 solo a 16-20px

Haz

  • compón cada número en cifras tabulares, alineado a la derecha, con decimales coherentes y sufijos de unidad
  • usa una retícula de espaciado de 4px y filas de 32px de alto; barras laterales de 240px, plegables a 56px
  • reserva el color para el significado: verde, rojo, ámbar y azul significan exactamente una cosa cada uno en todo el sitio

Evita

  • no uses tipografía de hero grande ni padding de marketing dentro del producto; 20px es el título más grande
  • no animes las gráficas al cargar más allá de 300ms; los usuarios esperan datos, no efectos
  • no pongas más de una decoración de acento por pantalla; los datos son la decoración

Conocido por: Bloomberg Terminal, Grafana, Datadog, Linear (vistas de lista), GitHub, dashboard de Stripe

Semilla CSS
:root {
  --bg: #ffffff;
   --surface: #f6f7f9;
   --fg: #1f2328;
   --muted: #6e7781;
   --line: #d0d7de;
   --info: #1f6feb;
   --up: #1a7f37;
   --down: #cf222e;
   --radius: 6px;
   --font: 'IBM Plex Sans',sans-serif;
   --font-mono: 'JetBrains Mono',monospace
}
Prompt

Construye la app como un dashboard denso en datos. Fondo #ffffff, superficies #f6f7f9, texto #1f2328, apagado #6e7781, líneas #d0d7de, solo colores semánticos: info #1f6feb, sube #1a7f37, baja #cf222e, aviso #9a6700. Fuente IBM Plex Sans 13px con font-variant-numeric tabular-nums en todo, títulos 600 a 20/16/14px, JetBrains Mono 12px para IDs. Espaciado en retícula de 4px; filas de tabla de 32px de alto con filetes 1px #d0d7de, números alineados a la derecha con decimales fijos, cabeceras ordenables a 12px en mayúsculas 0.04em en apagado. Layout: barra lateral izquierda de 240px (plegable a iconos de 56px), barra de herramientas superior de 48px con búsqueda y un control de rango de fechas, área principal con una retícula de mosaicos de estadísticas (6 en fila, 88px de alto, radio 6px, borde 1px, valor 24px 600, variación con una flecha en color de sube o baja, sparkline de 40px) sobre una tabla a ancho completo y dos paneles de gráficas. Gráficas: líneas de 1.5px, sin rellenos de área, líneas de cuadrícula #eaeef2, tooltips 12px. Botones de 28px de alto, radio 6px. Movimiento: 120ms solo en cambios de estado; los valores se actualizan en su sitio sin animación.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye la app como un dashboard denso en datos. Fondo #ffffff, superficies #f6f7f9, texto #1f2328, apagado #6e7781, líneas #d0d7de, solo colores semánticos: info #1f6feb, sube #1a7f37, baja #cf222e, aviso #9a6700. Fuente IBM Plex Sans 13px con font-variant-numeric tabular-nums en todo, títulos 600 a 20/16/14px, JetBrains Mono 12px para IDs. Espaciado en retícula de 4px; filas de tabla de 32px de alto con filetes 1px #d0d7de, números alineados a la derecha con decimales fijos, cabeceras ordenables a 12px en mayúsculas 0.04em en apagado. Layout: barra lateral izquierda de 240px (plegable a iconos de 56px), barra de herramientas superior de 48px con búsqueda y un control de rango de fechas, área principal con una retícula de mosaicos de estadísticas (6 en fila, 88px de alto, radio 6px, borde 1px, valor 24px 600, variación con una flecha en color de sube o baja, sparkline de 40px) sobre una tabla a ancho completo y dos paneles de gráficas. Gráficas: líneas de 1.5px, sin rellenos de área, líneas de cuadrícula #eaeef2, tooltips 12px. Botones de 28px de alto, radio 6px. Movimiento: 120ms solo en cambios de estado; los valores se actualizan en su sitio sin animación.

## Tokens
:root { --bg:#ffffff; --surface:#f6f7f9; --fg:#1f2328; --muted:#6e7781; --line:#d0d7de; --info:#1f6feb; --up:#1a7f37; --down:#cf222e; --radius:6px; --font:'IBM Plex Sans',sans-serif; --font-mono:'JetBrains Mono',monospace }

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.