So bauen Sie ein SaaS-Dashboard mit VULK

Aktualisiert am 17. Juli 2026 — aufgefrischt mit verifizierten Plattformdaten; die Prompts unten sind die getesteten Versionen.

Wie baut man ein SaaS-Dashboard mit VULK?

Die vollständige Antwort: Beginnen Sie mit einem detaillierten Prompt, der Layout (Sidebar-Breite, Header, Inhaltsbereich), Navigationselemente, Statistikkarten mit echten Zahlen, Diagrammtypen und Tabellenspalten spezifiziert — VULK generiert ein vollständiges Vite + React + TypeScript + Tailwind-Projekt mit verdrahtetem Recharts, das in unter zwei Minuten in einer Live-Vorschau läuft. Dann bauen Sie den Rest in geordneten Folge-Prompts: Authentifizierung, Diagramm-Interaktivität, Tabellensortierung/-filter/CSV-Export, zusätzliche Seiten (Projekte, Einstellungen) und Feinschliff (responsive Sidebar, Skeletons, Empty States, Dark Mode). Deploy zu Cloudflare Pages mit einem Klick. Dieser Artikel gibt Ihnen jeden Prompt, copy-paste-fertig, in der Reihenfolge, die funktioniert.

Wenn sich das wie der kanonische KI-Builder-Anwendungsfall anfühlt: Das ist er. Dashboards und Admin-Panels sind die #1-Kategorie KI-generierter Apps mit 12,5% aller Projekte — fast 8× häufiger als die stereotype To-do-App (1,6%, Rang 13) — laut VULK-Plattformdaten, Juli 2026, N = 10.994 klassifizierte aktive Projekte. Software in Form interner Tools ist das, was Menschen tatsächlich bauen, wenn eine App einen Absatz Text kostet.

Was bauen wir?

Ein SaaS-Analytics-Dashboard mit einklappbarer Sidebar, mehreren Diagrammtypen, einer durchsuchbaren Datentabelle, Nutzerauthentifizierung und Exportfunktion. Das ist die Art internes Tool, für die ein Frontend-Entwickler von Grund auf typischerweise zwei bis drei Wochen braucht. Mit VULK dauert die erste funktionierende Version Minuten.

Dieses Tutorial geht die exakten Prompts und den Iterations-Workflow durch, um von nichts zu einem polierten, deploybaren Dashboard zu kommen.

Schritt 1: Was sollte der initiale Generierungs-Prompt enthalten?

Die Qualität der initialen Generierung hängt vollständig davon ab, wie viel Kontext Sie liefern. Hier ein Prompt, der konsistent eine starke Grundlage produziert:

Baue ein SaaS-Analytics-Dashboard für ein
Projektmanagement-Tool.

Layout: Fixe Sidebar links (240px, auf Mobile auf Icons
einklappbar), oberer Header mit Nutzer-Avatar und
Benachrichtigungsglocke, Hauptinhaltsbereich mit Padding.

Sidebar-Navigation:
- Dashboard (Haus-Icon)
- Projekte (Ordner-Icon)
- Aufgaben (Checkbox-Icon)
- Team (Nutzer-Icon)
- Berichte (Diagramm-Icon)
- Einstellungen (Zahnrad-Icon)

Inhalt der Dashboard-Seite:
1. Obere Reihe: 4 Statistikkarten mit Projekte gesamt (127),
   Aktive Aufgaben (843), Teammitglieder (24),
   Abschlussquote (87%). Jede Karte hat Icon, Wert, Label und
   prozentuale Veränderung zum Vormonat (grün bei positiv,
   rot bei negativ)

2. Mittlere Reihe: Zwei Diagramme nebeneinander
   - Liniendiagramm: „Aufgaben-Abschlusstrend" über die
     letzten 12 Monate
   - Balkendiagramm: „Projekte nach Abteilung" mit 6 Abteilungen

3. Untere Reihe: Datentabelle „Aktuelle Aufgaben" mit den
   Spalten: Aufgabenname, Projekt, Zuständiger (mit Avatar),
   Priorität (Badges Niedrig/Mittel/Hoch), Status (Badges Zu
   erledigen/In Arbeit/Fertig), Fälligkeitsdatum. Füge ein
   Suchfeld und Paginierung hinzu (10 Zeilen pro Seite).

