V tomto Prompt Tuesday #9 spojujeme finance a vývoj webových aplikací. Uprostřed dividendové sezóny objevte, jak pomocí Gemini AI okamžitě nakódovat moderní dashboard v HTML, JavaScriptu a Tailwind CSS.
Spojení osobních financí a vývoje webových aplikací je jádrem DNA Linkeum. Jak vstupujeme do slavné „dividendové sezóny“ (duben, květen, červen), mnoho investorů a vývojářů se snaží vytvořit své vlastní sledovací nástroje.
V tomto testu je cílem použít Gemini (umělou inteligenci od Googlu) k vygenerování Front-End kódu pro dividendový řídicí panel (Dashboard) od nuly. Požadujeme od něj použití jednoduchých, univerzálních technologií bez složité konfigurace: čisté HTML, nativní JavaScript (Vanilla JS), knihovnu Chart.js pro graf a Tailwind CSS pro design.
Prompt
Aby AI vygenerovala soubor přímo použitelný v prohlížeči, musíte jí přidělit specifickou roli, vynutit použití odkazů CDN pro knihovny a poskytnout obchodní kontext. Zde je přesný použitý 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.
Čeho měl prompt dosáhnout
Výzvou tohoto promptu bylo přeměnit finanční nápad na vizuální a okamžitě testovatelné webové rozhraní:
- Definování technologie „Plug & Play“: Vyžadováním HTML, nativního JS a odkazů CDN pro Tailwind a Chart.js zajišťujeme, že získáme kód, který funguje okamžitě po pouhém dvojitém kliknutí na soubor, aniž bychom potřebovali složité vývojové prostředí.
- Integrace vizualizace dat (Data Visualization): Výslovná žádost o interaktivní graf (Chart.js) nutí AI napsat logiku JavaScriptu nezbytnou k vytvoření a konfiguraci vizuálního plátna pro měsíční příjem.
- Vynucení uměleckého směru: Termíny „sleek dark mode aesthetic“ a „high-end fintech apps“ navádějí Gemini k návrhu prémiového designu (stíny, přechody, tmavé barvy) vhodného pro finance.
- Integrace obchodní logiky: Zahrnutí ukazatele průběhu k ročnímu cíli a konkrétních akcií (M6, Pepsico, TotalEnergies) umožňuje získat pro investora okamžitě relevantní výsledek.
Proč je výsledek zajímavý
Tento výsledek demonstruje sílu Gemini jako asistenta pro kódování. AI nejenže srovná značky HTML; správně strukturuje stránku, inteligentně importuje externí skripty, píše logiku JavaScriptu pro Chart.js a aplikuje třídy nástrojů Tailwind CSS pro estetické a responzivní zobrazení.
Pro vývojáře nebo tvůrce projektu to představuje obrovskou úsporu času. Místo toho, abyste trávili hodiny čtením dokumentace Chart.js a Tailwind ke strukturování makety, získáte během několika sekund solidní a vizuální základ, který pak už stačí jen připojit ke skutečným datům.
