Interactive translator that converts plain English descriptions into structured JSON schemas for Nano Banana Pro (Gemini 3 Pro Image). Supports marketing images, UI mockups, diagrams, data visualizations, and social graphics.

Installation

npx claude-plugins install @jawhnycooke/claude-plugins-official/nano-banana

Contents

Folders: commands, skills

Files: README.md

Documentation

Interactive JSON Prompt Translator for Nano Banana Pro (Gemini 3 Pro Image).

Overview

This plugin provides the /nano-banana slash command that transforms natural language descriptions into structured JSON schemas for precision image generation with Nano Banana Pro (Gemini 3 Pro Image).

Philosophy: Stop rolling dice with vague prompts. Start turning dials with structured specifications where every element—lighting, camera angle, composition, props—lives on its own controllable parameter. Change one thing without affecting everything else.

What is Nano Banana Pro?

Nano Banana Pro is Google’s advanced image generation model (Gemini 3 Pro Image) that excels at rendering structured JSON specifications rather than vague text prompts. It’s available through:

• Google Gemini app (select “Create images” → “Thinking” model)
• Google AI Studio

Installation

First, add the marketplace to Claude Code:

/plugin marketplace add https://github.com/jawhnycooke/claude-code-nano-banana

Then install the plugin:

/plugin install nano-banana

Command Reference

Basic Usage

/nano-banana [description of image, UI, or diagram you want to create]

Examples:

# Marketing image
/nano-banana vinyl record product shot, moody lighting, vintage feel

# UI mockup
/nano-banana dashboard for analytics app with dark theme

# Diagram
/nano-banana flowchart showing user login process

# Data visualization
/nano-banana bar chart comparing quarterly revenue by region

# Social graphic
/nano-banana Instagram post announcing new product launch

Without Initial Description

If you invoke the command without arguments, it will prompt you:

/nano-banana

The translator will ask: “What would you like to create? (Product photo, UI mockup, or diagram/infographic?)”

How It Works

The command follows a collaborative workflow:

1. Classification

Identifies which schema type best fits your description:

• Marketing Image - Product shots, hero images, brand photography
• UI/UX Mockup - App screens, dashboards, websites, interfaces
• Diagram - Flowcharts, architecture diagrams, process maps
• Data Visualization - Charts, graphs, statistics with exact values
• Social Graphic - Platform-specific social media content

2. Interactive Discovery

Uses structured questions to gather requirements:

• AskUserQuestion tool for decisions with 2-4 clear options (camera angle, lighting style, platform, etc.)
• Conversational follow-ups for open-ended details (product name, specific data values, etc.)

3. JSON Generation

Builds a complete, valid JSON specification with:

• All required fields populated
• Reasonable defaults for unspecified values
• Unique IDs and valid references
• No placeholder values or incomplete data

4. Next Steps Guidance

Provides instructions for using the JSON with Nano Banana Pro

Schema Types

Marketing Image (marketing_image)

Product photography, hero images, brand campaigns.

Key Elements:

• Subject (product type, dimensions, finish)
• Props (foreground, midground, background elements)
• Environment (surface, background, atmosphere)
• Camera (angle, framing, focal length, depth of field)
• Lighting (key/fill/rim lights, direction, intensity)
• Brand constraints (colors, logo placement, forbidden changes)

Common Values:

• Camera angles: front, three_quarter_front, side, top_down, overhead
• Framing: close_up, medium_close, medium, wide
• Lighting direction: left, right, front, back, top

UI/UX Mockup (ui_builder)

Application interfaces, dashboards, websites.

Key Elements:

• Platform (web, mobile, tablet, desktop)
• Fidelity level (wireframe, low-fi, mid-fi, hi-fi)
• Design tokens (colors, typography, spacing, border radius)
• Screens and layouts
• Components (buttons, forms, charts, tables, navigation)
• Data bindings

Platform Options:

• web - Browser-based (1280-1920px)
• mobile - iOS/Android phone (375-428px)
• tablet - iPad/Android tablet (768-1024px)
• desktop - Native desktop application

Diagram (diagram_spec)

Flowcharts, architecture diagrams, process maps, system visualizations.

Key Elements:

• Canvas (dimensions, flow direction)
• Semantics (diagram type, relationship type, swimlanes)
• Nodes (with roles: start, end, process, decision, database, actor)
• Edges (connections between nodes with labels)
• Groups (logical groupings or containers)
• Legend

Diagram Types:

• flowchart - Process flows with decisions
• architecture - System components and connections
• sequence - Time-ordered interactions
• swimlane - Cross-functional processes
• mindmap - Central concept with branches

Data Visualization (data_viz)

Charts and graphs where numerical accuracy is critical.

Key Elements:

• Chart type (bar, line, pie, scatt

…(truncated)

Included Skills

This plugin includes 1 skill definition:

SKILL

Converts natural language descriptions into structured JSON schemas for Nano Banana Pro (Gemini 3 Pro Image). Use when creating marketing images, UI mockups, diagrams, data visualizations, or social media graphics that require precise control and reproducibility. Supports five schema types for product photography, interfaces, flowcharts, charts, and social content.

Source

View on GitHub