Per questo Prompt Tuesday #9, uniamo finanza e sviluppo web. Nel pieno della stagione dei dividendi, scopri come usare l'IA Gemini per codificare all'istante una Dashboard moderna in HTML, JavaScript e Tailwind CSS.
Unire la finanza personale e lo sviluppo web è il cuore del DNA di Linkeum. Mentre entriamo nella famosa "stagione dei dividendi" (aprile, maggio, giugno), molti investitori e sviluppatori cercano di creare i propri strumenti di monitoraggio.
In questo test, l'obiettivo è utilizzare Gemini (l'IA di Google) per generare da zero il codice Front-End di una dashboard dei dividendi. Le imponiamo tecnologie semplici, universali e senza configurazioni pesanti: puro HTML, JavaScript nativo (Vanilla JS), la libreria Chart.js per il grafico e Tailwind CSS per il design.
Il Prompt
Affinché l'IA generi un file direttamente utilizzabile in un browser, è necessario assegnarle un ruolo specifico, imporre l'uso di link CDN per le librerie e fornirle il contesto aziendale. Ecco il prompt esatto utilizzato:
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.
Cosa mirava a ottenere il prompt
La sfida di questo prompt era trasformare un'idea finanziaria in un'interfaccia web visiva e immediatamente testabile:
- Definire uno stack tecnologico "Plug & Play": Richiedendo HTML, JS nativo e link CDN per Tailwind e Chart.js, ci assicuriamo di ottenere un codice che funziona immediatamente con un semplice doppio clic sul file, senza bisogno di un ambiente di sviluppo complesso.
- Integrare la Data Visualization: La richiesta esplicita di un grafico interattivo (Chart.js) costringe l'IA a scrivere la logica JavaScript necessaria per istanziare e configurare il canvas visivo per le entrate mensili.
- Imporre una direzione artistica: I termini "sleek dark mode aesthetic" e "high-end fintech apps" guidano Gemini a proporre un design premium (ombre, gradienti, colori scuri) adatto alla finanza.
- Integrare la logica di business: Includere una barra di avanzamento verso un obiettivo annuale e azioni specifiche (M6, Pepsico, TotalEnergies) consente di avere una resa immediatamente rilevante per un investitore.
Perché il risultato è interessante
Questo risultato dimostra la potenza di Gemini come assistente alla programmazione. L'IA non si limita ad allineare i tag HTML; struttura correttamente la pagina, importa in modo intelligente gli script esterni, scrive la logica JavaScript di Chart.js e applica le classi di utilità Tailwind CSS per una resa estetica e responsive.
Per uno sviluppatore o un creatore di progetti, questo è un enorme risparmio di tempo. Invece di passare ore a leggere la documentazione di Chart.js e Tailwind per strutturare un mockup, ottieni una base solida e visiva in pochi secondi, che deve solo essere collegata a dati reali.
