Voor deze Prompt Tuesday #9 combineren we financiën en webontwikkeling. Midden in het dividendseizoen, ontdek hoe u Gemini AI kunt gebruiken om direct een modern Dashboard in HTML, JavaScript en Tailwind CSS te coderen.
Het combineren van persoonlijke financiën en webontwikkeling is de kern van het DNA van Linkeum. Nu we het beroemde "dividendseizoen" (april, mei, juni) ingaan, zijn veel investeerders en ontwikkelaars op zoek naar mogelijkheden om hun eigen trackingtools te maken.
In deze test is het de bedoeling om Gemini (de AI van Google) te gebruiken om de Front-End code van een dividendendashboard van A tot Z te genereren. We leggen eenvoudige, universele technologieën op zonder zware configuratie: pure HTML, native JavaScript (Vanilla JS), de Chart.js bibliotheek voor de grafiek en Tailwind CSS voor het design.
De Prompt
Om ervoor te zorgen dat de AI een bestand genereert dat direct bruikbaar is in een browser, moet je hem een specifieke rol geven, het gebruik van CDN-links voor bibliotheken afdwingen en de zakelijke context bieden. Hier is de exacte prompt die is gebruikt:
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.
Wat de prompt wilde bereiken
De uitdaging van deze prompt was om een financieel idee om te zetten in een visuele en direct testbare webinterface:
- Een "Plug & Play" tech stack definiëren: Door HTML, native JS en CDN-links voor Tailwind en Chart.js te eisen, zorgen we ervoor dat we code krijgen die onmiddellijk werkt met een simpele dubbelklik op het bestand, zonder een complexe ontwikkelomgeving nodig te hebben.
- Datavisualisatie integreren: De expliciete vraag om een interactieve grafiek (Chart.js) dwingt de AI om de benodigde JavaScript-logica te schrijven om het visuele canvas voor de maandelijkse inkomsten te instantiëren en te configureren.
- Een artistieke richting afdwingen: De termen "sleek dark mode aesthetic" en "high-end fintech apps" sturen Gemini om een premium design (schaduwen, verlopen, donkere kleuren) voor te stellen dat geschikt is voor financiën.
- Bedrijfslogica integreren: Het opnemen van een voortgangsbalk naar een jaarlijks doel en specifieke aandelen (M6, Pepsico, TotalEnergies) zorgt voor een direct relevante weergave voor een investeerder.
Waarom het resultaat interessant is
Dit resultaat demonstreert de kracht van Gemini als programmeerassistent. De AI zet niet alleen HTML-tags op een rij; het structureert de pagina correct, importeert op slimme wijze externe scripts, schrijft de JavaScript-logica van de grafiek en past de Tailwind CSS-utilityklassen toe voor een esthetische en responsieve weergave.
Voor een ontwikkelaar of projectmaker is dit een enorme tijdsbesparing. In plaats van uren te besteden aan het lezen van de documentatie van Chart.js en Tailwind om een mockup te structureren, krijg je in een paar seconden een solide en visuele basis, die alleen nog maar hoeft te worden gekoppeld aan echte gegevens.
