| name | nano-banana-ui-prompts |
| description | Borrow battle-tested visual composition patterns from the Nano Banana Pro prompt library to improve image-generation prompts, Stitch MCP screen/design-system generation, and coded UI design DNA. Use when the user wants to build a hero image, infographic, Bento grid, quote card, product shot, YouTube thumbnail, social-media visual, landing-page mockup, or wants to feed a reference aesthetic into Stitch (`mcp__stitch__*`), Gemini image generation, or a Picasso-style DESIGN.md. Covers 80 curated prompts across 6 UI-relevant categories (featured, infographic, social, thumbnail, product marketing, e-commerce). Activates when the user mentions: "nano banana", "bento grid", "liquid glass", "quote card", "hero image prompt", "thumbnail style", "product mockup prompt", "infographic layout", "Stitch prompt", or asks to generate/improve a UI visual using a reference aesthetic. |
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:
- An image-gen prompt (for Gemini / Nano Banana Pro / other image model) — hero image, infographic, poster, thumbnail, product shot.
- 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.
- 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:
python3 ~/.claude/skills/nano-banana-ui-prompts/scripts/search.py --query "bento grid" --category infographic
python3 ~/.claude/skills/nano-banana-ui-prompts/scripts/search.py --featured
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
