Dashboards uit een beschrijving, niet uit een sleep-en-neerzetbouwer
Vertel je agent wat hij moet tonen en hoe het moet aanvoelen. Open Design levert de grafiekpatronen, het indelingssysteem en de visuele taal, zodat je een samenhangend, presentabel dashboard krijgt — geen muur van standaard gestileerde widgets.
In één zin
Open Design verandert een specificatie van je metrics in gewone taal in een gestileerd dashboard dat je agent naar HTML rendert — geversioneerd in je repo, overal te hosten, zonder BI-abonnement per seat.
Hoe dashboards werken met Open Design
- 01
Beschrijf de metrics
Som op wat ertoe doet — “wekelijks actieve gebruikers, omzet per abonnement, churn en een trend over 30 dagen.” De agent laadt de dashboardvaardigheid, zodat hij KPI-kaarten, grafieken en een tabel indeelt in plaats van één tekstblok.
- 02
Kies de grafiekpatronen
Open Design levert grafiek- en indelingssjablonen, zodat trends lijngrafieken worden, uitsplitsingen staven en verhoudingen het juiste beeld — consistente typografie en witruimte overal in plaats van niet-passende standaarden.
- 03
Koppel je data
Wijs het dashboard naar een CSV, een JSON-endpoint, of plak voorbeeldrijen. Het rendert naar zelfstandige HTML die bijwerkt wanneer de data verandert — open het in elke browser, zet het op elke statische host.
- 04
Verfijn en lever op
Pas aan door met de agent te praten — “groepeer de omzet per regio, zet de KPI-rij bovenaan.” Het artefact leeft in je project, dus het dashboard is te beoordelen en te versioneren als elke andere code.
Wat je kunt bouwen
prototype Lees volledige prompt → Dashboard
Admin-/analysedashboard in één HTML-bestand. Vaste linkerzijbalk, bovenbalk met gebruiker/zoeken, hoofdraster met KPI-kaarten en grafieken. Gebruik voor 'dashboard', 'admin', 'analytics' of 'configuratiescherm'.
prototype Lees volledige prompt → GitHub Dashboard
GitHub repository-analysedashboard — sterren, forks, bijdragers, issues, pull requests, recente activiteit en topbijdragers. Gebruik voor GitHub repository-dashboard, open-source groeirapport, repository-gezondheidspagina of GitHub-analyseweergave.
prototype Lees volledige prompt → Datavisualisatierapport
Zet CSV-, Excel- of JSON-gegevens om in een gepolijste visuele rapportpagina.
prototype Lees volledige prompt → Financieel rapport
Kwartaal-/maandelijks financieel rapport met KPI-koptekst, omzet- en burngrafieken, P&L-samenvattingstabel, belangrijkste punten en vooruitzichtenparagraaf. Gebruik wanneer de brief 'financieel rapport', 'Q3-rapport', 'MRR-review', 'P&L' of '财报' noemt.
prototype Lees volledige prompt → Laatste 30 dagen
Onderzoek naar community- en sociale trends van de afgelopen 30 dagen. Gebruik wanneer u wilt weten wat mensen nu zeggen, recent sentiment, reacties van de community, sociaal bewijs, lanceringsreacties, trendscan of context van de laatste 30 dagen.
prototype Lees volledige prompt → Flowai live dashboardsjabloon
Teambeheerdashboard in FlowAI-stijl met drie tabbladen (Teamleden, Teamdetails, Activiteitenlog), KPI-statistiekrij, ledentabel, staafdiagram rolenverdeling, sparklines voor online aanwezigheid en activiteit, en toppbijdragers-panel. Ondersteunt licht/donker thema, grafiektooltips, klikzoom en CSV-export.
Dashboards met Open Design versus de oude manier
| Wat je nodig hebt | Met Open Design | BI-tools / met de hand gecodeerd |
|---|---|---|
| Van metriclijst naar indeling | ●Eén prompt; de agent deelt kaarten, grafieken en tabellen in | Sleep widgets stuk voor stuk, of schrijf grafiekcode vanaf nul |
| Consistent visueel systeem | ●Grafiekpatronen en witruimte uit een herbruikbaar designsysteem | Standaard widgetstijlen, of per grafiek met de hand gestileerd |
| Data koppelen | ●CSV / JSON / geplakte rijen, gerenderd naar live HTML | Leverancierconnectors of maatwerk dataleidingen |
| Hosten en delen | ●Zelfstandige HTML op elke statische host, geen account | De kijker heeft een seat bij de BI-leverancier nodig |
| Beoordeling en versiebeheer | ●Leeft in je repo; te diffen als code | Opgesloten bij de leverancier, geen echte diff |
| Kosten en lock-in | ●Open source, gebruik je eigen sleutels, draait lokaal | Abonnement per seat, gehost door leverancier |
Echte dashboards gerenderd uit een prompt en een databron. Begin met een die dicht bij die van jou ligt en beschrijf de metrics die je bijhoudt.
Veelgestelde vragen over dashboards
-
01 Heb ik een BI-tool als Tableau of Looker nodig?
Nee. Open Design rendert dashboards naar HTML binnen je coding agent. Je beschrijft de metrics en wijst hem naar je data; er is geen apart BI-platform om te licentiëren of te leren.
-
02 Waar komt de data vandaan?
Een CSV, een JSON-endpoint, of rijen die je inplakt. Het dashboard is pure HTML en JavaScript, dus jij bepaalt precies waar het uit leest — niets wordt via een gehoste dienst doorgesluisd.
-
03 Kunnen niet-technische teamgenoten het bekijken?
Ja. De uitvoer is een zelfstandige webpagina. Iedereen met de link of het bestand kan het in een browser openen — geen account, geen seat.
-
04 Welke agents kan ik gebruiken?
Claude Code, Codex, Cursor Agent, Gemini CLI en een tiental andere eigen adapters. Je gebruikt je eigen providersleutels.
Bouw je dashboard vanavond nog
Geef de repo een ster, installeer Open Design en verander je metrics in een dashboard dat je overal kunt hosten — in de agent die je al gebruikt.