In 60 Minuten zum ersten Dashboard mit Claude Code
Sie haben eine Excel-Datei mit Budget- und Ist-Zahlen. Am Ende dieses Artikels haben Sie ein interaktives Dashboard mit Charts, Filtern und Ampel-Logik – ohne eine Zeile Code selbst zu schreiben. Alles, was Sie brauchen: Claude Code und die Prompts aus diesem Artikel.
Orcha Team
26. März 2026
Wenn Sie nicht weiterkommen: Fragen Sie Claude einfach. Beschreiben Sie Ihr Problem, und wenn es hilft, machen Sie einen Screenshot und fügen Sie ihn per Copy-Paste ein. Claude versteht Bilder und kann daraus den Kontext ableiten.
Hinweis: Dies ist eine einfache Demo-App, die zeigt, wie Claude Code funktioniert. Passen Sie die Prompts an Ihre eigenen Excel-Dateien und Bedürfnisse an. Um die App auf einem Server zu hosten (z.B. im Intranet), sind weitere Schritte nötig – das ist hier bewusst ausgeklammert. Wenn Ihnen die Richtung gefällt und Sie komplexere Tutorials wünschen, schreiben Sie uns – wir bauen darauf auf.
Warum Claude Code – und nicht Lovable?
Vielleicht haben Sie von Lovable, Bolt oder Replit gehört. Das sind Browser-Tools, in denen man beschreibt, was man will – und die KI baut eine App. Für einen ersten Prototyp sind sie sogar etwas einfacher, weil man nichts installieren muss.
Trotzdem empfehlen wir Claude Code. Der Grund: Claude Code kann mehr als nur bauen. Sie können im selben Tool Ihre Daten analysieren, Fragen stellen, und dann das Dashboard erweitern – alles in einer Umgebung. Bei Lovable bauen Sie eine App, aber die Analyse und das Weiterdenken passieren woanders.
Außerdem: Bei Claude Code liegen alle Dateien lokal auf Ihrem Computer. Sie können die HTML-Datei per E-Mail verschicken, auf SharePoint hochladen, oder einfach auf einem USB-Stick mitnehmen. Bei Lovable sind Ihre Daten in der Cloud des Anbieters.
Vergleich auf einen Blick
| Claude Code | Lovable | |
|---|---|---|
| Dateien lokal | Ja – alles auf Ihrem Rechner | Nein – Cloud des Anbieters |
| Analyse + Bauen | Beides im selben Tool | Nur Bauen |
| Weiter iterieren | Beliebig über Wochen | Eingeschränkt |
| Hosting inklusive | Nein (Datei öffnen reicht) | Ja |
| Einstieg | VS Code (kostenloser Editor) | Browser |
Kurz erklärt: Was ist HTML, Frontend, Backend?
HTML ist die Sprache, die Ihr Browser versteht. Wenn Sie eine .html-Datei doppelklicken, zeigt der Browser sie als Webseite an – ähnlich wie Word eine .docx-Datei öffnet.
Frontend ist alles, was Sie im Browser sehen: Charts, Tabellen, Buttons. Backend ist ein Server, der im Hintergrund Daten speichert und verarbeitet. Für unser Tutorial brauchen wir kein Backend – die Daten kommen aus der Excel-Datei und werden direkt in die HTML-Datei eingebettet.
Warum ist das wichtig? Weil es den Aufwand massiv reduziert. Kein Server, keine Datenbank, kein Hosting – Sie doppelklicken die Datei und sehen Ihr Dashboard. Genau das werden wir Claude Code auch sagen: Kein Backend, alles in einer HTML-Datei.
Was Sie brauchen
Ein Claude-Abo
Claude Pro ($20/Monat) reicht aus. Claude Max, Teams oder Enterprise funktionieren ebenfalls. Sie können das Abo jederzeit kündigen.
Einen Computer (Mac oder Windows)
Kein besonderer Rechner nötig. Alles, was wir tun, funktioniert auf jedem normalen Laptop.
Eine Excel-Datei mit Ihren Daten
Idealerweise eine Budget-vs.-Ist-Übersicht. Wir beschreiben unten die erwartete Struktur – aber Claude Code kann auch andere Formate lesen.
Einen Browser
Chrome, Edge, Safari oder Firefox – alle funktionieren.
Schritt 1: VS Code und Claude Code installieren
Claude Code ist eine Erweiterung für VS Code – einen kostenlosen Text-Editor von Microsoft. Denken Sie an VS Code wie an Word, aber für Dateien, die der Computer versteht. Sie müssen VS Code nicht „können“ – wir nutzen es nur als Hülle für Claude Code.
So geht’s:
VS Code herunterladen
Gehen Sie auf code.visualstudio.com und laden Sie die Version für Ihr Betriebssystem herunter. Installieren Sie es wie jedes andere Programm.
Claude Code installieren
Öffnen Sie VS Code. Klicken Sie auf das Extensions-Icon in der linken Seitenleiste (die vier kleinen Quadrate). Suchen Sie nach „Claude Code“ und klicken Sie auf Installieren.
Anmelden
Nach der Installation erscheint das Claude-Icon in der Seitenleiste. Klicken Sie darauf und melden Sie sich mit Ihrem Anthropic-Konto an. Ein Browserfenster öffnet sich – bestätigen Sie die Anmeldung.
[Screenshot: VS Code mit installierter Claude Code Extension in der Seitenleiste]
Tipp: VS Code funktioniert auf Mac und Windows identisch. Die Schritte sind auf beiden Systemen gleich.
Schritt 2: Projektordner anlegen und Excel platzieren
Jetzt bereiten wir die Dateien vor. Alles passiert über die normale Dateiverwaltung – kein Terminal nötig.
Neuen Ordner erstellen
Erstellen Sie auf Ihrem Desktop (oder einem anderen Ort) einen neuen Ordner. Nennen Sie ihn z.B. budget-dashboard. Auf dem Mac: Rechtsklick → „Neuer Ordner“. Unter Windows: Rechtsklick → „Neu“ → „Ordner“.
Excel-Datei in den Ordner kopieren
Ziehen Sie Ihre Excel-Datei (z.B. budget-daten.xlsx) in den neuen Ordner. Das ist alles – der Ordner sollte jetzt genau eine Datei enthalten.
Ordner in VS Code öffnen
Öffnen Sie VS Code. Klicken Sie auf Datei → Ordner öffnen (Mac: File → Open Folder) und wählen Sie den neuen Ordner aus. In der linken Seitenleiste sehen Sie jetzt Ihre Excel-Datei.
Claude Code öffnen
Klicken Sie auf das Claude-Icon in der Seitenleiste. Es öffnet sich ein Chat-Fenster – hier geben Sie gleich Ihre Prompts ein.
[Screenshot: VS Code mit geöffnetem Ordner (Excel-Datei sichtbar) und Claude Code Panel]
Beispiel-Struktur Ihrer Excel-Datei
Ihre Excel-Datei sollte ungefähr so aussehen. Aber keine Sorge: Claude Code erkennt die Struktur automatisch, auch wenn Ihre Spalten anders heißen.
| Monat | Kostenstelle | Budget (EUR) | Ist (EUR) |
|---|---|---|---|
| Jan | Marketing | 50.000 | 48.200 |
| Jan | Vertrieb | 80.000 | 85.300 |
| Jan | IT | 35.000 | 34.100 |
| Feb | Marketing | 50.000 | 52.800 |
| ... usw. für alle Monate und Kostenstellen | |||
Schritt 3: Das Dashboard bauen – die Prompts
Jetzt wird es spannend. Wir geben Claude Code drei Prompts – jeden können Sie direkt kopieren und in das Claude-Code-Chat-Fenster einfügen. Claude liest Ihre Excel-Datei, versteht die Struktur, und generiert das Dashboard.
Prompt 1: Dashboard aus Excel generieren
Claude Code wird jetzt Ihre Excel-Datei lesen, die Daten extrahieren und eine komplette HTML-Datei generieren. Das dauert etwa 1–2 Minuten. Sie sehen in Echtzeit, wie Claude die Datei schreibt.
[Screenshot: Claude Code generiert das Dashboard – Fortschritt im Chat-Fenster sichtbar]
Prompt 2: Dashboard verfeinern
[Screenshot: Dashboard mit KPI-Karten und zweitem Chart]
Prompt 3: Feinschliff
Schritt 4: Ergebnis im Browser öffnen
In der linken Seitenleiste von VS Code sehen Sie jetzt die neue Datei dashboard.html. So öffnen Sie sie:
Im Explorer anzeigen
Klicken Sie mit der rechten Maustaste auf dashboard.html in der VS-Code-Seitenleiste und wählen Sie „Im Finder anzeigen“ (Mac) oder „Im Explorer anzeigen“ (Windows).
Doppelklick auf die Datei
Die Datei öffnet sich in Ihrem Standard-Browser. Alternativ: Ziehen Sie die Datei direkt in ein offenes Browser-Fenster.
[Screenshot: Fertiges Dashboard im Browser – mit KPI-Karten, Charts, Tabelle und Filtern]
Das ist Ihr Dashboard.
Sie können es per E-Mail verschicken, auf SharePoint hochladen, auf einen USB-Stick kopieren oder einfach im Browser als Lesezeichen speichern. Es funktioniert offline – ohne Server, ohne Internet (außer beim ersten Laden der Chart-Bibliothek).
Was passiert unter der Haube?
Claude Code hat Ihre Excel-Datei gelesen, die Daten extrahiert und als JavaScript-Objekt direkt in die HTML-Datei eingebettet. Es gibt keinen Server – die Daten leben in der Datei selbst.
Die Charts kommen von Chart.js, einer weit verbreiteten Open-Source-Bibliothek. Diese wird beim Öffnen der Datei über das Internet geladen (via CDN). Für den Fall, dass Sie die Datei komplett offline nutzen möchten, können Sie Claude Code einfach bitten: „Bette Chart.js und Tailwind lokal ein, ohne CDN.“
Die gesamte HTML-Datei ist typischerweise 200–400 Zeilen lang. Sie könnten sie in jedem Text-Editor öffnen und lesen – aber Sie müssen das nicht.
Nächste Schritte: Weiter iterieren
Das Dashboard ist ein Startpunkt. Das Schöne an Claude Code: Sie können jederzeit in das Chat-Fenster zurückkehren und weitere Änderungen anfordern. Hier ein paar Ideen:
„Füge einen Monats-Trend-Chart hinzu, der zeigt, wie sich die Abweichung über das Jahr entwickelt.“
„Ergänze einen Export-Button, der die Tabelle als CSV-Datei herunterladbar macht.“
„Erstelle eine zweite Seite mit einer Detailansicht pro Kostenstelle.“
„Füge ein Dark-Mode-Toggle hinzu.“
Und wenn Sie nächsten Monat neue Zahlen haben? Kopieren Sie die neue Excel-Datei in den Ordner und sagen Sie Claude: „Aktualisiere das Dashboard mit der neuen Excel-Datei.“
Fazit
Sie haben gerade ein interaktives Dashboard gebaut – mit Charts, Filtern, Ampel-Logik und KPI-Karten. Ohne eine Zeile Code selbst zu schreiben. Die gesamte Arbeit hat Claude Code für Sie erledigt.
Das ist erst der Anfang. Claude Code kann APIs anbinden, mehrseitige Anwendungen bauen, Berichte automatisch generieren und vieles mehr. Aber der erste Schritt ist immer derselbe: Beschreiben Sie, was Sie wollen – und Claude baut es.
Quellen & weiterführende Links
Ähnliche Artikel: Excel vs. Vibe Coding · Eigene Claude Plugins bauen · Der #1 Fehler bei Claude
Neue Tipps direkt in Ihren Posteingang
Abonnieren Sie unseren Newsletter und erhalten Sie praktische KI-Tipps für Ihren Arbeitsalltag.