Nano Banana UI Prompts

A library of 80 curated prompts from awesome-nano-banana-pro-prompts, re-indexed for UI design work.

When to use

Reach for this skill when the user wants any of these three outputs:

1. An image-gen prompt (for Gemini / Nano Banana Pro / other image model) — hero image, infographic, poster, thumbnail, product shot.
2. A Stitch MCP input (mcp__stitch__generate_screen_from_text, mcp__stitch__create_design_system, mcp__stitch__edit_screens, mcp__stitch__generate_variants) — Nano Banana prompts transfer directly; this skill adapts them.
3. A design DNA brief for coded UI (React/Tailwind, SwiftUI, etc.) — feed the aesthetic into Picasso's DESIGN.md flow or directly into component code.

Do not use for: generic "improve my UI" requests (use picasso instead), pure copywriting, or non-visual work.

Data layout

• data/ui-prompts.json — 80 prompts, structured. Schema: {id, category, featured, title, description, prompt, images[], author, source, gallery_url, raycast_friendly, languages[]}.
• scripts/search.py — CLI filter by keyword + category. Emits JSON (default) or markdown.
• scripts/refresh.sh — re-pulls the upstream README and re-parses the JSON.
• REFERENCE.md — pattern catalogue, Stitch adapter recipes, anti-patterns. Load on demand via Read when you need a specific pattern (e.g., Bento grid recipe, quote card, liquid glass, thumbnail hierarchy).

Workflow

Step 1 — clarify the output path

Pick one before searching:

• Image only → Nano Banana / Gemini prompt (use prompt as-is, adjust subject)
• Stitch screen → mcp__stitch__generate_screen_from_text (adapt composition language to UI language — see REFERENCE.md §Stitch Adapter)
• Stitch design system → mcp__stitch__create_design_system (extract tokens: palette, fonts, roundness, designMd prose)
• Coded UI → extract tokens → pass to Picasso /mood or /steal flow, or write DESIGN.md directly

If unclear, ask the user which path in one sentence before proceeding.

Step 2 — search the library

Run python3 ~/.claude/skills/nano-banana-ui-prompts/scripts/search.py with relevant filters. Examples:

# Keyword + category
python3 ~/.claude/skills/nano-banana-ui-prompts/scripts/search.py --query "bento grid" --category infographic

# Featured only (top 9 curated)
python3 ~/.claude/skills/nano-banana-ui-prompts/scripts/search.py --featured

# Dump everything in a category as markdown
python3 ~/.claude/skills/nano-banana-ui-prompts/scripts/search.py --category thumbnail --format md

Never paste the whole JSON into context. Always filter first.

Step 3 — adapt to the target

Target	Adaptation
Image gen	Replace {argument name="..."} placeholders with concrete values; drop Raycast syntax if not using Raycast
generate_screen_from_text	Strip camera/lens/lighting language; keep composition, hierarchy, color, typography; translate "image" → "screen", "photograph" → "UI"
create_design_system	Extract: primary color (hex), headline font enum, body font enum, roundness (ROUND_4/8/12/FULL), color mode; put prose aesthetic in designMd
DESIGN.md / coded UI	Pull palette + type stack + spatial rhythm + mood descriptors; note composition rules as layout invariants

Concrete mappings in REFERENCE.md §Stitch Adapter and §Design System Extraction.

Step 4 — cite and attribute

When you surface a prompt to the user, include:

• Title (short, from data)
• Author + Source (Twitter/X link from data)
• Gallery URL (youmind.com preview)
• License: CC BY 4.0 — user must keep attribution if publishing

Example surface format:

> Based on "Premium liquid glass Bento grid product infographic" by @MansiSanghani1
> Source: https://x.com/MansiSanghani1/... · Preview: https://youmind.com/...?id=6847

Decision tree — picking a prompt

Is the target a landing-page hero / product showcase?
  → search: product-marketing OR ecommerce
  → featured examples: Bento grid (#2), quote card (#1)

Is it a data-heavy section (stats, timeline, "how it works")?
  → search: infographic
  → featured: Bento grid (#2), patent document (#6), chalkboard summary (#7)

Is it a social-card / share-image / OG image?
  → search: social-media OR thumbnail

Is it a marketing illustration with typography?
  → search: thumbnail (for type-heavy) or featured (quote cards)

Is it "make the whole app feel like X" (aesthetic direction)?
  → pick 1-3 prompts; extract tokens (REFERENCE.md §Design System Extraction);
    hand off to picasso for DESIGN.md

Integration with other skills

• picasso — for coded frontend and DESIGN.md generation. This skill feeds patterns INTO picasso; don't duplicate its work.
• frontend-slides — for presentations. Can reuse quote-card / Bento patterns from here.
• frontend-design:frontend-design — alternate path for production React code from aesthetic brief.

When the user wants end-to-end "visual → production code", chain: this skill (pattern) → picasso /mood or /steal (DESIGN.md) → coded components.

Refresh

Library is snapshot as of 2026-04-16 (80 prompts, English README). To update:

bash ~/.claude/skills/nano-banana-ui-prompts/scripts/refresh.sh

This re-pulls the upstream README and re-parses. Upstream updates daily; refresh monthly unless you need a specific new prompt.

Limits

• 80 of the 12,468 total prompts — the English README is a curated subset. Full library requires CMS API access (not available).
• Skips: Profile/Avatar, Comic/Storyboard, Game Asset (not UI-relevant).
• Does not include App/Web Design or Poster/Flyer categories — they're not in the README subset. If the user wants those, point them at the gallery: https://youmind.com/en-US/nano-banana-pro-prompts?categories=app-web-design