Skip to content
self.md

■ SKILLS // SKILL SPECS

nano-banana

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.

Author Jawhny Cooke Published Read 5 min
■ [!] ON THIS PAGE ▼
■ INSTALL // npx @self.md/cli install nano-banana
AuthorJawhny Cooke
Namespace@jawhnycooke/claude-plugins-official
Category#design
Version1.0.0
Stars★ 0
Downloads↓ 3
Verification[ ✓ ] self.md verified
View Source ↗

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

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.

View skill definition

JSON Prompting for Nano Banana Pro

This skill transforms natural language descriptions into structured JSON schemas that give precise control over image generation with Nano Banana Pro (Gemini 3 Pro Image).

When to Use This Skill

Use this skill when the user wants to:

  • Create marketing images with exact product specifications (product photography, hero shots)
  • Design UI mockups with defined layouts, components, and color systems
  • Build infographics or diagrams where process flows need to be clear
  • Generate data visualizations where numbers and chart accuracy matter
  • Create social media graphics with platform-specific dimensions and text overlays
  • Generate images with reproducibility (same spec = same result)
  • Iterate on specific elements without regenerating everything else
  • Maintain brand consistency across multiple image generations

Do NOT use this skill when:

  • The user wants creative exploration with surprise outcomes
  • The user prefers vibes-based prompting
  • A simple natural-language prompt would suffice
  • The user hasn’t defined what they actually want yet

Core Concept: Handles

The power of JSON prompting is the handle concept. Every important element gets a stable identifier:

  • Scoped edits: Change only the background, or only the lighting, without affecting other elements
  • Camera moves: Same scene, different perspective
  • Themed variants: Same structure, different visual styling
  • **A/B tes

Source

View on GitHub

[!] SKILL TAGS //
#design