Hero Banner
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
more in Coding
Coding✓ tested
Senior code review (strict mode)
senior staff engineer running a merciless but fair review
Coding✓ tested
Debug by hypothesis, not by guessing
debugging partner who forms theories before touching code
Coding✓ tested
Generate tests from described behavior
test engineer who writes tests that would actually catch regressions