در این Prompt Tuesday #9، ما امور مالی و توسعه وب را ترکیب میکنیم. در اواسط فصل سود سهام، کشف کنید که چگونه از هوش مصنوعی Gemini برای کدنویسی فوری یک داشبورد مدرن در HTML، JavaScript و Tailwind CSS استفاده کنید.
ترکیب امور مالی شخصی و توسعه وب هسته اصلی DNA سایت Linkeum است. با ورود به "فصل سود سهام" معروف (آوریل، می، ژوئن)، بسیاری از سرمایهگذاران و توسعهدهندگان به دنبال ایجاد ابزارهای ردیابی خاص خود هستند.
در این آزمایش، هدف استفاده از Gemini (هوش مصنوعی گوگل) برای تولید صفر تا صد کد Front-End یک داشبورد سود سهام است. ما از آن میخواهیم که از فناوریهای ساده، جهانی و بدون پیکربندی سنگین استفاده کند: HTML خالص، جاوا اسکریپت بومی (Vanilla JS)، کتابخانه Chart.js برای نمودار و Tailwind CSS برای طراحی.
پرامپت (The Prompt)
برای اینکه هوش مصنوعی فایلی تولید کند که مستقیماً در مرورگر قابل استفاده باشد، باید به آن یک نقش خاص بدهید، استفاده از لینکهای CDN برای کتابخانهها را تحمیل کنید و زمینه کسبوکار را ارائه دهید. در اینجا پرامپت دقیقی که استفاده شده است آورده شده است:
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.
هدف این پرامپت چه بود
چالش این پرامپت تبدیل یک ایده مالی به یک رابط وب بصری و فوراً قابل آزمایش بود:
- تعریف یک پشته فناوری "Plug & Play": با درخواست HTML، JS بومی و لینکهای CDN برای Tailwind و Chart.js، اطمینان حاصل میکنیم که کدی به دست میآوریم که بلافاصله با یک دوبار کلیک ساده روی فایل کار میکند، بدون اینکه نیازی به محیط توسعه پیچیدهای باشد.
- ادغام تصویرسازی دادهها: درخواست صریح برای یک نمودار تعاملی (Chart.js) هوش مصنوعی را مجبور میکند منطق جاوا اسکریپت لازم برای نمونهسازی و پیکربندی بوم بصری درآمدهای ماهانه را بنویسد.
- تحمیل یک جهت هنری: اصطلاحات "sleek dark mode aesthetic" و "high-end fintech apps" هوش مصنوعی Gemini را راهنمایی میکنند تا طراحی برتر (سایهها، شیبها، رنگهای تیره) متناسب با امور مالی را پیشنهاد دهد.
- ادغام منطق کسبوکار: گنجاندن نوار پیشرفت به سمت یک هدف سالانه و سهام خاص (M6، Pepsico، TotalEnergies) امکان ارائه فوری مرتبط برای یک سرمایهگذار را فراهم میکند.
چرا نتیجه جالب است
این نتیجه قدرت Gemini را به عنوان یک دستیار برنامهنویسی نشان میدهد. هوش مصنوعی فقط تگهای HTML را کنار هم قرار نمیدهد؛ بلکه ساختار صفحه را به درستی شکل میدهد، اسکریپتهای خارجی را هوشمندانه وارد میکند، منطق جاوا اسکریپت Chart.js را مینویسد و کلاسهای کاربردی Tailwind CSS را برای ارائهای زیباییشناختی و واکنشگرا اعمال میکند.
برای یک توسعهدهنده یا خالق پروژه، این باعث صرفهجویی عظیمی در زمان میشود. به جای ساعتها مطالعه مستندات Chart.js و Tailwind برای ساختاردهی یک مدل، در چند ثانیه یک پایه محکم و بصری به دست میآورید که تنها نیاز به اتصال به دادههای واقعی دارد.
