Design a dark-mode website section: deep space canvas ignited by neon cyan gradients, glowing glass surfaces, and playful futuristic ai prompts.
LAYOUT
The layout is balanced horizontally across two equal desktop columns anchored by a clean utility header. The left column stacks the display headline, concise body proposition, dual-action button group, and live activity badge in descending order. The right column showcases the hero prompt simulator elevated directly over the celestial sphere, resolved at the bottom with a 3-step workflow diagram.
PALETTE (use these exact hex values)
- #040711 — Canvas Obsidian: Deepest dark canvas background framing all hero elements and space backdrop
- #081120 — Surface Glass: Semi-translucent container background for the interactive prompt playground card
- #050b16 — Surface Inset: Recessed background for the prompt textarea and inactive parameter selector chips
- #1d4ed8 — Orbital Glow: Ambient atmospheric radial blur representing the celestial background sphere
- #06b6d4 — Cyan Electric: High-intensity accent used in the primary gradient stop, text highlights, and outer borders
- #2563eb — Cobalt Blue: Starting point for primary action gradients, active states, and glowing accents
- linear-gradient(90deg, #2563eb 0%, #06b6d4 100%) — Electric Gradient: Applied to primary action CTA buttons, the 'AI games' headline span, and brand logos
- #22c55e — Live Indicator: Status indicator dot and counter highlight within the social proof badge
- #ffffff — Text Pure White: Primary headline text, active labels, and bold parameter chip values
- #94a3b8 — Text Slate Muted: Subtitles, placeholder text, secondary navigation links, and workflow step labels
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 68px display. Tracking -0.03em at display, -0.01em at body, 0 at micro. The typographic tone is ultra-modern, technological, and welcoming. Plus Jakarta Sans provides clean geometric circular forms that avoid the cold clinical feeling of Neo-Grotesques, giving gaming AI a friendly yet sharp edge. In production, Inter or Geist Sans serve as seamless drop-in replacements.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created not via traditional drop shadows, but through luminous backlighting and glowing outlines. A giant soft radial gradient representing a planet casts blue ambient light behind the prompt card, while the card itself projects a cyan rim light. Secondary cards and text fields sink into the background through darker inset fills.
IMAGERY
The visual language rejects photorealism in favor of cosmic atmospheric minimalism. Subtle stellar dust particles and a large blurred spherical arc emulate space without overt sci-fi cliches. Any inserted imagery should be restricted to neon-infused UI mockups or glowing game assets.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the 'Luminous Orb Backlight' paired with the cyan-rimmed generator card. An intense circular blue celestial horizon sits directly behind a high-tech translucent prompt container, instantly framing the AI input as the cosmic center of the experience. It fails when the glow is made too intense (obscuring text) or rendered flat without the cyan border highlight.
MUST
- Reserve the vivid cyan-to-blue gradient strictly for primary generative triggers and the 'AI games' headline span.
- Pair the interactive prompt card with a heavy outer bloom (box-shadow: 0 0 35px rgba(6, 182, 212, 0.25)).
- Keep display typography line-height extremely tight (around 1.05 to 1.1) to preserve visual impact.
- Use inset dark surfaces (#050b16) within cards to create depth without relying on solid border lines.
AVOID
- Do not introduce warm hues like yellow, red, or orange; maintain strict cyan, cobalt, and green accents.
- Avoid flat opaque gray cards that kill the cosmic luminescence of the deep navy canvas.
- Never set secondary body text to pure white (#ffffff); reserve white exclusively for primary headers and active values.
- Do not use sharp 0px corners; buttons and cards must maintain smooth 10px to 20px radii.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
