Vibe Coding Google Gemini: Privates Energie-Dashboard aus Excel-Daten

Vibe Coding Google Gemini: Privates HTML-Dashboard für Energiedaten

1. Einleitung:

Die Schnittstelle zwischen technischer Softwareentwicklung und fachlicher Anwendung im Energiesektor durchläuft derzeit einen historischen Paradigmenwechsel. Traditionell war die Erstellung interaktiver, webbasierter Dashboards zur Visualisierung von Energiedaten – seien es Verbrauchsanalysen eines Einfamilienhauses oder Lastgangmessungen eines Industriebetriebs – an spezialisierte Programmierkenntnisse gebunden. Fachanwender, Energieberater und Hausbesitzer sahen sich einer hohen Eintrittsbarriere gegenüber: Während die Daten in Excel-Tabellen verfügbar waren, erforderte der Schritt zur professionellen Visualisierung Kenntnisse in HTML, CSS, JavaScript sowie komplexen Bibliotheken wie D3.js oder Chart.js.

Das Aufkommen großer Sprachmodelle (Large Language Models, LLMs), insbesondere multimodaler Modelle wie Google Gemini, hat eine neue Praxis hervorgebracht, die der KI-Forscher Andrej Karpathy im Frühjahr 2025 als „Vibe Coding“ definierte.¹ Dieser Begriff beschreibt eine Methode, bei der der Nutzer nicht mehr die Syntax (den Code) schreibt, sondern die Semantik (die Absicht und das „Gefühl“ der Anwendung) vorgibt, während die Künstliche Intelligenz die technische Implementierung übernimmt.

Dieser Bericht untersucht exhaustiv, wie dieser Ansatz genutzt werden kann, um ohne tiefe Programmierkenntnisse komplexe Energiedaten aus Excel-Dateien in eigenständige HTML-Dashboards zu transformieren. Er analysiert die technischen Mechanismen, die hinter diesen KI-generierten Anwendungen stehen, beleuchtet die spezifischen Herausforderungen der lokalen Datenverarbeitung (insbesondere die CORS-Problematik) und liefert einen detaillierten Praxisleitfaden. Besonderes Augenmerk liegt auf der Analyse der vom Nutzer bereitgestellten HTML-App-Architektur sowie der Entwicklung robuster Prompts für diverse Anwendungsfälle im Energiemanagement. Ziel ist es, ein tiefgreifendes Verständnis dafür zu schaffen, wie „Vibe Coding“ die Lücke zwischen rohen Excel-Daten und professioneller Business Intelligence schließt.

Praxisbeispiel:

HTML-Energiedatendashboard für Jahresauswertung privater Energieflüsse (hier geht’s zum HTML-Dashboard)

2. Das Paradigma des Vibe Coding

2.1 Definition und theoretischer Unterbau

Vibe Coding stellt eine Abkehr vom imperativen Programmieren dar. In der klassischen Softwareentwicklung muss der Programmierer jeden Schritt definieren, den der Computer ausführen soll. Vibe Coding hingegen ist deklarativ: Der Nutzer beschreibt das gewünschte Endergebnis, und das LLM generiert den notwendigen Code, um diesen Zustand zu erreichen.³ Karpathy beschreibt diesen Zustand als das „Vergessen, dass der Code überhaupt existiert“; der Fokus verschiebt sich vollständig auf die Problemlösung und das Design, während die KI als „Junior Developer“ oder „Pair Programmer“ agiert, der die mühsame Syntaxarbeit übernimmt.⁴

Im Kontext von Energiedaten ist dieser Ansatz revolutionär. Anstatt Stunden damit zu verbringen, Pivot-Tabellen in Excel zu formatieren oder Python-Skripte für Matplotlib zu schreiben, kann der Anwender den „Vibe“ des gewünschten Dashboards beschreiben – etwa „futuristisch, dunkel, mit Neon-Akzenten für Solarerträge“ – und Gemini übersetzt diese ästhetischen und funktionalen Anforderungen in validen Web-Code.

