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 作为主要图标。
# 其他要求
- 内容必须完整,不得省略关键信息。