Ebben a Prompt Tuesday #9-ben a pénzügyeket és a webfejlesztést ötvözzük. Az osztalékszezon kellős közepén fedezze fel, hogyan használhatja a Gemini AI-t egy modern Dashboard azonnali kódolására HTML, JavaScript és Tailwind CSS használatával.
A személyes pénzügyek és a webfejlesztés ötvözése a Linkeum DNS-ének magja. Ahogy belépünk a híres "osztalékszezonba" (április, május, június), sok befektető és fejlesztő szeretné létrehozni saját nyomon követési eszközeit.
Ebben a tesztben a cél a Gemini (a Google AI) használata egy osztalék dashboard (irányítópult) Front-End kódjának a nulláról történő generálására. Egyszerű, univerzális technológiák használatát írjuk elő számára, nehézkes konfiguráció nélkül: tiszta HTML, natív JavaScript (Vanilla JS), a Chart.js könyvtár a grafikonhoz, és Tailwind CSS a dizájnhoz.
A Prompt
Ahhoz, hogy az AI egy böngészőben közvetlenül használható fájlt generáljon, konkrét szerepet kell adni neki, ki kell kényszeríteni a könyvtárak CDN linkjeinek használatát, és meg kell adni az üzleti kontextust. Íme a pontosan használt prompt:
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.
Mit akart elérni a prompt
A prompt kihívása az volt, hogy egy pénzügyi ötletet egy vizuális és azonnal tesztelhető webes felületté alakítson:
- Egy "Plug & Play" technológiai stack meghatározása: A HTML, a natív JS, valamint a Tailwind és a Chart.js CDN linkjeinek megkövetelésével biztosítjuk, hogy olyan kódot kapjunk, amely egy egyszerű dupla kattintással azonnal működik, anélkül, hogy bonyolult fejlesztői környezetre lenne szükség.
- Adatvizualizáció integrálása (Data Visualization): Az interaktív grafikon (Chart.js) kifejezett kérése arra kényszeríti az AI-t, hogy megírja a havi bevételek vizuális vásznának példányosításához és konfigurálásához szükséges JavaScript logikát.
- Művészeti irány megszabása: A "sleek dark mode aesthetic" és a "high-end fintech apps" kifejezések arra irányítják a Geminit, hogy a pénzügyekhez illő, prémium dizájnt (árnyékok, színátmenetek, sötét színek) javasoljon.
- Üzleti logika integrálása: Az éves célhoz vezető folyamatjelző sáv és bizonyos részvények (M6, Pepsico, TotalEnergies) szerepeltetése lehetővé teszi, hogy egy befektető számára azonnal releváns megjelenítést kapjunk.
Miért érdekes az eredmény
Ez az eredmény demonstrálja a Gemini, mint programozási asszisztens erejét. Az AI nem csupán HTML címkéket sorakoztat fel; helyesen strukturálja az oldalt, intelligensen importálja a külső szkripteket, megírja a Chart.js JavaScript logikáját, és alkalmazza a Tailwind CSS segédosztályait az esztétikus és reszponzív megjelenítés érdekében.
Egy fejlesztő vagy projektgazda számára ez hatalmas időmegtakarítást jelent. Ahelyett, hogy órákat töltene a Chart.js és a Tailwind dokumentációjának olvasásával egy makett felépítéséhez, másodpercek alatt egy szilárd és vizuális alapot kap, amelyet már csak a valós adatokhoz kell csatlakoztatni.
