Du hast Landing Pages mit KI gemeistert. Respekt. Aber jetzt will dein Auftraggeber ein Admin-Panel – und plötzlich starrst du auf eine leere Prompt-Box und fragst dich, wie du etwas mit 47 verschiedenen UI-Elementen beschreiben sollst. Kenn ich.
Was die meisten Tutorials verschweigen: KI-Dashboard-Prompts erfordern ein völlig anderes Mindset als Landing Pages. Du verkaufst hier nichts mehr – du strukturierst Daten, baust Workflows und gestaltest Interfaces, die Leute täglich acht Stunden nutzen. Machst du es falsch, bekommst du ein hübsches Chaos, das in der Praxis niemand gebrauchen kann.
Ich habe die letzten Monate damit verbracht, Dashboards mit KI-Tools zu bauen, und dabei gelernt, was funktioniert (und was totales Chaos erzeugt). Diese 40+ Vorlagen sind keine Theorie – das sind genau die Prompts, die auf Anhieb saubere, funktionelle Dashboards liefern.
Warum Dashboards für KI-Generierung geradezu ideal sind
Meine etwas ketzerische These: Dashboards lassen sich mit KI einfacher generieren als Landing Pages. Ja, ich stehe dazu.
Denk mal drüber nach. Landing Pages brauchen Kreativität, Brand-Persönlichkeit, emotionale Anker. Dashboards? Die folgen Mustern. Vorhersehbaren Mustern. Sidebar links. KPIs oben. Tabellen darunter. Charts rechts. Die KI hat Tausende davon gesehen – sie weiß genau, was du meinst.
Das Problem: Die meisten Entwickler schreiben Prompts wie für eine Landing Page. Vage. Wolkig. „Mach es modern und clean." Für Marketing-Seiten mag das funktionieren. Für Dashboards bekommst du damit ein hübsches Skelett ohne Seele.
Was die KI für Dashboards braucht:
- Datenkontext (was stellst du eigentlich dar?)
- Nutzer-Workflows (welche Aktionen sind möglich?)
- Komponenten-Spezifität (nicht einfach „eine Tabelle", sondern „eine sortierbare, filterbare Datentabelle mit Pagination")
Wer diesen Perspektivwechsel verinnerlicht, schippt Admin-Panels in Stunden statt in Tagen.
Das richtige Dashboard-Layout wählen
Bevor du anfängst zu promten, musst du das passende Layout für deinen Anwendungsfall wählen. Genau hier machen die meisten Fehler – sie greifen zu dem, was sie schon kennen. Dabei haben verschiedene Dashboards völlig unterschiedliche Zwecke:
| Dashboard-Typ | Geeignet für | Kernkomponenten | Typisches Layout |
|---|---|---|---|
| Analytics-Dashboard | Datenvisualisierung, Metriken-Tracking, Performance-Monitoring | Charts, Graphen, KPI-Karten, Trendlinien | Breiter Content-Bereich, minimale Navigation, datendicht |
| Admin-Panel | Nutzerverwaltung, Content-Management, Systemkonfiguration | Tabellen, Formulare, CRUD-Operationen, Einstellungen | Sidebar-Navigation, Tab-basierter Inhalt, aktionsorientiert |
| E-Commerce-Dashboard | Bestellverwaltung, Inventar, Umsatz-Tracking | Bestelltabellen, Produktlisten, Umsatz-Charts | Sidebar + Top-Bar, gemischte Charts und Tabellen |
Wann Analytics-Layout: Du zeigst Trends, Vergleiche oder brauchst einen schnellen Metrik-Überblick. Denk an Plausible Analytics oder Matomo – gerade in der DACH-Region beliebte, DSGVO-freundliche Alternativen zu Google Analytics.
Wann Admin-Panel-Layout: Nutzer verwalten hauptsächlich Daten – anlegen, bearbeiten, löschen. Denk an WordPress-Admin oder klassische Nutzerverwaltungssysteme.
Wann E-Commerce-Layout: Du brauchst beides – schnelle KPIs UND detailliertes Datenmanagement. Denk an Shopify Admin oder WooCommerce, das in Deutschland nach wie vor riesig ist.
Der Aufbau eines effektiven Dashboard-Prompts
Bevor wir in die Vorlagen eintauchen, schauen wir uns an, was einen Dashboard-Prompt tatsächlich zum Laufen bringt. Wenn du unseren Guide zu Context Engineering für KI-gestütztes Coding gelesen hast, weißt du: Kontext schlägt clevere Formulierungen jedes Mal.
Mein Framework:
[Komponententyp] + [Datenkontext] + [Funktionalität] + [Style-Constraints]
Schlechter Prompt: „Create a dashboard sidebar"
Guter Prompt: „Create a collapsible sidebar navigation with: Dashboard, Users, Products, Orders, Analytics, and Settings sections. Include icon placeholders for each item, active state highlighting, and a collapse button at the bottom. Use a dark theme with subtle hover effects."
Siehst du den Unterschied? Der zweite Prompt gibt der KI alles, was sie braucht, um Entscheidungen zu treffen. Kein Rätselraten.
| Prompt-Element | Was angeben | Warum wichtig |
|---|---|---|
| Komponententyp | Spezifisches UI-Element (Sidebar, Datentabelle, Chart) | Legt die strukturelle Grundlage |
| Datenkontext | Welche Daten angezeigt werden, Beispielwerte | Bestimmt Layout und Formatierung |
| Funktionalität | Sortieren, Filtern, Aktionen, Interaktionen | Verhindert statische, nutzlose Komponenten |
| Style-Constraints | Theme, Abstände, Farbansatz | Sorgt für visuelle Konsistenz |
Sidebar- und Navigations-Prompts
Die Sidebar ist das Rückgrat deines Dashboards. Verpatzt du sie, stimmt der Rest auch nicht. Hier sind Vorlagen, die funktionieren:
Einfache zusammenklappbare Sidebar
Create a responsive sidebar navigation component with: - Logo area at top (40px height) - Navigation sections: Overview, Analytics, Users, Products, Orders, Settings - Each item has an icon placeholder and label - Collapsible to icon-only mode with smooth animation - Active state with left border accent - Dark theme (#1a1a2e background) - Hover states with subtle background change - Mobile: full overlay with close button
Selbst ausprobieren?
Try this prompt⌘+Enterto launch
Mehrstufige Navigation
Build a sidebar with nested navigation: - Top level: Dashboard, Management (expandable), Reports (expandable), Settings - Management submenu: Users, Roles, Permissions, Teams - Reports submenu: Sales, Traffic, Performance, Custom - Smooth expand/collapse animations - Indent child items with visual connector lines - Remember expanded state between page navigations - Include notification badges on select items
Horizontale Top-Navigation
Nicht jedes Dashboard braucht eine Sidebar. Manchmal funktioniert eine horizontale Navigation deutlich besser – vor allem bei wenigen Hauptbereichen:
Create a horizontal dashboard navigation bar: - Logo on left - Main nav items centered: Dashboard, Projects, Team, Reports, Billing - Right side: Search input, notification bell with badge, user avatar dropdown - Dropdown menu for user: Profile, Account Settings, Logout - Sticky on scroll - Mobile: hamburger menu with slide-out drawer
Datentabellen- und Grid-Prompts
Hier scheitern die meisten KI-Dashboard-Prompts. Man fragt nach „einer Datentabelle" und bekommt genau das – eine statische HTML-Tabelle, die im produktiven Einsatz nichts taugt.
Tabellen brauchen Funktionalität. So promptest du Tabellen, die wirklich funktionieren:
Vollwertige Datentabelle
Create a data table component for user management with columns: - Checkbox for bulk selection - Avatar + Name (sortable) - Email (sortable) - Role (filterable dropdown: Admin, Editor, Viewer) - Status (filterable: Active, Inactive, Pending) with colored badges - Last Active (sortable, relative time format) - Actions column (edit, delete buttons with confirmation modal) Include: - Header row with sort indicators - Pagination (10, 25, 50 per page options) - Search input filtering across name and email - Bulk action dropdown (Delete Selected, Export, Change Status) - Empty state when no results - Loading skeleton state
Tipp für DACH-Projekte: Wenn du Nutzerdaten in einer solchen Tabelle verwaltest, lohnt es sich, DSGVO-konforme Aktionen direkt einzuplanen – etwa Schaltflächen für „Daten exportieren" und „Konto löschen" direkt in der Aktionsspalte. Das sparst du dir später als Nacharbeit.
Selbst ausprobieren?
Try this prompt⌘+Enterto launch
Produktinventar-Tabelle
Build an inventory data table showing: - Product image thumbnail (50x50) - Product name with SKU below in muted text - Category with filter - Price (sortable, currency formatted) - Stock quantity with color coding (green >20, yellow 5-20, red <5) - Status toggle (Published/Draft) Features: - Inline editing for price and stock - Quick actions: duplicate, archive, delete - Export to CSV button - Column visibility toggle
Bestell-/Transaktions-Tabelle
Create an orders table with: - Order ID (clickable link style) - Customer name and email - Items count - Total amount (currency formatted) - Payment status badge (Paid=green, Pending=yellow, Failed=red, Refunded=gray) - Fulfillment status (Processing, Shipped, Delivered) - Date (sortable, formatted as "Dec 7, 2025") - Actions: View Details, Issue Refund Add date range filter with preset options (Today, Last 7 days, Last 30 days, Custom)
Chart- und Visualisierungs-Prompts
Bei Charts zeigt KI ihr wahres Potenzial – vorausgesetzt, du gibst ihr den richtigen Kontext. Entscheidend ist nicht nur der Chart-Typ, sondern die Geschichte, die er erzählen soll.
Umsatz-Übersichts-Chart
Create a revenue analytics section with: - Large area chart showing monthly revenue (last 12 months) - Gradient fill under the line (blue to transparent) - Tooltip showing exact value and % change from previous month - Toggle to switch between Revenue, Orders, and Customers views - Comparison line for previous year (dashed, muted color) - Y-axis formatted as currency - Responsive, maintains aspect ratio on resize
Multi-Metrik-Dashboard-Header
Design a KPI metrics row with 4 cards: 1. Total Revenue: $124,563 (+12.5% with green arrow) 2. Active Users: 8,429 (+5.2%) 3. Conversion Rate: 3.24% (-0.8% with red arrow) 4. Avg Order Value: $67.50 (+2.1%) Each card has: - Icon in colored circle - Metric label - Large value - Percentage change with directional indicator - Mini sparkline chart showing 7-day trend
Selbst ausprobieren?
Try this prompt⌘+Enterto launch
Verteilungs-Charts
Build a user demographics section with: - Donut chart showing user distribution by plan (Free 45%, Pro 35%, Enterprise 20%) - Horizontal bar chart showing top 5 countries by users - Stacked bar chart showing device types over last 6 months (Desktop, Mobile, Tablet) - Each chart in a card with title and "View All" link - Consistent color palette across all charts - Legend positioned below each chart
So fügen sich diese Chart-Komponenten typischerweise in ein Dashboard-Layout ein:
Stats-Karten- und KPI-Widget-Prompts
Stats-Karten sind tückischer als sie aussehen. Sie müssen Informationen auf einen Blick vermitteln, ohne zu überwältigen.
Fortschritts-basierte Stats-Karten
Create a goal tracking card grid (2x2): Each card shows: - Goal name (Monthly Sales, New Signups, Support Tickets Closed, NPS Score) - Current value / Target value - Circular progress indicator (percentage filled) - Days remaining in period - Status indicator (On Track=green, At Risk=yellow, Behind=red)
Vergleichs-Stats-Reihe
Build a stats comparison component showing: - This Period vs Last Period side by side - Metrics: Revenue, Orders, Customers, Page Views - Bar visualization showing relative comparison - Percentage change prominently displayed - Ability to toggle period (Week, Month, Quarter, Year)
Echtzeit-Stats-Karte
Design a live metrics card for monitoring: - Large current value with pulsing dot indicator - "Updated X seconds ago" timestamp - Mini line chart showing last 60 data points - High/Low watermarks for the day - Alert threshold line on the chart - Red glow effect when value exceeds threshold
Formular- und Filter-Prompts
Dashboards stehen und fallen mit ihren Filtern. Schlechte Filter-UX macht selbst das schönste Dashboard zur Qual – und kostet deine Nutzer täglich wertvolle Minuten.
Erweitertes Filter-Panel
Create a collapsible filter sidebar for an analytics dashboard: - Date range picker with presets (Today, Yesterday, Last 7/30/90 days, Custom) - Multi-select dropdown for Categories - Multi-select for Status values - Price range slider with min/max inputs - Search input for text filtering - "Apply Filters" and "Reset All" buttons - Show count of active filters on collapse button - Filters persist in URL parameters
Selbst ausprobieren?
Try this prompt⌘+Enterto launch
Schnell-Filter-Leiste
Build a horizontal quick filter bar: - Segmented control for time period (Day/Week/Month) - Status filter chips (All, Active, Pending, Completed) - single select - Tag filter chips (multiple select, horizontal scroll on mobile) - "More Filters" button that opens full filter panel - Active filter count badge
Suche mit Vorschlägen
Design a command-palette style search component: - Centered modal triggered by Cmd+K - Search input with placeholder "Search users, orders, products..." - Results grouped by type with type labels - Keyboard navigation (up/down arrows, enter to select) - Recent searches section - Quick actions section (Create User, New Order, Generate Report)
Vollständige Dashboard-Layout-Prompts
Jetzt fügen wir alles zusammen. Diese Prompts generieren vollständige, funktionelle Layouts in einem einzigen Durchgang:
Analytics-Dashboard
Build a complete analytics dashboard with: Layout: - Collapsible sidebar (240px expanded, 64px collapsed) - Header with breadcrumbs, search, and user menu - Main content area with 24px padding Content: - Top row: 4 KPI cards (Users, Revenue, Sessions, Bounce Rate) - Second row: Large line chart (Sessions over time) taking 2/3 width, donut chart (Traffic Sources) taking 1/3 - Third row: Bar chart (Top Pages) taking 1/2, table (Recent Events) taking 1/2 - Bottom: Full-width table (User Sessions) with pagination Use a neutral color scheme with blue accent. Include loading states for each component.
Selbst ausprobieren?
Try this prompt⌘+Enterto launch
Admin-Panel
Create an admin panel dashboard for a SaaS product: Structure: - Sidebar with: Dashboard, Users, Subscriptions, Content, Analytics, Settings - Top bar with app name, global search, notifications, profile dropdown Dashboard page shows: - Welcome banner with quick stats - Recent activity feed (left 60%) - Quick actions panel (right 40%): Add User, Create Content, View Reports - Recent users table with basic actions - System status indicators (API, Database, Storage) with health badges
E-Commerce-Dashboard
Design an e-commerce admin dashboard: Navigation: Orders, Products, Customers, Analytics, Marketing, Settings Main dashboard includes: - Today's snapshot: Orders, Revenue, Visitors, Conversion Rate - Sales chart (last 30 days) with comparison toggle - Recent orders table (5 rows) with status badges and quick view - Low stock alerts panel - Top selling products list with thumbnails - Pending actions: Reviews to moderate, Returns to process
Typische Fehler und wie du sie vermeidest
Nach Hunderten generierter Dashboards kenne ich die Fehler, die immer wieder auftauchen – und die jedes Mal Zeit kosten:
Fehler 1: Kein Datenkontext Du fragst nach „einer Nutzertabelle" und bekommst überall Lorem Ipsum. Gib immer Beispieldatenformate an.
Fehler 2: States vergessen Deine Tabelle sieht toll aus... bis sie leer ist. Definiere immer Loading-, Empty- und Error-States.
Fehler 3: Alles statisch Charts ohne Hover-States. Tabellen ohne Sortierung. Buttons, die nicht klickbar wirken. Füge Interaktionswörter hinzu: „sortierbar", „anklickbar", „hoverable".
Fehler 4: Mobile ignorieren Dashboards werden oft auf Tablets genutzt, manchmal sogar auf Smartphones – gerade im Außendienst. Ergänze „responsive" und spezifiziere das Mobile-Verhalten explizit.
Fehler 5: Keine visuelle Hierarchie Alles gleich groß, gleich gewichtet. Definiere was primär, sekundär, tertiär ist – die KI kann keine Prioritäten erraten.
Wenn du dein Prompting über Dashboards hinaus auf das nächste Level bringen willst, geht unser Vibe-Coding-Best-Practices-Guide tief ins Detail – für Prompts, die jedes Mal funktionieren.
Jetzt dein Dashboard bauen
Die Vorlagen oben sind keine Zaubersprüche. Sie sind Ausgangspunkte. Die eigentliche Kunst liegt darin, zu verstehen, warum sie funktionieren – und sie auf deine konkreten Anforderungen anzupassen.
Starte mit einem vollständigen Layout-Prompt für die Grundstruktur. Verfeinere dann einzelne Komponenten. Iteriere. Die KI verurteilt dich nicht dafür, 47 Variationen desselben Prompts auszuprobieren.
Wenn du unseren KI-Landing-Page-Prompts-Guide kennst, hast du die Grundlagen schon drauf. KI-Dashboard-Prompts wenden dieselben Prinzipien nur auf einen anderen Problembereich an.
Das beste Dashboard ist nicht das hübscheste – es ist das, das deine Nutzer um 2 Uhr nachts noch verstehen, wenn der Alarm losgeht. Behalt das im Kopf, und du baust etwas wirklich Nützliches.
Jetzt hör auf zu lesen und fang an zu bauen.
