home/coding/hero-banner

Hero Banner

GPTClaudeDeepSeek··1,339 copies·updated 2026-07-14
hero-banner.prompt
Create a realistic full-width editorial brand hero banner for an open-source 
developer tool called "fumeng" — a cross-modal UI generation skill for 
Claude Code / Cursor / Windsurf.

Visual style: Warm editorial in the spirit of Anthropic × Notion × Stripe 
developer landing pages, with subtle East-Asian ink-wash texture elements. 
Feels like a hand-pressed letterpress poster, not a web template.

Color palette:
- Background: warm cream paper oklch(0.96 0.008 40) with soft handmade grain texture
- Primary ink: deep warm black oklch(0.18 0.02 30) 
- Gold accent (used sparingly): warm gold foil oklch(0.72 0.15 75)
- Terracotta signal color (for active badges only): oklch(0.58 0.19 28)
- Hairline separator: oklch(0.88 0.008 40)

Typography:
- Wordmark "fumeng" set in a characterful humanist serif display 
  (Tiempos Headline character — elegant terminals, subtle stress contrast, 
  editorial feel), weight 500, optical size for display, about 180px height, 
  tracking -1%, color deep warm black
- Chinese subtitle "浮梦" beneath wordmark, small ink-brushed style character 
  about 36px, color warm gold foil
- Tagline below, in a warm editorial body serif (PP Editorial Old character) 
  at 28px, deep warm black: "AI 前端 UI 生图 · 三位一体跨模态系统"
- English sub-tagline at 18px, muted oklch(0.45 0.02 30): 
  "Cross-modal UI generation. Pairs gpt-image-2 visual anchors with MCP real-asset harvesting."

Layout (asymmetric editorial, NOT centered):
- Left 60%: wordmark + 浮梦 + tagline stack, left-aligned
- Right 40%: an abstract schematic diagram rendered as letterpress-style 
  line art in warm gold foil showing THREE linked modules arranged in a 
  triangle:
    * Top node: a small square screen icon labelled "image-2"
    * Bottom-left node: a hexagonal plug icon labelled "MCP"
    * Bottom-right node: a quill/ink-nib icon labelled "prompt"
  Connecting the three nodes: thin warm gold lines with tiny circular 
  joints, like a circuit schematic. Each node has a 1-line EN caption in 
  monospaced letterpress type.
- A single thin terracotta rule spans the full bottom edge (2px tall).
- Small line of monospaced text bottom-left: "v0.1.0 · MIT License · 2026"

Background treatment:
- Warm cream paper base
- Very subtle ink-wash cherry-blossom petal silhouettes (3% opacity) 
  scattered at the bottom-left and top-right corners — just enough to 
  hint at the 浮梦 (floating dream) theme without being decorative
- Faint horizontal letterpress grid grain across the whole canvas

Use case: GitHub README top-of-page hero banner, 2560x1440 resolution, 
displayed at full viewport width.

Strict constraints:
- NO Inter, Roboto, Arial, Space Grotesk, Fraunces, system-ui, Poppins, 
  Montserrat, or any generic geometric sans-serif fonts.
- NO purple-pink gradients. NO blue-to-cyan gradients. NO holographic shine.
- NO 3-column symmetric layout. NO centered stack. NO emoji anywhere.
- NO fabricated logos, NO made-up stats, NO testimonial snippets.
- NO stock illustration style. NO isometric 3D characters. 
- NO generic "developer landing page" feel with floating gradient blobs.
- Typography weights and sizes must feel editorial and deliberate, 
  like a printed design book cover, not a SaaS marketing site.
- The cherry-blossom texture must be flat ink-wash silhouettes, 
  NOT realistic photos.
- All copy must be EXACTLY as specified above.
- Pixel-perfect 8px grid, letterpress restraint, nothing decorative unless it carries meaning.

when to use it

Community prompt sourced from the open-source GitHub repo qiuxinyuan321/fumeng (MIT). A "Hero Banner" style prompt — adapt the placeholders and specifics to your task. Imported as-is and not independently retested here, so check the output before relying on it.

tags

codingcommunitydeveloper

source

qiuxinyuan321/fumeng · MIT