För denna Prompt Tuesday #9 kombinerar vi finans och webbutveckling. Mitt i utdelningssäsongen, upptäck hur du använder Gemini AI för att omedelbart koda en modern dashboard i HTML, JavaScript och Tailwind CSS.
Att kombinera privatekonomi och webbutveckling är kärnan i Linkeums DNA. När vi går in i den berömda "utdelningssäsongen" (april, maj, juni) letar många investerare och utvecklare efter att skapa sina egna spårningsverktyg.
I detta test är målet att använda Gemini (Googles AI) för att från grunden generera Front-End-koden för en instrumentpanel (Dashboard) för utdelningar. Vi kräver att den använder enkla, universella tekniker utan tung konfiguration: ren HTML, native JavaScript (Vanilla JS), biblioteket Chart.js för grafen och Tailwind CSS för designen.
Prompten
För att AI:n ska generera en fil som är direkt användbar i en webbläsare måste man ge den en specifik roll, tvinga fram användningen av CDN-länkar för bibliotek och förse den med affärskontexten. Här är den exakta prompten som användes:
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.
Vad prompten syftade till att uppnå
Utmaningen med denna prompt var att förvandla en finansiell idé till ett visuellt och omedelbart testbart webbgränssnitt:
- Definiera en "Plug & Play" teknikstack: Genom att kräva HTML, native JS och CDN-länkar för Tailwind och Chart.js ser vi till att vi får kod som fungerar direkt med ett enkelt dubbelklick på filen, utan att behöva en komplex utvecklingsmiljö.
- Integrera Data Visualization: Den uttryckliga begäran om ett interaktivt diagram (Chart.js) tvingar AI:n att skriva den JavaScript-logik som krävs för att instansiera och konfigurera den visuella canvasen för de månatliga inkomsterna.
- Tvinga fram en art direction: Termerna "sleek dark mode aesthetic" och "high-end fintech apps" vägleder Gemini att föreslå en premiumdesign (skuggor, gradienter, mörka färger) anpassad för finans.
- Integrera affärslogik: Att inkludera en förloppsindikator mot ett årligt mål och specifika aktier (M6, Pepsico, TotalEnergies) ger en omedelbart relevant vy för en investerare.
Varför resultatet är intressant
Detta resultat visar kraften hos Gemini som en kodningsassistent. AI:n ställer inte bara upp HTML-taggar; den strukturerar sidan korrekt, importerar intelligent externa skript, skriver JavaScript-logiken för Chart.js och tillämpar Tailwind CSS-verktygsklasser för en estetisk och responsiv återgivning.
För en utvecklare eller projektskapare är detta en massiv tidsbesparing. Istället för att spendera timmar på att läsa dokumentationen för Chart.js och Tailwind för att strukturera en mockup, får du en gedigen och visuell grund på några sekunder, som bara behöver kopplas till riktiga data.