Farbschema: Weißer Hintergrund, schiefergraue Sidebar, blaue
Akzentfarbe (#3B82F6) für aktive Zustände und primäre Buttons.
Nutze Tailwind CSS und Recharts für die Diagramme. TypeScript.

Dieser Prompt spezifiziert Layoutmaße, Navigationsstruktur, Dateninhalt, Diagrammtypen, Tabellenspalten und visuelles Design. Die KI muss keine dieser Entscheidungen raten. (Zur Kalibrierung: Der mediane Prompt auf der Plattform hat ~60 Wörter und reicht für einfache Apps; ein so spezifisches Dashboard verdient die längere Behandlung — VULK-Plattformdaten, Juli 2026.)

Schritt 2: Was sollten Sie im initialen Output prüfen?

Nach der Generierung zeigt VULKs Live-Vorschau das vollständige Dashboard. Das gilt es zu prüfen:

Layoutstruktur. Die Sidebar sollte fix positioniert sein, der Header sticky, und der Inhaltsbereich sollte unabhängig scrollen. Prüfen Sie, dass die Sidebar auf kleineren Viewports korrekt einklappt.

Diagramm-Rendering. Recharts-Komponenten sollten mit korrekten Achsen, Labels und responsiven Containern rendern. Die Daten sollten Ihren Angaben entsprechen — 12 Monate im Liniendiagramm, 6 Abteilungen im Balkendiagramm.

Tabellenfunktionalität. Die Datentabelle sollte alle Spalten rendern, Prioritäts- und Statusfelder im Badge-Stil zeigen und Suchfeld sowie Paginierungssteuerung enthalten.

Komponentenorganisation. Prüfen Sie, dass der generierte Code separate Komponentendateien nutzt — Sidebar.tsx, StatCard.tsx, TaskTable.tsx, CompletionChart.tsx — statt alles in eine einzige Seitendatei zu packen. (Ein typisches generiertes Projekt sind ~20 fokussierte Dateien, kein Monolith — VULK-Plattformdaten, Juli 2026.)

Schritt 3: Wie fügt man Authentifizierung hinzu?

Der initiale Prompt konzentrierte sich auf die Dashboard-UI. Jetzt Authentifizierung hinzufügen:

Füge diesem Dashboard Authentifizierung hinzu. Inklusive:
- Login-Seite mit E-Mail- und Passwortfeldern,
  „Angemeldet bleiben"-Checkbox und „Passwort vergessen"-Link
- Registrierungsseite mit Name, E-Mail, Passwort,
  Passwort bestätigen
- Geschützte Routen: Umleitung zu /login, wenn nicht
  authentifiziert
- Nutzer-Context, der Name, E-Mail und Avatar-URL des
  eingeloggten Nutzers speichert
- Logout-Button im Sidebar-Footer
- Zeige Name und Avatar des Nutzers im oberen Header

Nutze einen einfachen Auth-Context mit localStorage für die
Session. Das Login-Formular soll das E-Mail-Format validieren
und ein Passwort mit mindestens 8 Zeichen verlangen.

Das generiert einen vollständigen Auth-Flow mit Formularvalidierung, Routenschutz und Nutzer-State-Management. Das chirurgische Editiersystem fügt diese Dateien hinzu, ohne die bestehenden Dashboard-Komponenten zu regenerieren. (Für echte Multi-User-Auth mit Datenbank fragen Sie nach dem Backend Mode — VULK generiert eine PostgreSQL-gestützte API mit bcrypt-Passwort-Hashing und JWT-Sessions; 62% der generierten Apps enthalten ein SQL-Schema.)

Schritt 4: Wie verbessert man die Diagramme?

Die initialen Diagramme sind funktional, aber basal. Verbessern Sie sie:

Verbessere die Dashboard-Diagramme:

1. Mache das Liniendiagramm interaktiv: Zeige beim Hover einen
   Tooltip mit exakten Werten, füge eine Verlaufsfüllung unter
   der Linie hinzu und einen Toggle zum Wechseln zwischen den
   Datensätzen „Abgeschlossene Aufgaben" und „Erstellte Aufgaben"

2. Füge neben dem Balkendiagramm ein Donut-Diagramm
   „Verteilung der Aufgabenstatus" hinzu, mit Segmenten für Zu
   erledigen (blau), In Arbeit (gelb), Fertig (grün) und
   Überfällig (rot). Zeige die Gesamtzahl in der Mitte des
   Donuts.

3. Füge über der Diagrammsektion einen Datumsbereich-Picker
   hinzu. Optionen: Letzte 7 Tage, Letzte 30 Tage, Letzte 3
   Monate, Letzte 12 Monate, Benutzerdefiniert. Der gewählte
   Bereich soll alle Diagrammdaten filtern.

Jeder Folge-Prompt baut auf dem bestehenden Code auf. Die KI versteht die Komponentenstruktur aus der initialen Generierung und modifiziert die richtigen Dateien.

Schritt 5: Wie baut man die Datentabelle aus?

Datentabellen sind der Punkt, an dem SaaS-Dashboards wirklich nützlich werden. Erweitern Sie die Tabelle:

Rüste die Tabelle „Aktuelle Aufgaben" auf:

1. Füge Spaltensortierung hinzu: Klick auf einen Spaltenkopf
   sortiert auf-/absteigend. Zeige einen Sortierpfeil.

2. Füge Filter hinzu: Dropdown-Filter für Priorität
   (Alle/Niedrig/Mittel/Hoch) und Status (Alle/Zu erledigen/In
   Arbeit/Fertig). Die Filter funktionieren zusammen mit der
   Suche.

3. Füge Zeilenauswahl hinzu: Checkbox in jeder Zeile,
   „Alle auswählen"-Checkbox im Kopf. Zeige eine schwebende
   Aktionsleiste bei ausgewählten Zeilen mit den Optionen:
   „Als erledigt markieren", „Löschen", „Auswahl exportieren"

4. Füge einen „CSV exportieren"-Button hinzu, der die aktuelle
   gefilterte Ansicht als CSV-Datei herunterlädt.

5. Erhöhe auf 25 Mock-Datenzeilen mit realistischen
   Aufgabennamen und variierten Status.

Das ist ein dichter Prompt, aber jede Anforderung ist spezifisch. Die KI generiert Sortierlogik, Filter-State-Management, CSV-Generierung und Auswahlbehandlung — alles integriert in die bestehende Tabellenkomponente.

Schritt 6: Wie fügt man die Projekte-Seite hinzu?

Dashboards brauchen mehr als eine Seite. Erweitern Sie die Sidebar-Navigation:

Baue die Projekte-Seite (erreichbar über die Sidebar).

Inhalt:
- Header mit dem Titel „Projekte" und einem
  „Neues Projekt"-Button
- Raster aus Projektkarten (3 Spalten auf Desktop, 1 auf Mobile)
- Jede Karte zeigt: Projektname, Beschreibung (auf 2 Zeilen
  gekürzt), Fortschrittsbalken mit Prozent, Avatare der
  Teammitglieder (gestapelt, max. 3 mit +N-Überlauf),
  Fälligkeitsdatum und Status-Badge (Aktiv/Pausiert/
  Abgeschlossen)
- Suchleiste und Statusfilter oben
- Der „Neues Projekt"-Button öffnet ein Modal mit: Projektname,
  Beschreibungs-Textarea, Startdatum, Fälligkeitsdatum,
  Teammitglieder-Auswahl (Multi-Select-Dropdown) und
  Prioritätsauswahl

Füge 9 Mock-Projekte mit variierten Daten hinzu.

Schritt 7: Wie fügt man die Einstellungsseite hinzu?

Baue die Einstellungsseite mit Tabs:

1. Profil-Tab: Formular mit Avatar-Upload-Bereich, Name, E-Mail,
   Jobtitel und Bio-Textarea. Speichern-Button unten.

2. Benachrichtigungen-Tab: Umschalter für
   E-Mail-Benachrichtigungen (Aufgabe zugewiesen, Aufgabe
   abgeschlossen, Projekt-Updates, wöchentliche Zusammenfassung).
   Jeder Umschalter hat Label und Beschreibung.

3. Darstellung-Tab: Theme-Auswahl (Hell/Dunkel/System) mit
   Vorschau-Thumbnails und Radio-Buttons für die
   Sidebar-Position (Links/Rechts).

4. Sicherheit-Tab: Passwort-ändern-Formular (aktuelles Passwort,
   neues Passwort, neues Passwort bestätigen) und
   Zwei-Faktor-Authentifizierungs-Toggle mit
   Einrichtungsanleitung.

Welche Iterations-Prompts bringen den meisten Feinschliff?

Nach dem Bau der Kernseiten verbessern diese Folge-Prompts Feinschliff und Nutzbarkeit:

Responsives Verhalten:

Lass die Sidebar auf Bildschirmen unter 768px zu einem
Hamburger-Menü kollabieren. Die Sidebar soll als Overlay mit
Backdrop hereingleiten. Füge weiche Übergangsanimationen hinzu.

Ladezustände:

Füge Skeleton-Ladezustände für die Statistikkarten, Diagramme
und die Datentabelle hinzu. Zeige die Skeletons beim ersten
Laden des Dashboards 1,5 Sekunden lang, als Simulation eines
API-Abrufs.

Empty States:

Füge Empty-State-Illustrationen hinzu für den Fall, dass es
keine Aufgaben gibt (zeige ein Klemmbrett-Icon mit der Meldung
„Noch keine Aufgaben") und keine Projekte (zeige ein Ordner-Icon
mit der Meldung „Erstelle dein erstes Projekt" und einem
CTA-Button).

Dark Mode:

Füge Dark-Mode-Unterstützung hinzu. Der Theme-Toggle in den
Einstellungen soll zwischen hellem und dunklem Theme wechseln.
Dark Mode: Hintergrund #1a1a2e, Sidebar #16213e, Text #e2e8f0.
Speichere die Präferenz in localStorage.

Die Projekte, die am Ende wirklich poliert sind, sind die, die weiter iterieren — die Top 10% der Projekte auf der Plattform überschreiten 25 Nachrichten, gegenüber einem Median von 4 (VULK-Plattformdaten, Juli 2026).

Was sollten Sie vor dem Deployment prüfen?

Bevor Sie Ihr generiertes Dashboard deployen, prüfen Sie diese Bereiche:

State Management. Für einen Prototyp funktionieren React Context und useState gut. Wenn Ihr Dashboard auf 10+ Seiten mit geteiltem State wachsen wird, bitten Sie VULK gegebenenfalls um ein Refactoring zu Zustand oder einer ähnlichen State-Bibliothek.

API-Integrationspunkte. Das generierte Dashboard nutzt Mock-Daten. Identifizieren Sie, wo Fetch-Aufrufe die statischen Arrays ersetzen werden — der generierte Code nutzt typischerweise saubere Datenstrukturen, die direkt auf API-Antwortformen abbilden. Oder überspringen Sie das komplett, indem Sie den Backend Mode anfragen, der eine echte PostgreSQL-gestützte API provisioniert.

Error Boundaries. Fügen Sie Fehlerbehandlung um Diagrammkomponenten und Datenabrufe hinzu. Ein Absturz der Diagrammbibliothek sollte nicht die ganze Seite mitreißen.

Barrierefreiheit. Prüfen Sie Tastaturnavigation in der Sidebar, Fokusverwaltung in Modals und korrekte Aria-Labels auf interaktiven Elementen. Der generierte Code enthält grundlegende Barrierefreiheit, aber komplexe Interaktionen wie die Datentabelle brauchen eventuell ARIA-Erweiterungen.

Wie deployt man das Dashboard?

Sobald Sie mit dem Ergebnis zufrieden sind, deployen Sie mit einem Klick zu Cloudflare Pages. Ihr Dashboard bekommt sofort eine Live-URL. Teilen Sie sie mit Stakeholdern für Feedback und iterieren Sie auf Basis ihrer Rückmeldungen. Der gesamte Zyklus — vom ersten Prompt zum deployten Dashboard — passt in eine einzige Arbeitssitzung.

Und deployen Sie wirklich: Plattformweit erreichen nur 3,7% der generierten Apps je eine öffentliche URL (VULK-Plattformdaten, Juli 2026). Der letzte Klick ist der seltenste.