Praktische Übung · 70–85 Minuten
Dein Dashboard. Deine Fragen.
Du lässt dir von Claude Code oder Codex ein Dashboard für eine Frage aus deinem eigenen Geschäft bauen, mit erfundenen Zahlen. Dann prüfst du es selbst und gibst es an die Kursleitung.
Laptop, Browser und dein Claude Code oder Codex, das bei dir schon eingerichtet ist. Kein Programmieren, keine echten Firmendaten: Die Technik erledigt die KI.
Ein klickbares Dashboard mit drei bis vier Kennzahlen, einem Diagramm, einem Zeitraumfilter, sichtbaren Quellen, dem Hinweis „Beispieldaten“ und einem ehrlichen „Nicht verfügbar“, wenn eine Quelle fehlt.
So arbeitest du: Lies eine Etappe, führe sie aus und schreibe deine eigene Entscheidung auf. Beispiel zeigt nur die Form, nicht deine fertige Antwort.
Eingaben werden nur auf diesem Gerät zwischengespeichert.
Ein Thema aus deinem Geschäft wählen
Warum?Ein Dashboard lohnt sich dort, wo du regelmäßig mehrere Programme öffnest und Zahlen von Hand zusammensuchst. Eine klare Frage bestimmt, welche Zahlen zusammengehören. Das Dashboard entscheidet nicht für dich, was geschäftlich wichtig ist.
Tu dasSuch dir eine Frage aus deinem Geschäft, die du dir jede Woche oder jeden Monat stellst. Schreib auf, welche Entscheidung das Dashboard dir erleichtern soll.
Social-Media- und Anfragen-Wochenblick. Frage: Welche Plattform bringt uns Anfragen, nicht nur Likes?
Quellen: Meta Business Suite (Instagram, Facebook), Statistik von TikTok oder LinkedIn, Kontaktformular oder E-Mail-Postfach.
Kennzahlen: Reichweite je Plattform · Klicks zur Website · Anfragen pro Woche · Werbekosten je Anfrage (Werbekosten ÷ Anfragen).
Angebots- und Auftragsübersicht. Frage: Welche offenen Angebote fassen wir diese Woche nach?
Quellen: Angebotsliste oder CRM, Buchhaltung oder Warenwirtschaft (Rechnungen), Kalender mit Kundenterminen.
Kennzahlen: offene Angebote in Euro · Abschlussquote (gewonnene ÷ entschiedene Angebote) · durchschnittlicher Auftragswert · Tage bis zur Zahlung.
Oder du nimmst den Übungsshop aus dem Kurs: Shopify für Umsatz und Bestellungen, Meta Ads und Google Ads für Werbekosten, Kennzahl MER = Umsatz ÷ gesamte Werbekosten.
Beispiel: Social-Media-Wochenblick – hilft mir zu entscheiden, wo ich nächste Woche Zeit und Werbebudget einsetze.
Daran erkennst du ErfolgDein Thema nennt eine wiederkehrende Frage und eine Entscheidung. Eine Kollegin könnte in einem Satz sagen, wofür das Dashboard da ist.
Wenn es nicht klapptFrag dich: „Für welche Zahl öffne ich jede Woche mehr als ein Programm?“ Oder nimm Beispiel A, B oder den Übungsshop.
Quellen und Kennzahlen festlegen
Warum?Jede Zahl braucht eine Herkunft und einen klaren Rechenweg. Sonst baut die KI etwas, das gut aussieht, aber niemand nachprüfen kann.
Tu dasSchreib zwei oder drei Programme auf, aus denen die Zahlen kommen. Wähle dann drei oder vier Kennzahlen für den ersten Bildschirm. Wenn eine Kennzahl gerechnet wird, schreib den Rechenweg dazu.
Beispiel: Meta Business Suite für Reichweite und Werbekosten, LinkedIn-Statistik, Kontaktformular für Anfragen.
Beispiel: Anfragen pro Woche; Werbekosten je Anfrage = Werbekosten ÷ Anfragen; Klicks zur Website.
Daran erkennst du ErfolgZu jeder Kennzahl steht, woher sie kommt. Bei gerechneten Kennzahlen steht, was durch was geteilt oder was addiert wird.
Wenn es nicht klapptBeginne mit einer einzigen Zahl, die du heute schon kennst, und frage: „In welchem Programm schaue ich sie nach?“
Dashboard bauen lassen
Warum?Du beschreibst, was du brauchst, die KI baut die Seite und speichert sie als Datei auf deinem Computer. Mit erfundenen Beispieldaten kannst du alles ausprobieren, ohne echte Firmendaten herauszugeben.
Tu dasLege auf deinem Schreibtisch einen neuen, leeren Ordner mein-dashboard an. Wähle Claude Code oder Codex und öffne diesen Ordner darin, wie unten beschrieben. Deine Einträge aus Etappe 1 und 2 stehen schon im Auftrag unten. Lies ihn einmal durch, kopiere ihn und schick ihn ab. Steht irgendwo noch eine eckige Klammer, fehlt dort ein Eintrag.
- Öffne Claude Code und wähle den Ordner
mein-dashboardals Arbeitsordner. In der App über die Ordnerauswahl; im Befehlsfenster: Fenster im Ordner öffnen undclaudetippen. - Füge den Auftrag ein und schick ihn ab. Fragt Claude, ob es die Datei anlegen darf, erlaube es.
- Claude speichert
dashboard.htmlim Ordner und öffnet sie im Browser. Probier Filter und Kacheln dort aus.
Wenn es nicht klappt: Öffnet sich kein Browser, doppelklicke im Ordner auf dashboard.html.
- Öffne Codex und wähle den Ordner
mein-dashboardals Arbeitsordner. In der App über die Ordnerauswahl; im Befehlsfenster: Fenster im Ordner öffnen undcodextippen. - Füge den Auftrag ein und schick ihn ab. Fragt Codex, ob es die Datei anlegen darf, erlaube es.
- Codex speichert
dashboard.htmlim Ordner und öffnet sie im Browser. Probier Filter und Kacheln dort aus.
Wenn es nicht klappt: Öffnet sich kein Browser, doppelklicke im Ordner auf dashboard.html.
Erstelle mir ein interaktives Dashboard als eine einzige HTML-Seite. Thema und Entscheidung: [mein Thema]. Datenquellen: [meine Quellen]. Kennzahlen mit Rechenweg: [meine Kennzahlen]. Verwende ausschließlich erfundene Beispieldaten für die letzten 30 Tage und schreibe oben gut sichtbar „Beispieldaten“. Zeige die Kennzahlen als große Kacheln, darunter ein Diagramm über die Zeit und einen Filter für „Letzte 7 Tage“ und „Letzte 30 Tage“. Schreibe unter jede Kennzahl, aus welcher Quelle sie kommt. Zeige ganz unten eine Tabelle mit den erfundenen Ausgangszahlen pro Tag, damit ich nachrechnen kann. Helles, ruhiges Design, alle Beschriftungen auf Deutsch. Speichere alles in einer einzigen Datei dashboard.html in diesem Ordner, ohne Installation und ohne Verbindung zu echten Konten, und öffne sie danach im Browser.
Beispiel: Das Dashboard erscheint, oben steht „Beispieldaten“.
Beispiel: Vier Kacheln, ein Liniendiagramm, der Filter wechselt zwischen 7 und 30 Tagen, unten die Tabelle.
Daran erkennst du ErfolgDu siehst deine Kennzahlen als Kacheln, ein Diagramm, einen Zeitraumfilter, die Quellen unter den Kennzahlen, den Hinweis „Beispieldaten“ und unten die Tabelle mit den Ausgangszahlen.
Wenn es nicht klapptFehlt etwas, sag es der KI in einem Satz und lade danach die Seite im Browser neu, zum Beispiel „Die Quellen fehlen unter den Kacheln“. Eine Sache pro Nachricht funktioniert am besten.
Eine Verbesserung einbauen lassen
Warum?Im echten Betrieb fällt manchmal eine Quelle aus. Ein gutes Dashboard zeigt dann „Nicht verfügbar“. Ein schlechtes zeigt still eine 0, und jemand trifft darauf eine falsche Entscheidung.
Tu dasWähle eine deiner Quellen aus. Sie erscheint automatisch im Auftrag. Kopiere ihn, schick ihn in derselben Sitzung ab, lade die Seite im Browser neu und schalte den neuen Schalter ein und aus.
Beispiel: Meta Business Suite.
Baue bitte oben einen Schalter „[Quelle] fällt aus“ ein. Wenn er eingeschaltet ist, zeigt jede Kennzahl, die diese Quelle braucht, „Nicht verfügbar“ statt 0 oder einer Teilsumme. Die anderen Kennzahlen bleiben sichtbar. Ändere sonst nichts und sag mir in einem Satz, welche Kennzahlen betroffen sind.
Beispiel: Bei „Meta fällt aus“ zeigen Reichweite und Werbekosten je Anfrage „Nicht verfügbar“, die Anfragen bleiben sichtbar.
Daran erkennst du ErfolgBei eingeschaltetem Schalter steht nirgends eine 0, wo eigentlich Daten fehlen. Die Kennzahlen ohne diese Quelle bleiben sichtbar.
Wenn es nicht klapptZeigt eine Kachel trotzdem 0, schreib: „Die Kachel [Name] zeigt 0 statt ‚Nicht verfügbar‘. Bitte korrigieren.“
Selbst nachrechnen und kritisch prüfen
Warum?Ein Dashboard kann fertig aussehen und trotzdem falsch rechnen. Die KI kann sich verrechnen oder einen Zeitraum verwechseln. Deshalb prüft am Ende ein Mensch.
Tu das
- Nachrechnen: Nimm eine gerechnete Kennzahl. Rechne sie mit der Tabelle unten im Dashboard und einem Taschenrechner selbst nach, für „Letzte 7 Tage“. Vergleiche dein Ergebnis mit der Kachel.
- Filter testen: Wechsle zwischen „Letzte 7 Tage“ und „Letzte 30 Tage“. Ändern sich die Kacheln wirklich?
- Plausibel? Passen die erfundenen Zahlen grob zur Größe deines Betriebs, oder sind sie viel zu groß oder zu klein?
- Kritisch nachfragen: Stell der KI die Frage unten und prüfe, ob ihr Hinweis stimmt.
Beispiel: Werbekosten 7 Tage laut Tabelle 420 €, Anfragen 12 → 420 ÷ 12 = 35 € je Anfrage. Die Kachel zeigt 35 €.
Beispiel: Stimmt überein. Oder: Die Kachel zeigt 30 Tage, obwohl 7 Tage gewählt sind – ich habe der KI den Fehler gemeldet.
Beispiel: Bei 7 Tagen zeigen die Kacheln kleinere Werte als bei 30 Tagen.
Beispiel: 2.400 Anfragen pro Woche sind für unseren kleinen Betrieb viel zu hoch; realistisch wären etwa 15. Ich habe die KI gebeten, die Zahlen anzupassen.
Kritische Frage an die KI
Welche Kennzahl auf diesem Dashboard könnte mich zu einer falschen Entscheidung verleiten, und warum? Nenne mir die eine wichtigste und sag mir, was ich zusätzlich prüfen sollte, bevor ich mich auf sie verlasse.
Beispiel: Die KI nennt „Werbekosten je Anfrage“: Bei wenigen Anfragen schwankt der Wert stark. Das stimmt, ich schaue deshalb immer auch auf die Zahl der Anfragen.
Daran erkennst du ErfolgDeine Rechnung und die Kachel stimmen überein, oder du hast einen Fehler gefunden und korrigieren lassen. Der Filter wirkt, die Zahlen sind realistisch, und du kennst die Kennzahl, bei der du besonders vorsichtig sein musst.
Wenn es nicht klapptFehlt die Tabelle mit den Ausgangszahlen, bitte die KI: „Zeig unten die Ausgangszahlen pro Tag als Tabelle.“ Ändert der Filter nichts, schreib: „Der Zeitraumfilter ändert die Kacheln nicht. Bitte korrigieren.“ Sind die Zahlen unrealistisch, nenn der KI eine grobe Größe, zum Beispiel „etwa 15 Anfragen pro Woche“.
An die Kursleitung geben
Warum?Ein Dashboard ist erst brauchbar, wenn eine zweite Person es ohne Erklärung öffnen und verstehen kann. Im Kurs ist diese zweite Person die Kursleitung.
Tu dasSchick die Datei dashboard.html aus deinem Ordner mein-dashboard auf dem im Kurs vereinbarten Weg an die Kursleitung. Sie öffnet die Datei mit einem Doppelklick, ganz ohne Claude Code oder Codex.
Daniel hat das Dashboard in sein GitHub-Repository hochgeladen. Sherin, eine Teilnehmerin, hat es von dort heruntergeladen und daran weitergearbeitet. GitHub ist ein Online-Projektordner mit Änderungsgeschichte; wie diese Übergabe Schritt für Schritt funktioniert, zeigt Teil 3 der Kursreihe. Für diese Übung reicht die einfache Variante: Du schickst die Datei.
Beispiel: dashboard.html per E-Mail an die Kursleitung geschickt.
Daran erkennst du ErfolgDie Kursleitung kann dein Dashboard öffnen und sieht sofort, worum es geht, welche Quellen gemeint sind und dass es Beispieldaten sind.
Wenn es nicht klapptFindest du die Datei nicht, frag die KI: „In welchem Ordner liegt dashboard.html?“ Oder öffne den Ordner mein-dashboard auf deinem Schreibtisch.
Passwörter und Schlüssel sicher aufbewahren
Warum?Sobald echte Daten ins Spiel kommen, braucht ein Dashboard Zugänge: ein Passwort oder einen API-Schlüssel. Ein API-Schlüssel ist wie ein Hausschlüssel für die Verbindung zwischen zwei Programmen. Wer ihn hat, kommt an deine Daten, ohne dass du es merkst.
Was du in Claude Code oder Codex eintippst, geht an den Anbieter. Ein Schlüssel dort ist nicht mehr nur bei dir.
Eine HTML-Datei zeigt jedem, der sie hat, den ganzen Inhalt, auch Text, der im Programmcode versteckt ist.
In echten Programmen stehen Schlüssel in einer Einstellungsdatei auf deinem Computer, meist .env.local. Geteilt wird nur die leere Vorlage .env.example. Eine Ausschlussliste (.gitignore) verhindert, dass die echte Datei hochgeladen wird.
Löschen reicht nicht. Sperre den Schlüssel sofort beim Anbieter, zum Beispiel Shopify oder Meta, und erzeuge einen neuen.
Tu dasFrag deine KI in derselben Sitzung, wo ein Schlüssel hingehört. Prüfe die Antwort gegen die Regel oben: Empfiehlt sie eine eigene Datei auf dem Computer, die du selbst ausfüllst? Warnt sie davor, den Schlüssel in die Eingabe oder ins Dashboard zu schreiben?
Angenommen, ich möchte dieses Dashboard später mit echten Daten verbinden und brauche dafür ein Passwort oder einen API-Schlüssel. Wo gehört so ein Schlüssel hin, und wo auf keinen Fall? Erkläre es mir in einfachen Worten. Ich gebe dir dabei keinen echten Schlüssel.
Beispiel: Die KI empfiehlt eine Datei .env.local auf meinem Computer, die ich selbst ausfülle, und warnt, den Schlüssel nie in die Eingabe zu schreiben. Das passt zur Regel.
Beispiel: Ich habe keinen echten Schlüssel und kein echtes Passwort eingegeben.
Daran erkennst du ErfolgDu kannst in einem Satz sagen, wo ein Schlüssel hingehört (eigene Datei auf dem Computer) und wo nicht (Eingabe der KI, Dashboard, E-Mail, Bildschirmfoto). Und was du tust, wenn er doch rausgerutscht ist.
Wenn es nicht klapptFragt die KI nach deinem echten Schlüssel, gib ihn nicht ein. Schreib: „Ich gebe dir keinen echten Schlüssel. Zeig mir nur, wo er hingehört.“
Mit echten Daten weiterdenken
Warum?Dein Dashboard ist ein Entwurf mit erfundenen Zahlen. Mit echten Daten kommen Fragen dazu: Wer darf sie sehen? Wie kommen sie hinein? Wer prüft sie? Wie aus so einem Entwurf ein Programm mit echter Datenverbindung wird, zeigen Teil 2 bis 4 der Kursreihe.
Tu dasPlane deinen ersten kleinen, risikoarmen Schritt. Denk an die Schlüssel-Regel aus Etappe 7.
Beispiel: Zugang bekommt zuerst nur ich; unsere Büroleitung prüft die Summen gegen die Plattformberichte; zuerst teste ich mit einer Woche ohne Personendaten.
Daran erkennst du ErfolgDein Plan nennt Daten, berechtigte Personen, eine prüfende Person und einen kleinen ersten Test.
Wenn es nicht klapptFrag zuerst, welche Entscheidung eine Zahl unterstützen soll. Für den ersten Test genügen kleine, freigegebene und möglichst unpersönliche Daten.
Deinen Lernstand freiwillig teilen
Deine Eingaben bleiben als Zwischensicherung auf diesem Gerät. Das ist getrennt vom Senden. Beim freiwilligen Senden gehen nur Thema, Quellen, Kennzahlen, deine Prüfung, der Weg deiner Datei und dein nächster Schritt sowie ein optionaler Name und eine optionale Firma an die Kursleitung. Keine echten Kunden- oder Zugangsdaten eingeben.