W tym Prompt Tuesday #9 łączymy finanse i rozwój stron internetowych. W samym środku sezonu dywidendowego odkryj, jak użyć Gemini AI do natychmiastowego zakodowania nowoczesnego Dashboardu w HTML, JavaScript i Tailwind CSS.
Połączenie finansów osobistych i tworzenia stron internetowych to serce DNA Linkeum. Wkraczając w słynny "sezon dywidendowy" (kwiecień, maj, czerwiec), wielu inwestorów i programistów szuka możliwości stworzenia własnych narzędzi do śledzenia.
W tym teście naszym celem jest wykorzystanie Gemini (sztucznej inteligencji od Google) do wygenerowania od podstaw kodu Front-End dla pulpitu nawigacyjnego (Dashboardu) dywidend. Wymagamy od niego użycia prostych, uniwersalnych technologii bez ciężkiej konfiguracji: czystego HTML, natywnego JavaScript (Vanilla JS), biblioteki Chart.js dla wykresu oraz Tailwind CSS do stylizacji.
Prompt
Aby sztuczna inteligencja wygenerowała plik nadający się bezpośrednio do użycia w przeglądarce, musisz nadać jej określoną rolę, wymusić użycie linków CDN dla bibliotek i dostarczyć kontekst biznesowy. Oto dokładny prompt, którego użyliśmy:
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.
Co prompt miał osiągnąć
Wyzwanie tego promptu polegało na przekształceniu pomysłu finansowego w wizualny i natychmiast testowalny interfejs internetowy:
- Zdefiniowanie stosu technologicznego "Plug & Play": Wymagając HTML, natywnego JS oraz linków CDN dla Tailwind i Chart.js, upewniamy się, że uzyskamy kod, który działa natychmiast po zwykłym dwukrotnym kliknięciu pliku, bez konieczności posiadania złożonego środowiska programistycznego.
- Integracja Wizualizacji Danych: Wyraźna prośba o interaktywny wykres (Chart.js) zmusza sztuczną inteligencję do napisania logiki JavaScript niezbędnej do zainicjowania i skonfigurowania wizualnego obszaru roboczego dla miesięcznych dochodów.
- Narzucenie kierunku artystycznego: Określenia "sleek dark mode aesthetic" i "high-end fintech apps" kierują Gemini w stronę propozycji projektów premium (cienie, gradienty, ciemne kolory) dostosowanych do branży finansowej.
- Integracja logiki biznesowej: Dołączenie paska postępu do rocznego celu oraz konkretnych akcji (M6, Pepsico, TotalEnergies) zapewnia renderowanie natychmiastowo adekwatne dla inwestora.
Dlaczego wynik jest interesujący
Ten wynik demonstruje moc Gemini jako asystenta programowania. Sztuczna inteligencja nie tylko układa tagi HTML; prawidłowo strukturyzuje stronę, inteligentnie importuje zewnętrzne skrypty, pisze logikę JavaScript dla Chart.js i stosuje klasy użytkowe Tailwind CSS w celu uzyskania estetycznego i responsywnego renderowania.
Dla programisty lub twórcy projektu jest to ogromna oszczędność czasu. Zamiast spędzać godziny na czytaniu dokumentacji Chart.js i Tailwind w celu ustrukturyzowania makiety, w ciągu kilku sekund zyskujesz solidną i wizualną podstawę, którą wystarczy jedynie podłączyć do prawdziwych danych.
