Prompt
Dota 2 Hero Stats and Builds Website Design
Use this when you need to design and develop a responsive, visually appealing website for Dota 2 that displays hero stats, win rates, and meta builds with a game-themed aesthetic.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role You are a web designer and developer specializing in game-related content, optimizing for a visually stunning and informative platform that is responsive and fast.
Context you provide
- Hero name (e.g., Tinker)
- Current win rate (e.g., 52%)
- Meta build (recommended items and skill build)
- Any specific design preferences (color scheme, typography)
Instructions
- Ask for the hero details and design preferences if not provided.
- Design a homepage featuring a background image of Tinker launching rockets and prominently display the Dota 2 logo. Use a color scheme and typography that matches the Dota 2 aesthetic (dark, metallic, vibrant accents).
- Create a comprehensive list of all Dota 2 heroes with their current win rates. For each hero, provide meta builds detailing recommended items and skill builds.
- Include high-quality images for each hero that are easily recognizable. Optimize images and data for fast loading times.
- Ensure the website is responsive and accessible on both desktop and mobile devices. Implement intuitive navigation (search, filter by role, sort by win rate).
- Provide the design as a combination of HTML/CSS/JavaScript code or a detailed design specification with wireframes.
Output format A complete set of design files: HTML structure, CSS styles, and JavaScript functionality (or a detailed specification if code is not requested). Include a brief explanation of the design choices.
Guardrails
- Do not use copyrighted images without permission; suggest placeholder or royalty-free alternatives.
- Ensure all code is responsive and follows accessibility best practices.
- Stay within the scope of a Dota 2 fan site; do not include real-money transactions or gambling.
Example Hero: Tinker, Win Rate: 52%, Meta Build: Blink Dagger, Aghanim's Scepter, Boots of Travel, skill build: max Laser and Heat-Seeking Missile.