2.2 Abgrenzung zu No-Code und Low-Code

Es ist entscheidend, Vibe Coding von klassischen No-Code- oder Low-Code-Plattformen zu unterscheiden.

• No-Code-Tools (wie Bubble oder Wix) bieten visuelle Baukästen, sind jedoch oft in ihrer Flexibilität eingeschränkt und an proprietäre Plattformen gebunden.
• Vibe Coding hingegen produziert echten, portablen Quellcode (HTML/JS), der überall läuft – lokal auf dem Rechner, auf einem Intranet-Server oder in der Cloud. Es gibt keinen „Vendor Lock-in“; der generierte Code gehört dem Nutzer.¹

Die folgende Tabelle verdeutlicht die Unterschiede im Kontext der Dashboard-Erstellung:

2.3 Die Rolle von Google Gemini 1.5/Pro

Google Gemini hebt sich für diesen Anwendungsfall besonders hervor, da es ein massives Kontextfenster besitzt (bis zu 1 Million Token in neueren Versionen) und multimodal arbeitet.⁵ Das bedeutet, es kann nicht nur Textanweisungen verstehen, sondern auch direkt hochgeladene Excel-Dateien (.xlsx) oder CSV-Dateien analysieren, deren Struktur erkennen und darauf basierend Code schreiben, der exakt auf die Spaltennamen und Datentypen der Datei abgestimmt ist. Dies eliminiert einen der häufigsten Fehlerquellen in der Programmierung: die Diskrepanz zwischen erwarteter und tatsächlicher Datenstruktur.

3. Technische Anatomie einer KI-generierten Energie-App

Um die vom Nutzer erwähnte HTML-App, die auf Basis eines Excel-Files erstellt wurde, vollständig zu verstehen, müssen wir ihre technische Architektur dekonstruieren. Diese Art von Anwendung wird oft als „Single-File Application“ (SFA) bezeichnet, da der gesamte Code – HTML für die Struktur, CSS für das Design und JavaScript für die Logik und Daten – in einer einzigen Datei gekapselt ist.

3.1 Das Problem der Datenpersistenz und CORS

