Für diesen Prompt Tuesday #9 kombinieren wir Finanzen und Webentwicklung. Entdecken Sie mitten in der Dividendensaison, wie Sie mit der Gemini-KI sofort ein modernes Dashboard in HTML, JavaScript und Tailwind CSS programmieren können.
Die Verbindung von persönlichen Finanzen und Webentwicklung ist der Kern der DNA von Linkeum. Während wir in die berühmte "Dividendensaison" (April, Mai, Juni) eintreten, möchten viele Investoren und Entwickler ihre eigenen Tracking-Tools erstellen.
In diesem Test ist es das Ziel, Gemini (die KI von Google) zu verwenden, um den Front-End-Code für ein Dividenden-Dashboard von Grund auf neu zu generieren. Wir verlangen die Verwendung einfacher, universeller Technologien ohne aufwändige Konfiguration: reines HTML, natives JavaScript (Vanilla JS), die Chart.js-Bibliothek für das Diagramm und Tailwind CSS für das Design.
Der Prompt
Damit die KI eine Datei generiert, die direkt in einem Browser verwendet werden kann, muss man ihr eine bestimmte Rolle zuweisen, die Verwendung von CDN-Links für Bibliotheken erzwingen und den geschäftlichen Kontext bereitstellen. Hier ist der genaue verwendete Prompt:
Act as an expert Front-End Developer. Write a modern, responsive single-page HTML file for a "Dividend Tracking Dashboard" using Tailwind CSS (via CDN) and vanilla JavaScript. Include a chart using Chart.js (via CDN) to visualize monthly dividend income. The UI should have a sleek dark mode aesthetic. Include a main card showing the total yearly dividend goal with a progress bar. Below that, display a neat list or grid of recent dividend payouts using mock data for the following stocks: M6 Metropole, Pepsico, and TotalEnergies. Make the design look premium, similar to high-end fintech apps. Output the complete, functional code so I can copy-paste it directly into an index.html file.
Was der Prompt erreichen sollte
Die Herausforderung dieses Prompts bestand darin, eine Finanzidee in eine visuelle und sofort testbare Web-Oberfläche zu verwandeln:
- Definition eines "Plug & Play"-Tech-Stacks: Indem wir HTML, natives JS und CDN-Links für Tailwind und Chart.js fordern, stellen wir sicher, dass wir Code erhalten, der sofort durch einen einfachen Doppelklick auf die Datei funktioniert, ohne dass eine komplexe Entwicklungsumgebung erforderlich ist.
- Integration von Datenvisualisierung: Die ausdrückliche Bitte um ein interaktives Diagramm (Chart.js) zwingt die KI, die notwendige JavaScript-Logik zu schreiben, um den visuellen Canvas für das monatliche Einkommen zu instanziieren und zu konfigurieren.
- Vorgabe einer künstlerischen Ausrichtung: Die Begriffe "sleek dark mode aesthetic" und "high-end fintech apps" leiten Gemini an, ein Premium-Design (Schatten, Farbverläufe, dunkle Farben) vorzuschlagen, das für den Finanzbereich geeignet ist.
- Integration der Geschäftslogik: Die Einbeziehung eines Fortschrittsbalkens in Richtung eines Jahresziels und bestimmter Aktien (M6, Pepsico, TotalEnergies) ermöglicht eine für einen Investor sofort relevante Darstellung.
Warum das Ergebnis interessant ist
Dieses Ergebnis zeigt die Leistungsfähigkeit von Gemini als Programmierassistent. Die KI reiht nicht nur HTML-Tags aneinander; sie strukturiert die Seite richtig, importiert auf intelligente Weise externe Skripte, schreibt die JavaScript-Logik von Chart.js und wendet Tailwind CSS-Dienstprogrammklassen für ein ästhetisches und responsives Rendering an.
Für einen Entwickler oder Projektgründer ist dies eine massive Zeitersparnis. Anstatt stundenlang die Dokumentation von Chart.js und Tailwind zu lesen, um ein Mockup zu strukturieren, erhalten Sie in Sekundenschnelle eine solide und visuelle Grundlage, die nur noch mit realen Daten verbunden werden muss.
