Gaming Landing Page & UI Designer

What this prompt does

This prompt generates a complete gaming landing page architecture by forcing the AI to follow actual industry layout conventions — cinematic hero first, features next, characters, media, specs, community, then editions. That sequencing is baked into the template's "Pattern" rule, so the output is structured the way players expect, not the way generic web designers default to.

What separates this from a vague "design a game website" ask is specificity: the template captures release status, target audience, platform targets, and feature count as variables. The AI uses those to produce contextually appropriate CTAs (Pre-Order vs Play Free vs Download), platform badges, and system requirements tables that actually reflect the declared platforms rather than guessing.

The eighth generation item — [framework] code for the hero section and character carousel — means you walk away with a usable starting point in actual markup, not just a layout description. The anti-patterns list is intentional design guardrails: it explicitly blocks the AI from producing safe, boring layouts that would embarrass the page in front of a gaming audience.

When to use it

• You are building a Steam or Epic launch page and need a first-pass HTML/CSS/JS hero section with a video background within the hour.
• An indie studio needs a pre-launch "coming soon" page that shows character classes and a Discord CTA before the game ships.
• You are pitching a game concept to investors and need a believable, high-fidelity mockup of what the web presence will look like.
• A mobile game (iOS/Android) needs a download funnel page with platform badges, feature highlights, and an App Store CTA.
• You are redesigning an existing game's stale website and want a detailed brief you can hand to a contractor.
• A game jam project needs community integration (Discord embed, social feeds) alongside a fast download link.

Example output

## Hero Section — "Project Veilborn" (Dark Fantasy RPG, PC/PS5)

<section class="hero" style="background: url('key-art.webp') center/cover">
  <video autoplay muted loop playsinline src="trailer-loop.mp4"></video>
  <div class="hero-content">
    <img src="logo.svg" alt="Project Veilborn" />
    <p class="tagline">Death is not the end. Neither is the Veil.</p>
    <div class="platform-badges">
      <img src="steam-badge.svg" /><img src="ps5-badge.svg" />
    </div>
    <a href="#preorder" class="cta-btn">Pre-Order — $49.99</a>
  </div>
</section>

Character Carousel: Veilwalker | Ashblade | Riftborn
— click each to expand abilities panel with animated stat bars

Pro tips

• Set [framework] deliberately. Specifying Tailwind + Alpine.js gets you composable, copy-paste-ready components. Specifying React gets JSX with hooks. Do not leave it blank — the AI will default to vanilla HTML and miss framework-specific patterns you likely need.
• [release_status] changes the entire CTA flow. Use "Early Access" and the AI will typically reframe the edition comparison section toward founder-style framing and roadmap context, since those are the signals EA buyers weigh before purchasing. The shift is not guaranteed — it depends on the model — but the variable consistently pushes the conversion section in that direction.
• Use [feature_count] to control page length. Three features produces a tight, punchy section. Six features produces a deep-dive showcase better suited to an RPG with a complex system. Match it to your game's actual selling points, not a round number.
• Pair the character carousel output with real asset dimensions upfront. Tell the AI "character portrait: 400x600px, ability icon: 64x64px" in the variables section so the generated CSS uses realistic aspect ratios instead of placeholders that break on actual art.
• The anti-patterns block is a reusable sanity check. If you later hand the generated layout to a designer, forward them the anti-patterns list verbatim — it serves as a one-page brief on what not to regress toward.