Pour ce Prompt Tuesday #9, nous combinons la finance et le développement web. En pleine saison des dividendes, découvrez comment utiliser l'IA Gemini pour coder instantanément un Dashboard moderne en HTML, JavaScript et Tailwind CSS.
Allier la finance personnelle et le développement web est le cœur de l'ADN de Linkeum. Alors que nous entrons dans la fameuse "saison des dividendes" (avril, mai, juin), de nombreux investisseurs et développeurs cherchent à créer leurs propres outils de suivi.
Dans ce test, l'objectif est d'utiliser Gemini (l'IA de Google) pour générer de A à Z le code Front-End d'un tableau de bord (Dashboard) de dividendes. Nous lui imposons des technologies simples, universelles et sans configuration lourde : du HTML pur, du JavaScript natif (Vanilla JS), la librairie Chart.js pour le graphique et Tailwind CSS pour le design.
Le Prompt
Pour que l'IA génère un fichier directement utilisable dans un navigateur, il faut lui donner un rôle précis, lui imposer l'utilisation de liens CDN pour les librairies, et lui fournir le contexte métier. Voici le prompt exact utilisé :
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.
Ce que le prompt visait à accomplir
L'enjeu de ce prompt était de transformer une idée financière en une interface web visuelle et instantanément testable :
- Définir une stack technique "Plug & Play" : En exigeant du HTML, du JS natif et des liens CDN pour Tailwind et Chart.js, on s'assure d'obtenir un code qui fonctionne immédiatement avec un simple double-clic sur le fichier, sans nécessiter d'environnement de développement complexe.
- Intégrer de la Data Visualization : La demande explicite d'un graphique interactif (Chart.js) oblige l'IA à écrire la logique JavaScript nécessaire pour instancier et configurer le canvas visuel des revenus mensuels.
- Imposer une direction artistique : Les termes "sleek dark mode aesthetic" et "high-end fintech apps" guident Gemini pour qu'il propose un design premium (ombres, dégradés, couleurs sombres) adapté à la finance.
- Intégrer de la logique métier : Inclure une barre de progression vers un objectif annuel et des actions spécifiques (M6, Pepsico, TotalEnergies) permet d'avoir un rendu immédiatement pertinent pour un investisseur.
Pourquoi le résultat est intéressant
Ce résultat démontre la puissance de Gemini en tant qu'assistant de programmation. L'IA ne se contente pas d'aligner des balises HTML ; elle structure correctement la page, importe intelligemment les scripts externes, écrit la logique JavaScript du graphique et applique les classes utilitaires de Tailwind CSS pour un rendu esthétique et responsive.
Pour un développeur ou un porteur de projet, c'est un gain de temps massif. Au lieu de passer des heures à lire les documentations de Chart.js et Tailwind pour structurer une maquette, vous obtenez une base solide et visuelle en quelques secondes, qu'il ne reste plus qu'à connecter à de vraies données.
