Untuk Prompt Tuesday #9 ini, kami menggabungkan keuangan dan pengembangan web. Di tengah musim dividen, temukan cara menggunakan AI Gemini untuk mengkode Dashboard modern secara instan dalam HTML, JavaScript, dan Tailwind CSS.
Menggabungkan keuangan pribadi dan pengembangan web adalah inti dari DNA Linkeum. Saat kita memasuki "musim dividen" yang terkenal (April, Mei, Juni), banyak investor dan pengembang ingin membuat alat pelacakan mereka sendiri.
Dalam pengujian ini, tujuannya adalah menggunakan Gemini (AI dari Google) untuk menghasilkan kode Front-End lengkap dari awal untuk dasbor (Dashboard) dividen. Kami mewajibkannya untuk menggunakan teknologi sederhana, universal, dan tanpa konfigurasi berat: HTML murni, JavaScript asli (Vanilla JS), pustaka Chart.js untuk grafik, dan Tailwind CSS untuk desain.
Prompt
Agar AI menghasilkan file yang dapat langsung digunakan di browser, Anda harus memberikan peran tertentu, memaksakan penggunaan tautan CDN untuk pustaka, dan menyediakan konteks bisnis. Berikut adalah prompt persis yang digunakan:
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.
Apa yang ingin dicapai oleh prompt ini
Tantangan dari prompt ini adalah mengubah ide keuangan menjadi antarmuka web visual yang dapat langsung diuji:
- Tentukan tumpukan teknologi "Plug & Play": Dengan mewajibkan HTML, JS asli, dan tautan CDN untuk Tailwind serta Chart.js, kami memastikan bahwa kode yang dihasilkan akan langsung berfungsi hanya dengan mengklik ganda file tersebut, tanpa memerlukan lingkungan pengembangan yang kompleks.
- Integrasi Visualisasi Data: Permintaan eksplisit untuk grafik interaktif (Chart.js) memaksa AI untuk menulis logika JavaScript yang diperlukan guna membuat dan mengonfigurasi kanvas visual untuk pendapatan bulanan.
- Tentukan arahan seni: Istilah "sleek dark mode aesthetic" dan "high-end fintech apps" memandu Gemini untuk mengusulkan desain premium (bayangan, gradien, warna gelap) yang disesuaikan untuk keuangan.
- Integrasi logika bisnis: Menyertakan bilah kemajuan menuju tujuan tahunan dan saham tertentu (M6, Pepsico, TotalEnergies) memungkinkan tampilan yang segera relevan bagi seorang investor.
Mengapa hasilnya menarik
Hasil ini menunjukkan kekuatan Gemini sebagai asisten pengkodean. AI tidak sekadar menyejajarkan tag HTML; ia menyusun halaman dengan benar, mengimpor skrip eksternal dengan cerdas, menulis logika JavaScript untuk grafik, dan menerapkan kelas utilitas Tailwind CSS untuk rendering yang estetis dan responsif.
Bagi seorang pengembang atau pembuat proyek, ini merupakan penghematan waktu yang sangat besar. Alih-alih menghabiskan waktu berjam-jam membaca dokumentasi Chart.js dan Tailwind untuk menyusun maket, Anda mendapatkan fondasi yang solid dan visual dalam hitungan detik, yang hanya perlu dihubungkan ke data nyata.
