今回のPrompt Tuesday #9では、金融とWeb開発を組み合わせます。配当シーズンの真っ只中に、Gemini AIを使用してHTML、JavaScript、Tailwind CSSでモダンなダッシュボードを瞬時にコーディングする方法を発見してください。
個人の金融とWeb開発を組み合わせることは、LinkeumのDNAの核心です。有名な「配当シーズン」（4月、5月、6月）に入り、多くの投資家や開発者が独自の追跡ツールを作成しようとしています。
このテストでは、Gemini（GoogleのAI）を使用して、配当ダッシュボードのフロントエンドコードを最初から生成することを目的としています。純粋なHTML、ネイティブJavaScript（Vanilla JS）、グラフ用のChart.jsライブラリ、デザイン用のTailwind CSSなど、重い設定が不要でシンプルかつ普遍的なテクノロジーを使用するように指示しています。
プロンプト (The Prompt)
AIがブラウザで直接使用できるファイルを生成するようにするには、特定の役割を与え、ライブラリの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.
このプロンプトが目指したもの
このプロンプトの課題は、金融のアイデアを視覚的ですぐにテスト可能なWebインターフェースに変換することでした。
- 「プラグアンドプレイ」技術スタックの定義： HTML、ネイティブJS、およびTailwindとChart.jsのCDNリンクを要求することで、複雑な開発環境を必要とせず、ファイルをダブルクリックするだけですぐに機能するコードを確実に取得できます。
- データ視覚化の統合： インタラクティブなグラフ（Chart.js）を明示的に要求することで、AIは月収の視覚的キャンバスをインスタンス化して構成するために必要なJavaScriptロジックを作成せざるを得なくなります。
- アートディレクションの強制： 「sleek dark mode aesthetic」や「high-end fintech apps」などの用語は、金融に適したプレミアムなデザイン（影、グラデーション、暗い色）を提案するようにGeminiを導きます。
- ビジネスロジックの統合： 年間目標に向けたプログレスバーや特定の株式（M6、Pepsico、TotalEnergies）を含めることで、投資家にとってすぐに関連性のあるレンダリングが可能になります。
なぜ結果が興味深いのか
この結果は、コーディングアシスタントとしてのGeminiの能力を示しています。AIは単にHTMLタグを並べるだけでなく、ページを正しく構成し、外部スクリプトをインテリジェントにインポートし、グラフのJavaScriptロジックを記述し、Tailwind CSSユーティリティクラスを適用して美しくレスポンシブなレンダリングを実現します。
開発者やプロジェクト作成者にとって、これは大幅な時間の節約になります。Chart.jsやTailwindのドキュメントを何時間も読んでモックアップを構成する代わりに、数秒で堅牢で視覚的な基盤を手に入れることができ、あとは実際のデータに接続するだけです。
