在这个 Prompt Tuesday #9 中，我们将金融与 Web 开发相结合。正值股息季，探索如何使用 Gemini AI 瞬间编写出一个基于 HTML、JavaScript 和 Tailwind CSS 的现代仪表盘。
将个人理财与 Web 开发相结合是 Linkeum DNA 的核心。当我们进入著名的“股息季”（四月、五月、六月）时，许多投资者和开发者都希望创建自己的跟踪工具。
在这次测试中，目标是使用 Gemini（谷歌的 AI）从零开始生成股息仪表盘 (Dashboard) 的完整前端代码。我们要求它使用简单、通用且无需繁重配置的技术：纯 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.
该 prompt 旨在实现的目标
这个提示词的挑战在于将金融理念转化为视觉化且可立即测试的 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 标签；它正确地构建了页面结构，智能地导入了外部脚本，编写了 Chart.js 的 JavaScript 逻辑，并应用了 Tailwind CSS 实用类来实现美观且响应式的渲染。
对于开发者或项目创建者来说，这可以节省大量时间。您无需花费数小时阅读 Chart.js 和 Tailwind 文档来构建原型，而是可以在几秒钟内获得坚实且可视化的基础，接下来只需将其连接到真实数据即可。
