Complete AI Training

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

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

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

  1. Ask for the hero details and design preferences if not provided.
  2. 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).
  3. 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.
  4. Include high-quality images for each hero that are easily recognizable. Optimize images and data for fast loading times.
  5. Ensure the website is responsive and accessible on both desktop and mobile devices. Implement intuitive navigation (search, filter by role, sort by win rate).
  6. 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.