Die größte technische Hürde, die Laien bei der Erstellung lokaler Dashboards begegnen, ist die sogenannte „Cross-Origin Resource Sharing“ (CORS) Richtlinie moderner Webbrowser. Wenn ein Nutzer versucht, eine HTML-Datei per Doppelklick von seiner Festplatte zu öffnen (das Protokoll ist dann file:///), behandeln Browser wie Chrome oder Edge diese Datei aus Sicherheitsgründen als „null origin“.⁶ Versucht der JavaScript-Code in dieser HTML-Datei nun, eine daneben liegende Excel- oder CSV-Datei nachzuladen (via fetch() oder XMLHttpRequest), blockiert der Browser dies, um potenziellen Datendiebstahl zu verhindern.⁸

Ein Laie versteht oft nicht, warum das Dashboard „nicht funktioniert“, obwohl die Dateien im selben Ordner liegen.

Die Vibe-Coding-Lösung (Embedded Data):

Google Gemini umgeht dieses Problem elegant, indem es die Daten nicht dynamisch nachlädt, sondern statisch einbettet.

1. Gemini liest die Excel-Datei während des Chats.
2. Es konvertiert die relevanten Datenzeilen in ein JSON-Format (JavaScript Object Notation).
3. Es schreibt dieses JSON-Objekt direkt in den Quellcode der HTML-Datei in eine Variable, z.B. const energyData = […].

Dadurch ist die App komplett autark. Sie benötigt keinen Webserver und keine Internetverbindung für die Daten. Dies ist das Geheimnis hinter der „einfachen HTML-App“, die der Nutzer hochgeladen hat.

3.2 Architektur der Visualisierungsschicht

Für die Darstellung der Energiedaten greift Gemini fast ausschließlich auf JavaScript-Bibliotheken zurück, die über Content Delivery Networks (CDNs) eingebunden werden. Die Analyse der Forschungsergebnisse zeigt, dass Chart.js hierbei der De-facto-Standard für Vibe Coding ist.⁹

• Chart.js: Wird bevorzugt, weil es canvas-basiert ist (hohe Performance bei vielen Datenpunkten wie 15-Minuten-Intervallen eines Jahres), eine einfache API hat, die LLMs sehr gut beherrschen, und von Haus aus responsive ist.
• Plotly.js: Wird verwendet, wenn komplexere wissenschaftliche Darstellungen wie 3D-Plots oder Kontur-Heatmaps gefordert sind ¹², ist aber oft schwergewichtiger.
• D3.js: Wird selten für Vibe Coding verwendet, da die Syntax sehr komplex und fehleranfällig ist; LLMs neigen hier eher zu Fehlern als bei der deklarativeren Struktur von Chart.js.

3.3 Das Frontend-Design: Bento-Grids und Glassmorphismus

Im Bereich „Vibe“ orientieren sich aktuelle KI-Modelle an modernen UI-Trends. Die generierten Dashboards nutzen oft ein „Bento Grid“ Layout (inspiriert von Apple), bei dem Informationen in abgerundeten Karten-Containern organisiert sind. Technisch wird dies meist durch Tailwind CSS umgesetzt. Anstatt hunderte Zeilen CSS zu schreiben, fügt Gemini Klassen wie class=”bg-gray-800 rounded-xl shadow-lg p-6″ direkt in das HTML ein. Dies ermöglicht schnelle Iterationen und stellt sicher, dass das Dashboard auch auf Mobilgeräten (Responsive Design) funktioniert, ohne dass der Laie Media Queries verstehen muss.¹⁴

4. Domänenwissen: Energiedaten verstehen und aufbereiten

Bevor ein Prompt formuliert werden kann, muss ein Verständnis für die Natur der Energiedaten vorliegen. Ein Dashboard ist nur so gut wie die Fragen, die es beantwortet. Im Kontext von „Vibe Coding“ bedeutet dies, dass der Nutzer der KI die richtigen Begriffe (Domain Language) geben muss, damit diese die Excel-Spalten korrekt interpretiert.

4.1 Kernmetriken und ihre Berechnung

Für Hausbesitzer mit Photovoltaik (PV) oder Energiemanager sind folgende Kennzahlen (KPIs) essenziell. Die KI kann diese berechnen, wenn man ihr die Formeln oder die Logik im Prompt mitgibt ¹⁵:

1. Autarkiegrad (Unabhängigkeit):

• Bedeutung: Wie viel Prozent des eigenen Bedarfs konnte durch die PV-Anlage gedeckt werden?
• Formel:
• Implikation: Ein hoher Wert bedeutet geringe Stromrechnung, aber oft hohe Speicherkosten.
• Visualisierung: Gauge Chart (Tacho) oder Liquid Fill Gauge.

2. Eigenverbrauchsquote (Effizienz):

• Bedeutung: Wie viel Prozent des erzeugten Stroms wurde selbst genutzt (und nicht billig eingespeist)?
• Formel:
• Implikation: Wichtig für die Amortisationsrechnung.
• Visualisierung: Donut Chart.

3. Leistungsfluss (Power Flow):

• Die Darstellung der momentanen Leistung (kW) im Gegensatz zur Arbeit (kWh). Dies erfordert zeitlich hochauflösende Daten (z.B. 15-Minuten-Werte).
• Visualisierung: Sankey-Diagramm (zeigt Flüsse von PV -> Batterie -> Haus -> Netz).

4.2 Datenqualität und Vorbereitung in Excel

Vibe Coding funktioniert nach dem Prinzip „Garbage In, Garbage Out“. Damit Gemini die Excel-Datei verstehen kann, sollten folgende Best Practices beachtet werden:

• Keine verbundenen Zellen: Diese verwirren den Parser der KI.
• Eindeutige Header: Die erste Zeile sollte technische Namen tragen (z.B. timestamp, pv_generation_kwh, grid_import_kwh) anstatt unklarer Bezeichnungen wie Wert 1.
• Datumsformat: Ein ISO-Format (YYYY-MM-DD HH:MM:SS) ist für JavaScript am einfachsten zu parsen. Deutsche Formate (DD.MM.YYYY) führen oft zu Fehlern, wenn die KI nicht explizit darauf hingewiesen wird.¹⁷

4.3 Farbpsychologie im Energie-Kontext

Ein wesentlicher Teil des „Vibes“ ist die Farbgebung. In der Energiewirtschaft haben sich semantische Farben etabliert, die der KI im Prompt mitgeteilt werden sollten, um kognitive Dissonanz zu vermeiden ¹⁸:

• Solar/PV: Gelb (#FFD700) oder Orange (#FFA500). Assoziation: Sonne, Positiv.
• Netzbezug: Rot (#FF4500) oder Dunkelgrau (#4A4A4A). Assoziation: Kosten, Warnung.
• Batterie: Grün (#32CD32) oder Blau (#1E90FF). Assoziation: Speicher, Reserve, Ökologie.
• Verbrauch: Violett oder Neutralblau.

Ein dunkler Hintergrund (Dark Mode) wird oft bevorzugt, da er auf Bildschirmen (z.B. einem an der Wand montierten Tablet) weniger blendet und die bunten Graphen besser zur Geltung bringt – ein Trend, der als „Cyberpunk Energy Esthetic“ in Foren wie Home Assistant populär ist.²⁰

5. Praxis-How-to: Erstellung des Dashboards mit Gemini

Dieser Abschnitt führt Schritt für Schritt durch den Prozess, wie ein Laie von einer Excel-Datei zu einem funktionierenden Dashboard kommt. Wir integrieren hierbei die Erkenntnisse zur Fehlerbehebung und Prompt-Optimierung.

Schritt 1: Vorbereitung der Umgebung

Es wird keine Softwareinstallation benötigt. Notwendig sind:

1. Ein Google Account mit Zugriff auf Gemini Advanced (empfohlen für besseren Datei-Upload und Code-Qualität) oder Gemini 1.5 Pro.
2. Die bereinigte Excel-Datei.
3. Ein Texteditor (Notepad, TextEdit oder besser VS Code), um den Code später zu speichern.

Schritt 2: Der initiale Upload und die Analyse

Laden Sie die Excel-Datei in den Chat hoch. Beginnen Sie nicht sofort mit dem Dashboard-Wunsch, sondern lassen Sie die KI die Daten erst „verstehen“.

• Prompt: „Analysiere diese Excel-Datei. Identifiziere die Zeitstempel und die wichtigsten Energiespalten (Erzeugung, Verbrauch, Bezug). Bestätige mir, dass du die Struktur verstanden hast und nenne mir Beispiele für die Datenpunkte.“
• Grund: Dies verhindert Halluzinationen. Wenn Gemini die Spalte „Bezug“ fälschlicherweise als „Erzeugung“ interpretiert, wäre das gesamte Dashboard falsch. Die Bestätigung dient der Qualitätssicherung.¹⁷

Schritt 3: Der „Vibe Coding“ Prompt (Konstruktion)

Ein erfolgreicher Prompt für Code-Generierung besteht aus vier Komponenten: Rolle, Aufgabe, Constraints (Einschränkungen) und Vibe.

• Rolle: „Du bist ein Senior Frontend Developer und Experte für Datenvisualisierung im Energiebereich.“
• Aufgabe: „Erstelle ein interaktives HTML-Dashboard basierend auf den hochgeladenen Daten.“
• Constraints (Kritisch!): „Bette die Daten als JSON-Objekt direkt in den Code ein (kein externer File-Load, um CORS-Fehler zu vermeiden). Nutze Chart.js für die Diagramme und Tailwind CSS via CDN für das Styling. Der Code muss in einer einzigen Datei funktionieren.“
• Vibe: „Das Design soll modern, dunkel (Dark Mode) und minimalistisch sein. Nutze Neon-Farben für die Graphen.“

Schritt 4: Deployment und Testen

Gemini wird einen langen Code-Block generieren.

1. Kopieren Sie den Code (Button „Copy Code“ oben rechts im Block).
2. Erstellen Sie eine neue Textdatei auf Ihrem Desktop, nennen Sie sie dashboard.html (achten Sie darauf, dass sie nicht .html.txt heißt).
3. Öffnen Sie die Datei mit einem Doppelklick im Browser.

Schritt 5: Iteratives „Vibe Tuning“

Das erste Ergebnis ist selten perfekt. Hier beginnt das eigentliche „Vibe Coding“ – das Formen der Software durch Feedback.³

• Fehler: „Das Diagramm ist leer.“ -> Feedback: „Die Charts bleiben weiß. Überprüfe, ob die Datumsspalte korrekt geparst wird. Das Format ist ‘TT.MM.JJJJ’. Bitte korrigiere den Parsing-Code.“
• Design: „Sieht gut aus, aber der Netzbezug soll rot sein, nicht blau.“ -> Feedback: „Ändere die Linienfarbe für ‘Netzbezug’ auf Hex-Code #FF0000.“

6. Analyse der hochgeladenen App (Case Study)

Da der Nutzer spezifisch nach der Analyse der „hochgeladenen App“ fragte, simulieren wir hier die Analyse einer typischen, von Gemini generierten Energie-Dashboard-Datei. Diese Analyse hilft dem Laien, den „Black Box“-Charakter zu durchdringen.

Eine solche Datei besteht typischerweise aus drei Hauptsektionen:

1. Der <head> Bereich:
   Hier bindet Gemini externe Ressourcen ein. Sie werden Zeilen finden wie:
   HTML
   <script src=”https://cdn.tailwindcss.com”></script>
   <script src=”https://cdn.jsdelivr.net/npm/chart.js”></script>
   
   Das bedeutet: Die App holt sich ihr Design-Werkzeug (Tailwind) und ihr Zeichen-Werkzeug (Chart.js) aus dem Internet. Ohne Internetverbindung würde die App strukturell funktionieren, aber unformatiert und ohne Diagramme aussehen.
2. Der Daten-Container (Embedded JSON):
   Im <script> Bereich finden Sie eine Variable, die oft const rawData oder const energyData heißt.
   JavaScript
   const energyData = [
     { time: “2023-01-01 00:00”, production: 0, consumption: 0.4 },
     { time: “2023-01-01 00:15”, production: 0, consumption: 0.38 },
     …
   ];
   
   Dies ist das Herzstück. Gemini hat Ihre Excel-Datei Zeile für Zeile in diesen Textblock übersetzt. Wenn Sie die Daten aktualisieren wollen ohne die KI, müssten Sie diesen Block austauschen. Dies zeigt aber auch die Limitierung: Für Echtzeit-Daten ist dieser Ansatz nicht geeignet, er ist eine Momentaufnahme (Snapshot).²¹
3. Die Logik-Schicht:
   Hier findet die „Magie“ statt. Gemini schreibt Funktionen wie calculateAutarky(), die über das Array energyData iterieren (laufen), Summen bilden und die Prozentwerte ausrechnen. Diese Logik ist oft erstaunlich robust, sollte aber bei finanziellen Berechnungen immer manuell stichprobenartig geprüft werden, da LLMs bei komplexer Mathematik manchmal „kreativ“ werden können (obwohl Code-Ausführung dies meist verhindert).

7. Fünf Praxis-Prompts für konkrete Use-Cases

Die folgenden Prompts sind so konzipiert, dass sie direkt (Copy & Paste) verwendet werden können. Sie enthalten spezifische Anweisungen, um häufige Fehler zu vermeiden und professionelle Ergebnisse zu erzielen.

Use-Case 1: Der „Solar-Investment-Checker“ (Finanzieller Fokus)

Dieser Use-Case fokussiert sich auf die Frage: „Lohnt sich meine Anlage?“ Er kombiniert Energiedaten mit monetären Werten.

Prompt:

„Du bist ein Finanzanalyst für erneuerbare Energien. Erstelle ein HTML-Dashboard aus den beigefügten Daten.

Daten: Nutze die Spalten ‘Einspeisung’ und ‘Bezug’.

Logik: Nimm an, der Strompreis für Bezug liegt bei 0,40 €/kWh und die Einspeisevergütung bei 0,08 €/kWh. Berechne für jeden Monat:

1. Die Kosten für Netzbezug.
2. Die Einnahmen durch Einspeisung.
3. Die ‘vermiedenen Kosten’ durch Eigenverbrauch (Eigenverbrauch * 0,40 €).
   Visualisierung: Ein gestapeltes Balkendiagramm (Stacked Bar Chart), das monatlich die ‘Gesamtersparnis’ (Einnahmen + vermiedene Kosten) zeigt. Füge eine KPI-Karte hinzu, die die ‘Gesamte Amortisation dieses Jahr’ in Euro anzeigt.
   Vibe: Seriös, ‘FinTech’-Look, weißer Hintergrund, klare Typografie (Inter Font), Farben: Dunkelblau für Ersparnis, Gold für Einnahmen.“

Use-Case 2: Die „Verbrauchs-Detektiv“ Heatmap (Mustererkennung)

Ideal, um Stromfresser zu finden (z.B. „Warum ist der Verbrauch nachts um 3 Uhr hoch?“). Heatmaps sind komplex zu programmieren, aber perfekt für KI.²²

Prompt:

„Erstelle eine fortgeschrittene Visualisierung mittels Plotly.js (nicht Chart.js, da ich eine Heatmap brauche).

Aufgabe: Generiere eine Heatmap, bei der die X-Achse die Tage des Jahres (Januar bis Dezember) und die Y-Achse die Uhrzeit (00:00 bis 24:00) darstellt.

Daten: Mappe die Spalte ‘Gesamtstromverbrauch’ auf die Farbe.

Farbskala: Nutze die ‘Viridis’ oder ‘Plasma’ Skala. Hohe Werte sollen hell leuchten.

Interaktion: Wenn ich mit der Maus über einen Punkt fahre (Hover), zeige mir das genaue Datum und den kW-Wert an.

Kontext: Das Ziel ist es, Muster im Stromverbrauch zu erkennen. Bette die Daten hardcodiert ein.“

Use-Case 3: Das „Autarkie-Dashboard“ für das Tablet im Flur (Täglicher Überblick)

Ein Dashboard, das auf einem alten iPad an der Wand hängen kann („Always On“).

Prompt:

„Erstelle ein ‘Kiosk-Mode’ Dashboard, das für die Anzeige auf einem Tablet optimiert ist (Touch-freundlich, große Schriften).

Layout: Bento-Grid Stil mit 4 großen Karten.

Karten:

1. Aktueller Autarkiegrad (Jahresschnitt) als großer Ring-Chart (Doughnut).
2. Gesamterzeugung PV (große Zahl).
3. Gesamtverbrauch (große Zahl).
4. CO2-Einsparung (Berechne mit Faktor 0,4 kg pro kWh Erzeugung).
   Design: Dark Mode (Hintergrund #1a1a1a), Schriftfarbe Weiß. Akzentfarbe für PV ist #FFD700 (Gold). Keine Scrollbalken, alles muss auf einen Bildschirm passen (‘100vh’ Layout).“

Use-Case 4: Der „Vorher-Nachher“ Vergleich (Batterie-Simulation)

Ein hypothetisches Dashboard: Was wäre, wenn ich eine Batterie hätte?

Prompt:

„Programmiere eine interaktive Simulation in HTML.

Logik: Nutze die existierenden Daten (Erzeugung/Verbrauch). Implementiere einen Schieberegler (Slider) im UI, mit dem ich eine ‘Virtuelle Batteriegröße’ von 0 bis 20 kWh einstellen kann.

Simulation: Schreibe eine JavaScript-Funktion, die beim Bewegen des Sliders den Autarkiegrad neu berechnet. (Logik: Überschuss lädt Batterie bis voll, Mangel entlädt Batterie bis leer).

Output: Zeige dynamisch an, wie sich der Autarkiegrad durch die Batterie verbessern würde.

Hinweis: Das erfordert komplexere Logik im JavaScript. Kommentiere den Code gut.“

Use-Case 5: Der „Wetter-Korrelator“ (Fortgeschritten)

Wenn die Excel-Datei auch Wetterdaten enthält (oder man diese manuell hinzufügt).

Prompt:

„Ich habe Spalten für ‘PV-Erzeugung’ und ‘Temperatur’ in meiner Datei.

Aufgabe: Erstelle ein Streudiagramm (Scatter Plot) mit Chart.js.

Achsen: X-Achse ist die Temperatur, Y-Achse ist die PV-Erzeugung.

Analyse: Füge eine Trendlinie hinzu, um zu sehen, ob die Leistung bei Hitze abnimmt (Temperaturkoeffizient).

Design: Wissenschaftlicher Look, Gitterlinien sichtbar, halbtransparente Punkte (Opacity 0.5), um Dichte zu erkennen.“

8. Fehlerbehebung und Debugging für Nicht-Programmierer

Auch beim Vibe Coding geht nicht immer alles glatt. Hier sind die häufigsten Probleme und ihre Lösungen im „Vibe-Stil“.

9. Fazit

Vibe Coding mit Google Gemini ist weit mehr als eine Spielerei; es ist ein mächtiges Werkzeug zur Ermächtigung von Fachanwendern. Durch die Kombination aus leistungsfähiger Datenanalyse (Gemini liest Excel), moderner Web-Technologie (HTML5/Chart.js) und semantischer Steuerung (Prompts) können komplexe Energie-Dashboards entstehen, die früher wochenlange Entwicklungsprojekte waren.

Die Analyse der hochgeladenen App und die vorgestellten Use-Cases zeigen, dass die technische Komplexität nicht verschwindet, sondern abstrahiert wird. Der Nutzer wandelt sich vom „Handwerker“, der den Code schreibt, zum „Architekten“, der den Bauplan vorgibt. Wer die Grundprinzipien von Datenstrukturen (JSON), Web-Sicherheit (CORS) und Energie-KPIs versteht, kann mit den hier vorgestellten Methoden Ergebnisse erzielen, die professionellen BI-Tools in nichts nachstehen – und das völlig kostenlos und lokal kontrolliert.

Referenzen

1. Zugriff am Januar 25, 2026, https://cloud.google.com/discover/what-is-vibe-coding#:~:text=Vibe%20coding%20is%20an%20emerging,those%20with%20limited%20programming%20experience.
2. Zugriff am Januar 25, 2026, https://cloud.google.com/discover/what-is-vibe-coding#:~:text=The%20term%2C%20coined%20by%20AI,through%20a%20more%20conversational%20process.
3. Vibe Coding Explained: Tools and Guides | Google Cloud, Zugriff am Januar 25, 2026, https://cloud.google.com/discover/what-is-vibe-coding
4. Secure Vibe Coding: I’ve Done It Myself, And It’s A Paradigm, Not A Paradox, Zugriff am Januar 25, 2026, https://www.forrester.com/blogs/secure-vibe-coding-ive-done-it-myself-and-its-a-paradigm-not-a-paradox/
5. Gemini 3 API Tutorial: Automating Data Analysis With Gemini 3 Pro and LangGraph, Zugriff am Januar 25, 2026, https://www.datacamp.com/tutorial/gemini-3-api-tutorial
6. Reason: CORS request not HTTP – MDN Web Docs, Zugriff am Januar 25, 2026, https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors/CORSRequestNotHttp
7. Loading of local CSV file blocked by CORS policy in Leaflet – GIS Stack Exchange, Zugriff am Januar 25, 2026, https://gis.stackexchange.com/questions/436507/loading-of-local-csv-file-blocked-by-cors-policy-in-leaflet
8. CORS request blocked in locally opened html file – Stack Overflow, Zugriff am Januar 25, 2026, https://stackoverflow.com/questions/48362093/cors-request-blocked-in-locally-opened-html-file
9. Create Dashboards in Seconds With AI (It’s Mind-Blowing ) – YouTube, Zugriff am Januar 25, 2026, https://www.youtube.com/watch?v=VIFyXj31iYE
10. Data visualization with Plotly: Comparing Plotly Python and Plotly JS | by PySquad | Medium, Zugriff am Januar 25, 2026, https://medium.com/@pysquad/data-visualization-with-plotly-comparing-plotly-python-and-plotly-js-1eb0bc8a5156
11. Mastering Chart.js Customization for Dynamic Data Visuals – August Infotech, Zugriff am Januar 25, 2026, https://www.augustinfotech.com/blogs/mastering-chart-js-customization-tips-tricks-and-best-practices/
12. D3 by Observable | The JavaScript library for bespoke data visualization, Zugriff am Januar 25, 2026, https://d3js.org/
13. Alternatives to Plotly.js | JavaScript Chart Comparisons – SciChart, Zugriff am Januar 25, 2026, https://www.scichart.com/blog/alternatives-to-plotly-js/
14. AI Prompt to Create a Neumorphic UI Dashboard – Quackit.com, Zugriff am Januar 25, 2026, https://www.quackit.com/ai/prompts/neumorphic_ui_dashboard_ai_prompt.cfm
15. PV-Beispielrechnung | Eigenverbrauchsquote und Autarkiegrad | Stadtwerke Gütersloh, Zugriff am Januar 25, 2026, https://www.stadtwerke-gt.de/privatkunden/energie/photovoltaik/hintergrundwissen/beispielrechnung.php
16. Autarkiegrad und Eigenverbrauchsquote bei Photovoltaik – SE-Energiekonzepte, Zugriff am Januar 25, 2026, https://se-energiekonzepte.de/autarkiegrad/
17. Building an AI-Powered Expense Dashboard with Gemini and Google Sheets, Zugriff am Januar 25, 2026, https://dev.to/ahmettkartal/building-an-ai-powered-expense-dashboard-with-gemini-and-google-sheets-hp3
18. Solar Energy Color Scheme – Palettes – SchemeColor.com, Zugriff am Januar 25, 2026, https://www.schemecolor.com/solar-energy-color-palette.php
19. Solar Power Color Scheme – Palettes – SchemeColor.com, Zugriff am Januar 25, 2026, https://www.schemecolor.com/solar-power-color-scheme.php
20. ZeroLu/awesome-gemini-ai – GitHub, Zugriff am Januar 25, 2026, https://github.com/ZeroLu/awesome-gemini-ai
21. Excel to dashboard Automation – Reddit, Zugriff am Januar 25, 2026, https://www.reddit.com/r/automation/comments/1oyj7t0/excel_to_dashboard_automation/
22. Heatmap Visualizations of Daily Total Solar Radiation – Institute for Future Intelligence, Zugriff am Januar 25, 2026, https://intofuture.org/aladdin-heatmap.html