Створіть дашборд дивідендів HTML/JS за допомогою Gemini

У цьому Prompt Tuesday #9 ми поєднуємо фінанси та веб-розробку. У розпал сезону дивідендів дізнайтеся, як використовувати ШІ Gemini для миттєвого написання сучасного дашборду в 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 і застосовує утилітарні класи Tailwind CSS для естетичного та адаптивного (responsive) відображення.

Для розробника або творця проекту це величезна економія часу. Замість того, щоб годинами читати документацію Chart.js і Tailwind для структурування макету, ви за кілька секунд отримуєте міцну та візуальну основу, яку залишається лише підключити до реальних даних.