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 objects being compared before testing the results of two models 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 Prompt:#
# Objective
Generate a professional and dynamic HTML webpage based on Microsoft's latest financial report data.
# Steps Required
## 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 Formatting
- Mix Chinese and English, using large font size and bold for Chinese, with 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
- Refer to 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 should 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, with no omission of key information.