Gemini 2.5 Pro 目前在 WebDev Arena 排行榜上位居第一,该排行榜衡量了人类对模型构建美观且功能强大的 Web 应用能力的偏好。關於 WebDev Arena 簡單科普一下,它是由 LMArena 開發的一個子榜,專為評測網頁前端開發任務 (比如:HTML、CSS 和 JS) 而設立的,是最著名的大模型盲測競技場之一,它跟一些傳統的測試集不一樣,用戶在通過提示詞去測試兩個模型得出的結果之前完全不知道要對比的對象是誰,都是基於客觀的結果數據來打分。所以數據的真實性和權威性是用目共睹的。
通過 Google AI Studio 設置下拉框選擇 Gemini 2.5 Pro Preview 05-06。
結構化提示詞:#
# 目標
基於微軟(microsoft)最新財報數據,生成一個專業且動態的HTML網頁。
# 步驟要求
## 1. 數據收集
- 搜集microsoft最新的完整財報內容。
- 通過搜索補充缺失的數據,確保數據無遺漏。
## 2. 財報分析
- 基於搜集和補充的完整財報信息,進行詳細且專業的財報數據分析。
## 3. 網頁生成
- 根據財報內容與分析結果,製作一個HTML動態網頁。
# 視覺與開發規範
## 設計風格
- 使用 **Bento Grid** 風格佈局。
- 背景顏色和主題色參考 **阿里巴巴官方網站**(可適當調整適配microsoft品牌調性)。
## 文字排版
- 中英文混排,中文使用大字號和加粗,英文作為輔助點綴。
## 視覺元素
- 頁面中使用超大視覺元素突出核心內容,與小元素形成強烈對比。
- 圖表和可視化元素應規範勾線,圖形化表達。
## 色彩運用
- 高亮色使用自身透明度漸變以製造科技感。
- 不同高亮色之間避免疊加。
## 動效設計
- 參考 **Apple官網**,實現向下滾動時的動態效果。
- 使用 **Framer Motion**(通過CDN引入)處理動效。
## 技術棧要求
- HTML5
- TailwindCSS 3.0+(通過CDN引入)
- 必要的 JavaScript 腳本支持。
## 圖表與圖標
- 數據可引用在線圖表組件(樣式需與整體主題一致)。
- 使用專業圖標庫,如 **Font Awesome** 或 **Material Icons**(通過CDN引入)。
- 避免使用 emoji 作為主要圖標。
# 其他要求
- 內容必須完整,不得省略關鍵信息。