Design for AI

Stil Dashboard / datendicht: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für dashboard / datendicht. Auch bekannt als datendichtes UI, Admin-Dashboard-Design, Analytics-UI, Bloomberg-Terminal-Stil, dichtes Enterprise-UI, Tufte-Stil. Terminals der 1980er; Web ab 2010 (Google Analytics, Datadog, Grafana, Bloomberg).

Merkmale

  • kleine Schrift (12-13px), enge Abstände (4px-Raster), viele Zeilen pro Screen
  • Tabellen mit rechtsbündigen Tabellenziffern, Zebrastreifen oder Haarlinien
  • Sparklines, Small Multiples, Kennzahlkacheln mit Delta-Pfeilen
  • gedämpfte Grautöne mit strenger semantischer Palette (Grün hoch, Rot runter, Amber Warnung, Blau Info)
  • einklappbare Sidebars, dichte Toolbars, Tastaturkürzel
  • Informationsdichte ist das Feature; Weißraum wird sorgfältig ausgegeben
  • Motion minimal: 100-150ms, nur bei Zustandswechseln; Live-Werte ticken ohne Animation

Palette

#ffffff Seite (oder #0f1117 dunkel), #f6f7f9 Fläche, #1f2328 Text, #6e7781 gedämpft, #d0d7de Linie, #1f6feb Info, #1a7f37 hoch, #cf222e runter, #9a6700 Warnung

Schrift

IBM Plex Sans, Geist oder Source Sans 3 bei 13px mit font-variant-numeric: tabular-nums; JetBrains Mono oder IBM Plex Mono für IDs und Codes bei 12px; Überschriften 600 nur bei 16-20px

Do

  • setze jede Zahl in Tabellenziffern, rechtsbündig, mit konsistenten Dezimalstellen und Einheitensuffixen
  • nutze ein 4px-Abstandsraster und 32px Zeilenhöhe; Sidebars 240px, einklappbar auf 56px
  • reserviere Farbe für Bedeutung: Grün, Rot, Amber, Blau bedeuten seitenweit jeweils genau eine Sache

Don't

  • nutze keine große Hero-Schrift oder Marketing-Padding im Produkt; 20px ist die größte Überschrift
  • animiere Diagramme beim Laden nicht länger als 300ms; Nutzer warten auf Daten, nicht auf Effekte
  • setze nicht mehr als eine Akzentdekoration pro Screen; die Daten sind die Dekoration

Bekannt dafür: Bloomberg Terminal, Grafana, Datadog, Linear (Listenansichten), GitHub, Stripe-Dashboard

CSS-Seed
: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

Baue die App als datendichtes Dashboard. Hintergrund #ffffff, Flächen #f6f7f9, Text #1f2328, gedämpft #6e7781, Linien #d0d7de, nur semantische Farben: Info #1f6feb, hoch #1a7f37, runter #cf222e, Warnung #9a6700. Schrift IBM Plex Sans 13px mit font-variant-numeric tabular-nums überall, Überschriften 600 bei 20/16/14px, JetBrains Mono 12px für IDs. Abstände auf einem 4px-Raster; Tabellenzeilen 32px hoch mit 1px #d0d7de Haarlinien, Zahlen rechtsbündig mit festen Dezimalstellen, sortierbare Header 12px Versalien 0.04em in gedämpft. Layout: 240px linke Sidebar (einklappbar auf 56px Icons), 48px obere Toolbar mit Suche und Datumsbereich-Steuerung, Hauptbereich ein Raster aus Kennzahlkacheln (6 nebeneinander, 88px hoch, Radius 6px, 1px Rand, Wert 24px 600, Delta mit Pfeil in Hoch- oder Runter-Farbe, 40px Sparkline) über einer Tabelle in voller Breite und zwei Diagrammpanels. Diagramme: 1.5px Linien, keine Flächenfüllungen, Gitterlinien #eaeef2, Tooltips 12px. Buttons 28px hoch, Radius 6px. Motion: 120ms nur bei Zustandswechseln; Werte aktualisieren sich an Ort und Stelle ohne Animation.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die App als datendichtes Dashboard. Hintergrund #ffffff, Flächen #f6f7f9, Text #1f2328, gedämpft #6e7781, Linien #d0d7de, nur semantische Farben: Info #1f6feb, hoch #1a7f37, runter #cf222e, Warnung #9a6700. Schrift IBM Plex Sans 13px mit font-variant-numeric tabular-nums überall, Überschriften 600 bei 20/16/14px, JetBrains Mono 12px für IDs. Abstände auf einem 4px-Raster; Tabellenzeilen 32px hoch mit 1px #d0d7de Haarlinien, Zahlen rechtsbündig mit festen Dezimalstellen, sortierbare Header 12px Versalien 0.04em in gedämpft. Layout: 240px linke Sidebar (einklappbar auf 56px Icons), 48px obere Toolbar mit Suche und Datumsbereich-Steuerung, Hauptbereich ein Raster aus Kennzahlkacheln (6 nebeneinander, 88px hoch, Radius 6px, 1px Rand, Wert 24px 600, Delta mit Pfeil in Hoch- oder Runter-Farbe, 40px Sparkline) über einer Tabelle in voller Breite und zwei Diagrammpanels. Diagramme: 1.5px Linien, keine Flächenfüllungen, Gitterlinien #eaeef2, Tooltips 12px. Buttons 28px hoch, Radius 6px. Motion: 120ms nur bei Zustandswechseln; Werte aktualisieren sich an Ort und Stelle ohne Animation.

## 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 }

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.