Dashboards aus einer Beschreibung, nicht aus einem Drag-and-Drop-Builder
Sag deinem Agent, was er zeigen soll und wie es wirken soll. Open Design liefert die Diagrammmuster, das Layoutsystem und die visuelle Sprache, sodass du ein zusammenhängendes, vorzeigbares Dashboard bekommst — keine Wand aus Widgets im Standardstil.
In einem Satz
Open Design verwandelt eine in klarer Sprache verfasste Spezifikation deiner Kennzahlen in ein gestaltetes Dashboard, das dein Agent als HTML rendert — versioniert in deinem Repo, überall hostbar, ohne BI-Abo pro Platz.
So funktionieren Dashboards mit Open Design
- 01
Beschreibe die Kennzahlen
Liste auf, was zählt — "wöchentlich aktive Nutzer, Umsatz nach Tarif, Churn und ein 30-Tage-Trend." Der Agent lädt die Dashboard-Fähigkeit, damit er weiß, dass er KPI-Karten, Diagramme und eine Tabelle anordnen soll, statt eines einzelnen Textblocks.
- 02
Wähle die Diagrammmuster
Open Design liefert Diagramm- und Layout-Vorlagen, sodass Trends zu Liniendiagrammen, Aufschlüsselungen zu Balken und Verhältnisse zur richtigen Visualisierung werden — durchgängig einheitliche Typografie und Abstände statt nicht zusammenpassender Standards.
- 03
Binde deine Daten ein
Richte das Dashboard auf eine CSV, einen JSON-Endpunkt oder füge Beispielzeilen ein. Es rendert zu eigenständigem HTML, das sich aktualisiert, wenn sich die Daten ändern — öffne es in jedem Browser, leg es auf jeden statischen Host.
- 04
Verfeinere und liefere aus
Passe es im Gespräch mit dem Agent an — "gruppiere Umsatz nach Region, schieb die KPI-Zeile nach oben." Das Artefakt liegt in deinem Projekt, sodass das Dashboard wie jeder andere Code überprüfbar und versioniert ist.
Was du bauen kannst
Prototyp Vollständigen Prompt lesen → Dashboard
Admin-/Analyse-Dashboard in einer einzelnen HTML-Datei. Feste linke Seitenleiste, obere Leiste mit Benutzer/Suche, Hauptraster mit KPI-Karten und Diagrammen. Verwenden Sie es für 'Dashboard', 'Admin', 'Analytics' oder 'Systemsteuerung'.
Prototyp Vollständigen Prompt lesen → GitHub Dashboard
GitHub Repository-Analyse-Dashboard — Sterne, Forks, Mitwirkende, Issues, Pull Requests, aktuelle Aktivitäten und Top-Mitwirkende. Verwenden Sie es für GitHub-Repository-Dashboards, Open-Source-Wachstumsberichte, Repository-Integritätsseiten oder GitHub-Analyseansichten.
Prototyp Vollständigen Prompt lesen → Datenvisualisierungsbericht
Verwandelt CSV-, Excel- oder JSON-Daten in eine ansprechende visuelle Berichtsseite.
Prototyp Vollständigen Prompt lesen → Finanzbericht
Quartals-/Monatsfinanzbericht mit KPI-Header, Umsatz- und Burn-Diagrammen, P&L-Übersichtstabelle, Top-Highlights und Ausblick-Absatz. Verwenden Sie dies bei Erwähnung von 'Finanzbericht', 'Q3-Bericht', 'MRR-Review', 'P&L' oder '财报'.
Prototyp Vollständigen Prompt lesen → Letzte 30 Tage
Community- und Social-Trend-Recherche der letzten 30 Tage. Verwenden Sie dies für aktuelle Meinungen, jüngste Stimmungen, Community-Reaktionen, Social Proof, Launch-Feedback, Trend-Scans oder Kontext der letzten 30 Tage.
Prototyp Vollständigen Prompt lesen → Flowai Live-Dashboard-Vorlage
Team-Management-Dashboard im FlowAI-Design mit drei Tabs (Teammitglieder, Teamdetails, Aktivitätsprotokoll), KPI-Statistikzeile, Mitgliedertabelle, Rollenverteilungs-Balkendiagramm, Online-Präsenz- und Aktivitäts-Sparklines sowie Top-Mitarbeiter-Panel. Unterstützt Hell-/Dunkel-Modus, Chart-Tooltips, Zoom-Funktion und CSV-Export.
Dashboards mit Open Design vs. die alte Art
| Was du brauchst | Mit Open Design | BI-Tools / handcodiert |
|---|---|---|
| Von der Kennzahlenliste zum Layout | ●Ein Prompt; der Agent ordnet Karten, Diagramme und Tabellen an | Widgets einzeln ziehen oder Diagrammcode von Grund auf schreiben |
| Einheitliches visuelles System | ●Diagrammmuster und Abstände aus einem wiederverwendbaren Designsystem | Standard-Widget-Stile oder pro Diagramm von Hand gestaltet |
| Daten verbinden | ●CSV / JSON / eingefügte Zeilen, zu lebendigem HTML gerendert | Anbieter-Konnektoren oder maßgeschneiderte Datenverkabelung |
| Hosting & Teilen | ●Eigenständiges HTML auf jedem statischen Host, kein Konto | Betrachter braucht einen Platz beim BI-Anbieter |
| Review & Versionierung | ●Liegt in deinem Repo; diff-bar wie Code | Beim Anbieter eingeschlossen, kein echtes Diff |
| Kosten & Lock-in | ●Open Source, eigene Schlüssel mitbringen, läuft lokal | Abo pro Platz, anbietergehostet |
Echte Dashboards, aus einem Prompt und einer Datenquelle gerendert. Starte mit einem, das deinem nahekommt, und beschreibe die Kennzahlen, die du verfolgst.
Dashboard-FAQ
-
01 Brauche ich ein BI-Tool wie Tableau oder Looker?
Nein. Open Design rendert Dashboards als HTML in deinem Coding-Agent. Du beschreibst die Kennzahlen und richtest es auf deine Daten; es gibt keine separate BI-Plattform zu lizenzieren oder zu lernen.
-
02 Woher kommen die Daten?
Aus einer CSV, einem JSON-Endpunkt oder Zeilen, die du einfügst. Das Dashboard ist einfaches HTML und JavaScript, sodass du genau steuerst, woher es liest — nichts wird über einen gehosteten Dienst geleitet.
-
03 Können nicht-technische Teammitglieder es ansehen?
Ja. Die Ausgabe ist eine eigenständige Webseite. Jeder mit dem Link oder der Datei kann sie im Browser öffnen — kein Konto, kein Platz.
-
04 Welche Agents kann ich nutzen?
Claude Code, Codex, Cursor Agent, Gemini CLI und ein Dutzend weiterer hauseigener Adapter. Du bringst deine eigenen Anbieter-Schlüssel mit.
Bau dein Dashboard noch heute Abend
Gib dem Repo einen Stern, installiere Open Design und verwandle deine Kennzahlen in ein Dashboard, das du überall hosten kannst — im Agent, den du bereits nutzt.