В този Prompt Tuesday #9 съчетаваме финанси и уеб разработка. В разгара на сезона на дивидентите открийте как да използвате ИИ Gemini, за да кодирате незабавно модерен Dashboard в HTML, JavaScript и Tailwind CSS.
Комбинирането на лични финанси и уеб разработка е в основата на ДНК-то на Linkeum. Навлизайки в известния „сезон на дивидентите“ (април, май, юни), много инвеститори и разработчици се стремят да създадат свои собствени инструменти за проследяване.
В този тест целта е да се използва Gemini (ИИ на Google), за да се генерира от нулата Front-End кодът на табло (Dashboard) за дивиденти. Изискваме от него да използва прости, универсални технологии без тежка конфигурация: чист HTML, нативен JavaScript (Vanilla JS), библиотеката Chart.js за графиката и Tailwind CSS за дизайна.
Prompt-ът
За да може ИИ да генерира файл, който може да се използва директно в браузъра, трябва да му зададете конкретна роля, да наложите използването на CDN връзки за библиотеките и да предоставите бизнес контекст. Ето точния 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.
Какво целеше да постигне prompt-ът
Предизвикателството на този prompt беше да превърне финансова идея във визуален и незабавно тестваем уеб интерфейс:
- Дефиниране на "Plug & Play" технологичен стек: Изисквайки HTML, нативен JS и CDN връзки за Tailwind и Chart.js, ние гарантираме получаването на код, който работи веднага с просто двойно щракване върху файла, без да е необходима сложна среда за разработка.
- Интегриране на визуализация на данни (Data Visualization): Изричното искане за интерактивна графика (Chart.js) принуждава ИИ да напише необходимата JavaScript логика, за да инстанцира и конфигурира визуалното платно за месечните приходи.
- Налагане на артистична посока: Термините „sleek dark mode aesthetic“ и „high-end fintech apps“ насочват Gemini да предложи премиум дизайн (сенки, градиенти, тъмни цветове), подходящ за финанси.
- Интегриране на бизнес логика: Включването на лента за напредък към годишна цел и конкретни акции (M6, Pepsico, TotalEnergies) позволява незабавно релевантно изобразяване за инвеститора.
Защо резултатът е интересен
Този резултат демонстрира силата на Gemini като асистент по програмиране. ИИ не просто подрежда HTML тагове; той правилно структурира страницата, интелигентно импортира външните скриптове, пише JavaScript логиката на Chart.js и прилага помощните класове (utility classes) на Tailwind CSS за естетично и адаптивно (responsive) изобразяване.
За разработчик или създател на проект това е огромно спестяване на време. Вместо да прекарвате часове в четене на документацията на Chart.js и Tailwind, за да структурирате макет, за няколко секунди получавате солидна и визуална основа, която просто трябва да бъде свързана с реални данни.
