Til denne Prompt Tuesday #9 kombinerer vi finans og webudvikling. Midt i udbyttesæsonen kan du opdage, hvordan du bruger Gemini AI til øjeblikkeligt at kode et moderne Dashboard i HTML, JavaScript og Tailwind CSS.
At kombinere privatøkonomi og webudvikling er kernen i Linkeums DNA. Når vi går ind i den berømte "udbyttesæson" (april, maj, juni), søger mange investorer og udviklere at skabe deres egne sporingsværktøjer.
I denne test er målet at bruge Gemini (Googles AI) til at generere Front-End-koden til et udbytte-dashboard fra bunden. Vi kræver, at den bruger enkle, universelle teknologier uden tung konfiguration: ren HTML, indbygget JavaScript (Vanilla JS), Chart.js-biblioteket til grafen og Tailwind CSS til designet.
Prompten
For at AI'en kan generere en fil, der kan bruges direkte i en browser, skal du give den en specifik rolle, gennemtvinge brugen af CDN-links til biblioteker og levere forretningskonteksten. Her er den nøjagtige prompt, der blev brugt:
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.
Hvad prompten havde til formål at opnå
Udfordringen ved denne prompt var at omdanne en finansiel idé til en visuel og øjeblikkeligt testbar webgrænseflade:
- Definer en "Plug & Play" tech-stack: Ved at kræve HTML, native JS og CDN-links til Tailwind og Chart.js sikrer vi, at vi får kode, der virker med det samme med et simpelt dobbeltklik på filen, uden at have brug for et komplekst udviklingsmiljø.
- Integrer datavisualisering (Data Visualization): Den eksplicitte anmodning om en interaktiv graf (Chart.js) tvinger AI'en til at skrive den JavaScript-logik, der er nødvendig for at instantiere og konfigurere det visuelle lærred for den månedlige indkomst.
- Gennemtving en kunstnerisk retning: Termerne "sleek dark mode aesthetic" og "high-end fintech apps" guider Gemini til at foreslå et premium-design (skygger, gradienter, mørke farver) tilpasset til finans.
- Integrer forretningslogik: Inkluderingen af en statuslinje mod et årligt mål og specifikke aktier (M6, Pepsico, TotalEnergies) giver mulighed for en øjeblikkeligt relevant visning for en investor.
Hvorfor resultatet er interessant
Dette resultat demonstrerer Geminis kraft som en kodningsassistent. AI'en opstiller ikke bare HTML-tags; den strukturerer siden korrekt, importerer intelligent eksterne scripts, skriver JavaScript-logikken for Chart.js og anvender Tailwind CSS-hjælpeklasser til en æstetisk og responsiv gengivelse.
For en udvikler eller projektskaber er dette en massiv tidsbesparelse. I stedet for at bruge timer på at læse dokumentationen til Chart.js og Tailwind for at strukturere en mockup, får du et solidt og visuelt fundament på få sekunder, som blot skal forbindes til rigtige data.
