Gemini 2.5 Pro is currently ranked first on the WebDev Arena leaderboard, which measures human preferences for building aesthetically pleasing and powerful web applications. A brief introduction to WebDev Arena: it is a sub-leaderboard developed by LMArena, specifically designed to evaluate web front-end development tasks (such as HTML, CSS, and JS). It is one of the most renowned blind testing arenas for large models. Unlike some traditional test sets, users are completely unaware of the models being compared before testing the results through prompts, and scoring is based solely on objective result data. Therefore, the authenticity and authority of the data are evident.
Set the dropdown to select Gemini 2.5 Pro Preview 05-06 through Google AI Studio.
Structured Prompts:#
# Objective
Generate a professional and dynamic HTML webpage based on Microsoft's latest financial report data.
# Step Requirements
## 1. Data Collection
- Gather the complete content of Microsoft's latest financial report.
- Supplement missing data through searches to ensure no omissions.
## 2. Financial Report Analysis
- Conduct a detailed and professional analysis of the financial report data based on the collected and supplemented complete financial report information.
## 3. Webpage Generation
- Create a dynamic HTML webpage based on the financial report content and analysis results.
# Visual and Development Specifications
## Design Style
- Use **Bento Grid** style layout.
- Background color and theme color should reference the **Alibaba official website** (with appropriate adjustments to fit Microsoft's brand tone).
## Text Typography
- Mixed Chinese and English typesetting, with Chinese in larger font size and bold, and English as supplementary decoration.
## Visual Elements
- Use oversized visual elements on the page to highlight core content, creating a strong contrast with smaller elements.
- Charts and visual elements should have standardized outlines and graphical expressions.
## Color Usage
- Highlight colors should use their own transparency gradients to create a sense of technology.
- Avoid overlapping between different highlight colors.
## Animation Design
- Reference the **Apple official website** to achieve dynamic effects when scrolling down.
- Use **Framer Motion** (imported via CDN) to handle animations.
## Technical Stack Requirements
- HTML5
- TailwindCSS 3.0+ (imported via CDN)
- Necessary JavaScript script support.
## Charts and Icons
- Data can reference online chart components (styles must be consistent with the overall theme).
- Use professional icon libraries, such as **Font Awesome** or **Material Icons** (imported via CDN).
- Avoid using emojis as primary icons.
# Other Requirements
- Content must be complete and not omit key information.