Dashboards, Admin-Konsolen und Desktop-Arbeitsbereiche mit KI gestalten
Bitte ein KI-Modell um ein Dashboard, und es zeichnet fast reflexartig vier KPI-Karten am oberen Rand, ein Liniendiagramm in der Mitte und eine generische Tabelle darunter. Echte operative Werkzeuge – Incident-Konsolen, Abrechnungsbücher, Laborsysteme und Videoschnittprogramme – orientieren sich am zentralen Objekt, mit dem Menschen den ganzen Tag arbeiten: was sie auswählen, wie sie Ausnahmen erkennen und welche Aktion sie als Nächstes ausführen.
Die wichtigsten Punkte
- Richte den Bildschirm am zentralen Fachobjekt aus, etwa einer Service-Topologie, einem Rechnungsbuch, einem 9×9-Kryobox-Raster oder einer Zeitleiste, statt an dekorativen KPI-Karten.
- Halte dichte Bildschirme durch Spaltenausrichtung, Tabellenziffern und Abstände ruhig, statt jeden Wert in einen Rahmen zu setzen.
- Verknüpfe Bedienelemente, damit Aktionen nachvollziehbare Folgen haben: Das Bewegen eines Zeitfensters richtet Logs und Traces aus; die Auswahl einer fehlgeschlagenen Zeile öffnet Wiederherstellungsaktionen.
- Oil UI Pro enthält 10 spezialisierte Arbeitsbereich-Archetypen (Liste–Detail, Canvas–Inspektor, Zeitleiste, Node-Graph und weitere) mit Prüfungen der visuellen Kontinuität über die ganze Seite.
npx skills add oil-oil/oil-uiFunktionierende Konsolen und Desktop-Werkzeuge findest du unter /de/inspiration/desktop-app-design/.
Von generischen Diagrammrastern zu objektorientierten Arbeitsbereichen
Keine der Desktop-Arbeiten in der Oil-UI-Galerie beruht auf einer generischen Analysevorlage mit vier Karten, denn jeder Beruf arbeitet mit einem anderen Objekt:
In Nightwatch (ops) dreht sich der Arbeitsbereich um eine live aktualisierte Service-Topologie und ein verschiebbares Incident-Zeitfenster, das Latenzdiagramme, Deployment-Markierungen und Fehler-Traces ausrichtet. In Vesper ist der Lebenszyklus einer Kundenrechnung das zentrale Objekt; Schwellenwertfilter sind mit einer Detailseitenleiste für Webhook-Prüfung und Zahlungswiederholungen verbunden. In GridStore (lims) arbeiten Forschende direkt mit einem visuellen 9×9-Raster einer Gefrierbox, um biologische Proben zu finden, zu übertragen und zu prüfen.
| Galerie-Arbeit | Fachgebiet | Zentrales Objekt im Arbeitsbereich | Verbundene Zustände und Aktionen |
|---|---|---|---|
| Nightwatch (ops) | Incident-Bearbeitung und Bereitschaft | Service-Topologie + synchronisierter Zeitregler | Normalübersicht, Hervorhebung des aktiven Incident-Pfads, Untersuchung von Log-Spitzen und Release-Zuordnung |
| Vesper (vesper) | Konsole für API-Nutzung und Abrechnung | Kundenrechnungstabelle + Detailseitenleiste mit Ereignisverlauf | Schwellenwertfilter, Aufschlüsselung fehlgeschlagener Rechnungen mit Wiederholungs-/Kontingentaktionen und Befehlspalette |
| Runrate (revenue) | SaaS-Umsatz und Kundenbindung | MRR-Bewegungsbuch (neu, Erweiterung, Abwanderung) + Kohortenmatrix | Wechsel der Zeiteinheit mit NRR-Aufschlüsselung und Detailanalyse auf Kontoebene |
| GridStore (lims) | Verwaltung von Laborproben | Gefrierschrankhierarchie + 9×9-Raster der Kryobox | Direkte Positionsauswahl, Detailseitenleiste zur Probenkette, Stapelübertragung und Temperaturalarm |
Vier Regeln für ruhige, informationsdichte Oberflächen
Unternehmens- und Entwicklerwerkzeuge zeigen Dutzende Datenpunkte in einem Viewport von 1440×900. Wenn jedes Badge leuchtet und jede Zelle einen schweren Rahmen hat, ermüden die Augen schnell. Oil UI wendet auf dichte Bildschirme vier Regeln zur Reduktion an:
- Ausrichtung und Tabellenziffern statt vertikaler Gitterlinien
- Richte Zahlenspalten mit tabular-nums rechts und Textkennungen links aus. Entferne unnötige vertikale Rahmen, damit sich Zeilen mühelos erfassen lassen.
- Kräftige Farben für Ausnahmen reservieren, die ein Eingreifen erfordern
- Wenn fünfzig Zeilen mit „Normal“ leuchtend grüne Badges tragen, geht die eine fehlgeschlagene Zahlung oder der beeinträchtigte Service unter. Halte Normalzustände zurückhaltend und verwende Bernstein oder Rot für Punkte, die Eingreifen erfordern.
- Sekundäre Daten in eine Inspektor-Seitenleiste verschieben
- Beschränke die Hauptliste auf die 5 oder 6 Spalten, die für die erste Einschätzung nötig sind. Ein Klick auf eine Zeile öffnet die vollständige Webhook-Payload, den Audit-Trail oder den Trace-Wasserfall in einer Seitenleiste.
- Gestaltungsqualität von der Kopfleiste bis zu Dialogen beibehalten
- KI-Entwürfe polieren häufig die Kopfleiste und vernachlässigen Tabellen, Leerzustände und Dialoge darunter. Halte Typografie, Rahmenstärke und Abstände auf jeder Ebene konsistent.
Prompt-Vorlage für Dashboards und Desktop-Werkzeuge
Sage deinem Coding-Agenten, welches Objekt den Bildschirm mittig bestimmt und welche drei betrieblichen Zustände nachprüfbar sein müssen:
Verwende Oil UI, um [Werkzeugname, z. B. eine Konsole zur Laborprobenverwaltung / einen Arbeitsbereich für die Logistikdisposition] bei einem Desktop-Viewport von 1440×900 zu gestalten und zu implementieren.
- Zentrales Objekt im Arbeitsbereich: [Erstelle kein generisches KPI-Dashboard mit 4 Karten; richte den Arbeitsbereich direkt am 9×9-Probenraster / der Tabelle mit Sendungsausnahmen / der Topologiekarte aus].
- Layout und Dichte: Verwende die Struktur [linke Navigationsleiste + zentraler Arbeitsbereich + rechte Inspektor-Seitenleiste]. Formatiere alle Zahlen mit tabular-nums und reserviere kräftige Akzentfarben ausschließlich für Warnungen und aktive Auswahlen.
- Zu liefernde Zustände: Implementiere 1) alltägliche Einschätzung und Live-Filterung, 2) Untersuchung einer ausgewählten Ausnahme mit Wiederherstellungsaktionen und 3) Stapelaktion oder Schnellbefehlspalette. Nimm von allen drei Zuständen Browser-Screenshots bei 1440×900 auf.Wenn du einen generischen KPI-Kopfbereich mit vier Karten ausdrücklich ausschließt, führst du den Agenten direkt zu einem echten Arbeitsbereich.
Funktionierende Beispiele und Prompts aus der Galerie
Öffne die Live-Demos bei 1440 px oder 390 px und untersuche, wie Modell und Prompt die fertige Oberfläche geprägt haben.
Nightwatch
Betriebsüberwachung und Vorfallreaktion
Ein Monitoring- und Bereitschaftstool für ein mittelgroßes Plattformteam (1440×900) mit englischsprachiger Oberfläche: Service-Topologie, Diagramme für Latenz, Fehlerrate und Datenverkehr, letzte Deployments, Logs und Traces; zeige bei einem Vorfall Warnungen, die aktuell bereitschaftsdienstliche Person und eine Vorfall-Zeitleiste. Ein sich entwickelnder Vorfall ist der Kern: Der ausfallende Service und betroffene nachgelagerte Services müssen in der Topologie deutlich erkennbar sein. Beim Ziehen des Zeitbereichs sollen Diagramme, Deployment-Markierungen und Logs aufeinander abgestimmt werden, damit erkennbar wird, welches Deployment das Problem verursacht hat. Entwirf drei Zustände: eine fehlerfreie Übersicht; einen laufenden Vorfall mit Warnung und hervorgehobenem betroffenem Pfad in der Topologie; sowie geöffnete Logs und Traces am Fehlerpeak, um das verantwortliche Deployment zu identifizieren.
Arbeit und Prompt ansehen →
Vesper
Abrechnungskonsole für API-Nutzung
Entwerfe eine Abrechnungskonsole für API-Nutzung und Kundenrechnungen für KI- und Entwicklertool-Teams, mit englischsprachiger Oberfläche in einer Desktop-Ansicht von 1440×900. Nutzer können Abonnements und Live-API-Nutzung verwalten, fällige Beträge und Rechnungsausnahmen im aktuellen Zeitraum prüfen, Kunden oder Rechnungen nach Status und Nutzungsschwelle filtern und einen Datensatz öffnen, um Einzelpositionen, Zahlungs- und Webhook-Zeitleisten sowie Ereignis-Payloads zu untersuchen. Berücksichtige erneute Zahlungsversuche, Kontingentanpassungen und Rechnungsexporte. Implementiere drei zentrale Zustände: den täglichen Arbeitsbereich mit Umsatz- und Nutzungstrends, Kunden- oder Rechnungslisten und Live-Filtern; eine Detailansicht für eine Ausnahmerechnung mit Nutzungsaufschlüsselung, Statuszeitleiste und Wiederherstellungsaktionen; sowie eine Befehlspalette. Liefere ein offlinefähiges `index.html` und erstelle `shots/desktop.png`, `shots/state-1.png` und `shots/state-2.png` mit 1440×900, DPR=2.
Arbeit und Prompt ansehen →
Runrate
SaaS-Umsatz-Dashboard
Eine Desktop-App für unabhängige Entwickler und kleine Teams zur Beobachtung ihrer Aboeinnahmen (1440×900): MRR, Neugeschäft, Expansion, Kontraktion, Churn und Net Revenue Retention mit monatlichen Trends. Öffne einen Monat, um zu sehen, welche Kunden die Veränderung vorantrieben, und einen Kunden, um seinen Aboverlauf zu sehen. Der Startbildschirm soll zuerst beantworten, „wie sich das Geld diesen Monat verändert hat“, statt Kennzahlenkarten anzuhäufen. Entwirf die Übersicht, einen aufgeklappten Monat mit seinen Veränderungen und die Detailansicht eines einzelnen Kunden.
Arbeit und Prompt ansehen →
GridStore
Labor-Probenmanagementsystem
Ein Probenmanagementsystem für ein biomedizinisches Labor: Probeneingang, Lagerorte im Gefrierschrank, Prüfworkflows und Audit-Aufzeichnungen. Erstelle die Hauptschnittstelle.
Arbeit und Prompt ansehen →Oil UI Pro: 10 Arbeitsbereich-Archetypen und Prüfung der Kontinuität
Oil UI Pro stellt deinem Agenten 10 spezialisierte Layouts für Dashboards und Werkzeuge bereit – für Incident-Konsolen, Abrechnungsbücher, mehrteilige Editoren, Zeitleisten und Node-Graphen – und prüft die visuelle Kontinuität über Tabellen, Seitenleisten und Popover hinweg.
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Wie verhindere ich, dass mein Agent oben auf jeder Admin-Seite vier riesige KPI-Karten platziert?
Gib im Prompt vor, dass der primäre Viewport direkt mit dem Arbeitsobjekt öffnen muss – der filterbaren Tabelle, dem Canvas oder dem Zeitplan – und dass zusammenfassende Kennzahlen in eine kompakte Statusleiste über der Liste gehören.
Wann sollte ein Desktop-Werkzeug einen festen Viewport von 1440×900 statt eines scrollenden Seitenlayouts verwenden?
Werkzeuge mit dauerhaft sichtbaren Seitenleisten, Zeitleisten oder Canvases – wie Cut (Videoeditor), Loom (Whiteboard), Sonar (Messaging) und Nightwatch (Incident-Konsole) – funktionieren am besten als Arbeitsbereiche mit festem Viewport und unabhängig scrollenden Panels. Redaktionelle Berichte können natürlich scrollen.
Wie bringe ich mehr als 15 Datenfelder in einer Konsole unter, ohne sie horizontal abzuschneiden?
Teile die Felder in Spalten für die erste Einschätzung (5–6 Spalten in der Haupttabelle) und Prüffelder auf (rohe JSON-Payloads, vollständige Zeitverläufe und sekundäre Metadaten in einer seitlich einfahrenden Detailansicht).
Kann ich die verschiedenen Zustände der Desktop-Arbeiten in der Oil-UI-Galerie testen?
Ja. Öffne Arbeiten wie Nightwatch, Vesper oder Sonar, um Filter und Threads direkt anzuklicken, oder springe mit den Zustandsschaltern in der Viewer-Leiste zwischen den voreingestellten Zuständen.