← backImage GenerationFounding · Free forever

Generate a hero banner for a landing page

Ask Claude Code to drop the image into Webflow's asset library via connector.

by @whitney · recommended tool Freepik · 0 unlocks

You'll need

CLAUDE SKILLS

image-prompt (Nano-Banana 2)

CONNECTORS

Webflow

EXAMPLES · WHAT THIS PROMPT PRODUCES

Sample output

**Hero banner (21:9) — Strata project-management landing page**

Concept: an abstract "clarity from chaos" landscape. In the foreground, sharply-focused translucent glass cards float and overlap at slight angles, each suggesting a task or board. The midground dissolves into a soft layered mountain-range silhouette built from the same card shapes. The background is an atmospheric dawn gradient with faint volumetric light haze, giving real depth between the three planes.

Mood: calm, organized, optimistic — the visual argument that Strata turns scattered work into a clear horizon. Palette holds to #5B6CFF electric-indigo in the cards and #FFB37B warm-dawn in the sky, so it feels modern but human.

Crucially, the center-left third is kept as soft, low-detail atmospheric space — a clean safe zone where the H1 headline and primary CTA button sit without competing with imagery. All the visual weight (the crisp foreground cards) lives right-of-center.

Delivered at 2560×1097, plus a 16:9 crop for tablet and a center-cropped mobile variant that keeps the foreground cards in frame.

PRICE HISTORY0 cr · current

PROMPT TEMPLATE · v1.0.0

Hero banner image, 21:9, for <PRODUCT> landing page.
Concept: <CONCEPT>. Mood: <MOOD>. Depth: strong foreground + midground + atmospheric background.
Leave safe zone in center-left for headline and CTA. Palette: <HEX1,HEX2>.

WORKFLOW

01In Claude, invoke the image-prompt skill trained on Nano-Banana 2 docs to draft the prompt.
02Open Freepik and select the Google Gemini (Nano-Banana 2) model.
03Paste the prompt, generate, and iterate.