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 testing: Compare two versions that differ by exactly one variable
The Five Schema Types
1. Marketing Image (marketing_image)
For product shots, hero images, brand photography, and advertising visuals.
Key sections:
subject: Product type, name, variant, physical properties (finish, dimensions)props: Foreground, midground, and background objects with counts and positionsenvironment: Surface material, background color/texture, atmosphere/moodcamera: Angle, framing, focal length, depth of fieldlighting: Key light, fill light, rim light, color temperaturebrand: Logo assets, primary colors, forbidden changescontrols: What can/cannot change during iteration
2. UI/UX (ui_builder)
For app screens, dashboards, websites, and interface mockups.
Key sections:
app: Platform (web/mobile/desktop), fidelity level, viewport, themetokens: Colors (hex values), typography, border radius, spacing scalescreens: Array of screens with IDs, names, roles, and layout containerscomponents: UI elements with screen assignment, container placement, and propsconstraints: Layout lock, theme lock, content lock
3. Diagram (diagram_spec)
For flowcharts, architecture diagrams, process maps, and system visualizations.
Key sections:
canvas: Dimensions, unit, flow directionsemantics: Diagram type, primary relationship, swimlanesnodes: Array of nodes with IDs, labels, roles, positions, stylesedges: Connections between nodes with labels and arrow stylesgroups: Swimlanes or clusters for organizing nodesconstraints: Layout lock, auto-routing permissions
4. Data Visualization (data_viz)
For charts, graphs, and statistical graphics where numerical accuracy is critical.
Key sections:
chart_type: bar, line, pie, scatter, area, treemap, heatmapdata_series[]: Arrays of data points with labels and valuesaxes: X and Y axis configuration (labels, min/max, units, gridlines)annotations: Callouts, trend lines, data labels, highlightsstyle: Colors, fonts, legend positionconstraints: Data values that must appear exactly as specified
5. Social Media Graphic (social_graphic)
For platform-specific social content with text overlays and brand elements.
Key sections:
platform: Target platform (instagram_post, instagram_story, twitter_card, linkedin_post, youtube_thumbnail)dimensions: Auto-set based on platform or custombackground: Solid color, gradient, image, or patterntext_layers[]: Headline, subhead, body, CTA with positions and stylingbrand: Logo placement, colors, fontsstyle: Visual tone (minimal, bold, playful, professional)
Translator Workflow
Step 1: Classify Intent
Determine the target schema from the user's description:
| User talks about... | Schema to use |
|---|---|
| Product shots, hero images, brand photography, campaigns | marketing_image |
| Screens, buttons, dashboards, apps, navigation, mockups | ui_builder |
| Flows, processes, systems, nodes, boxes-and-arrows | diagram_spec |
| Charts, graphs, data, statistics, metrics, numbers | data_viz |
| Instagram, Twitter, LinkedIn, social posts, thumbnails | social_graphic |
If ambiguous, ask 1-2 short questions to disambiguate.
Step 2: Gather Requirements
For Marketing Images:
- Main subject (product type, name, size)
- Props (and where: foreground, around base, background)
- Environment (surface, background, mood)
- Camera angle and framing
- Lighting direction and intensity
- Brand constraints (logos, colors, things that cannot change)
For UI/UX:
- Platform (web, mobile, desktop)
- Number of screens and their roles
- Layout areas (top nav, sidebar, content)
- Key components (charts, tables, forms, cards)
- Color scheme or brand guidelines
For Diagrams:
- Diagram type (flowchart, architecture, swimlane, mind map)
- Key nodes/steps
- Connections and labels
- Groupings or lanes
- Flow direction
For Data Visualizations:
- Chart type (bar, line, pie, scatter, etc.)
- Data series with actual values
- Axis labels and ranges
- Any annotations or callouts
- Whether exact numbers must appear in the output
For Social Graphics:
- Target platform (determines dimensions)
- Background style (solid, gradient, image)
- Text content (headline, subhead, CTA)
- Brand elements (logo, colors)
- Visual style/mood
Step 3: Generate JSON
Build a complete JSON object with the appropriate root key. Ensure:
- All IDs are unique
- All references are valid
- Required fields are filled
- Output is valid JSON (no comments, no trailing commas)
Step 4: Provide Next Steps
Tell the user:
- Review the JSON to ensure it captures their intent
- Copy the entire JSON
- Open Nano Banana Pro (Gemini app with "Thinking" model, or Google AI Studio)
- Paste with instruction: "Render this specification as a high-fidelity image"
- Iterate by modifying specific fields and re-rendering
Common Values Reference
Camera angles: front, three_quarter_front, three_quarter_back, side, top_down, low_angle, overhead
Framing: extreme_close_up, close_up, medium_close, medium, medium_wide, wide
Lighting intensity: very_low, low, medium, high, very_high
Lighting direction: left, right, front, back, top, three_quarter_left, three_quarter_right
Surface materials: glossy, matte, marble, wood, concrete, fabric, metal, glass
UI fidelity: wireframe, low-fi, mid-fi, hi-fi
UI platforms: web, mobile, tablet, desktop
Diagram types: flowchart, architecture, sequence, swimlane, mindmap, org_chart
Node roles: start, end, process, decision, database, actor, note
Chart types: bar, horizontal_bar, line, area, pie, donut, scatter, bubble, treemap, heatmap, radar
Social platforms: instagram_post (1080x1080), instagram_story (1080x1920), twitter_card (1200x675), linkedin_post (1200x627), youtube_thumbnail (1280x720), facebook_post (1200x630)
Text positions: top_left, top_center, top_right, center_left, center, center_right, bottom_left, bottom_center, bottom_right
Complete Schema Examples
Marketing Image Example
Request: "Hero shot for a lime seltzer brand called Aurora Lime. 12oz can on a reflective surface with lime slices and ice cubes. Dark teal background, dramatic side lighting."
Output:
{
"marketing_image": {
"meta": {
"spec_version": "1.0.0",
"title": "Aurora Lime Hero Can Shot",
"campaign": "aurora_lime_launch",
"brand_name": "Aurora Lime",
"usage_context": "web"
},
"subject": {
"type": "product_can",
"name": "Aurora Lime Seltzer",
"variant": "Original Lime",
"physical_properties": {
"volume_oz": 12,
"dimensions": "standard 12oz beverage can",
"finish": "matte"
}
},
"props": {
"foreground": [
{
"type": "lime_slice",
"count": 3,
"position": "front_left",
"notes": "fresh lime slices, visible pulp and rind"
}
],
"midground": [
{
"type": "ice_cube",
"count": 12,
"position": "around_base",
"notes": "partially melted, small reflections"
}
],
"background": []
},
"environment": {
"surface": {
"material": "glossy",
"reflection_strength": 0.7
},
"background": {
"color": "#003b47",
"texture": "smooth",
"effect": "bokeh_soft"
},
"atmosphere": {
"mood": "refreshing, premium, night-time bar feel",
"keywords": ["sparkling", "cool", "luminous", "evening"]
}
},
"camera": {
"angle": "three_quarter_front",
"framing": "medium_close",
"focal_length_mm": 50,
"depth_of_field": "medium"
},
"lighting": {
"key_light_direction": "right",
"key_light_intensity": "high",
"fill_light_direction": "left",
"fill_light_intensity": "low",
"rim_light": false,
"color_temperature": "neutral"
},
"brand": {
"logo_asset": "aurora_lime_logo.png",
"primary_colors": ["#00ffc2", "#003b47"],
"must_match_assets": ["aurora_lime_logo.png"],
"forbidden_changes": [
"do_not_change_logo",
"do_not_change_brand_name"
]
},
"controls": {
"lock_subject_geometry": true,
"lock_logo_and_label": true,
"allow_background_variation": false,
"allow_prop_relayout": "small_only"
}
}
}UI/UX Example
Request: "Marketing analytics dashboard for web. Light theme, blue accents. Main dashboard with KPI cards, traffic chart, and campaigns table. Top nav with logo, left sidebar."
Output:
{
"ui_builder": {
"meta": {
"spec_version": "1.0.0",
"name": "Acme Analytics Dashboard",
"description": "Marketing analytics dashboard",
"author": "",
"tags": ["analytics", "marketing", "dashboard"]
},
"app": {
"platform": "web",
"fidelity": "hi-fi",
"viewport": {
"width": 1440,
"height": 900
},
"theme": "light"
},
"tokens": {
"color": {
"primary": "#2563EB",
"background": "#F9FAFB",
"surface": "#FFFFFF",
"accent": "#10B981"
},
"typography": {
"font_family": "system_sans",
"headline_size": 20,
"body_size": 14
},
"radius": {
"sm": 4,
"md": 8,
"lg": 12
},
"spacing_scale": [0, 4, 8, 12, 16, 24, 32]
},
"screens": [
{
"id": "screen_dashboard",
"name": "Dashboard",
"role": "primary",
"layout": {
"containers": [
{
"id": "container_top_nav",
"type": "stack",
"subtype": "horizontal",
"region": "top_nav",
"children": ["comp_logo", "comp_avatar"]
},
{
"id": "container_sidebar",
"type": "stack",
"subtype": "vertical",
"region": "sidebar",
"children": ["comp_nav_list"]
},
{
"id": "container_content",
"type": "grid",
"subtype": "column",
"region": "main_content",
"children": ["comp_kpi_grid", "comp_traffic_chart", "comp_campaigns_table"]
}
]
}
}
],
"components": [
{
"id": "comp_logo",
"screen_id": "screen_dashboard",
"container_id": "container_top_nav",
"component_type": "logo",
"props": {"text": "Acme Analytics"},
"data_binding": null
},
{
"id": "comp_nav_list",
"screen_id": "screen_dashboard",
"container_id": "container_sidebar",
"component_type": "nav_list",
"props": {
"items": [
{"label": "Overview", "icon": "home", "active": true},
{"label": "Channels", "icon": "bar_chart"},
{"label": "Settings", "icon": "gear"}
]
},
"data_binding": null
},
{
"id": "comp_kpi_grid",
"screen_id": "screen_dashboard",
"container_id": "container_content",
"component_type": "kpi_grid",
"props": {
"columns": 3,
"cards": [
{"label": "Sessions", "value": "124,983"},
{"label": "Signups", "value": "3,942"},
{"label": "Conversion", "value": "3.2%"}
]
},
"data_binding": null
},
{
"id": "comp_traffic_chart",
"screen_id": "screen_dashboard",
"container_id": "container_content",
"component_type": "line_chart",
"props": {"title": "Daily Traffic (Last 30 Days)"},
"data_binding": null
},
{
"id": "comp_campaigns_table",
"screen_id": "screen_dashboard",
"container_id": "container_content",
"component_type": "data_table",
"props": {
"title": "Active Campaigns",
"columns": ["Campaign", "Spend", "Clicks", "CPC"]
},
"data_binding": null
}
],
"constraints": {
"layout_lock": true,
"theme_lock": false,
"content_lock": false
}
}
}Diagram Example
Request: "Flowchart showing user signup: landing page, signup form, email validation decision, verification email, account activation. Left to right."
Output:
{
"diagram_spec": {
"meta": {
"spec_version": "1.0.0",
"title": "User Signup Flow",
"description": "End-to-end signup process",
"author": "",
"tags": ["signup", "user-flow"]
},
"canvas": {
"width": 1920,
"height": 600,
"unit": "px",
"direction": "left_to_right"
},
"semantics": {
"diagram_type": "flowchart",
"primary_relationship": "control_flow",
"swimlanes": []
},
"nodes": [
{
"id": "node_start",
"label": "Start",
"role": "start",
"lane": null,
"group_id": null,
"position": {"x": 50, "y": 260},
"size": {"width": 80, "height": 80},
"style": {
"shape": "ellipse",
"fill_color": "#10B981",
"border_color": "#059669"
},
"data": {}
},
{
"id": "node_landing",
"label": "Visit Landing Page",
"role": "process",
"lane": null,
"group_id": null,
"position": {"x": 200, "y": 250},
"size": {"width": 180, "height": 100},
"style": {
"shape": "rectangle",
"fill_color": "#FFFFFF",
"border_color": "#111827"
},
"data": {}
},
{
"id": "node_signup_form",
"label": "Complete Signup Form",
"role": "process",
"lane": null,
"group_id": null,
"position": {"x": 450, "y": 250},
"size": {"width": 180, "height": 100},
"style": {
"shape": "rectangle",
"fill_color": "#FFFFFF",
"border_color": "#111827"
},
"data": {}
},
{
"id": "node_email_valid",
"label": "Email Valid?",
"role": "decision",
"lane": null,
"group_id": null,
"position": {"x": 700, "y": 250},
"size": {"width": 120, "height": 100},
"style": {
"shape": "diamond",
"fill_color": "#FEF3C7",
"border_color": "#D97706"
},
"data": {}
},
{
"id": "node_send_verification",
"label": "Send Verification Email",
"role": "process",
"lane": null,
"group_id": null,
"position": {"x": 900, "y": 250},
"size": {"width": 180, "height": 100},
"style": {
"shape": "rectangle",
"fill_color": "#FFFFFF",
"border_color": "#111827"
},
"data": {}
},
{
"id": "node_activate",
"label": "Activate Account",
"role": "process",
"lane": null,
"group_id": null,
"position": {"x": 1150, "y": 250},
"size": {"width": 180, "height": 100},
"style": {
"shape": "rectangle",
"fill_color": "#D1FAE5",
"border_color": "#059669"
},
"data": {}
},
{
"id": "node_end",
"label": "End",
"role": "end",
"lane": null,
"group_id": null,
"position": {"x": 1400, "y": 260},
"size": {"width": 80, "height": 80},
"style": {
"shape": "ellipse",
"fill_color": "#111827",
"border_color": "#111827"
},
"data": {}
}
],
"edges": [
{"id": "edge_1", "from": "node_start", "to": "node_landing", "label": "", "style": {"line_type": "straight", "arrowhead": "standard"}},
{"id": "edge_2", "from": "node_landing", "to": "node_signup_form", "label": "", "style": {"line_type": "straight", "arrowhead": "standard"}},
{"id": "edge_3", "from": "node_signup_form", "to": "node_email_valid", "label": "", "style": {"line_type": "straight", "arrowhead": "standard"}},
{"id": "edge_4", "from": "node_email_valid", "to": "node_send_verification", "label": "Yes", "style": {"line_type": "straight", "arrowhead": "standard"}},
{"id": "edge_5", "from": "node_email_valid", "to": "node_signup_form", "label": "No", "style": {"line_type": "orthogonal", "arrowhead": "standard"}},
{"id": "edge_6", "from": "node_send_verification", "to": "node_activate", "label": "", "style": {"line_type": "straight", "arrowhead": "standard"}},
{"id": "edge_7", "from": "node_activate", "to": "node_end", "label": "", "style": {"line_type": "straight", "arrowhead": "standard"}}
],
"groups": [],
"legend": {
"items": [
{"label": "Process", "shape": "rectangle", "fill_color": "#FFFFFF"},
{"label": "Decision", "shape": "diamond", "fill_color": "#FEF3C7"},
{"label": "Success", "shape": "rectangle", "fill_color": "#D1FAE5"}
]
},
"constraints": {
"layout_lock": false,
"allow_auto_routing": true
}
}
}Example 4: Data Visualization (Quarterly Revenue Chart)
{
"data_viz": {
"meta": {
"spec_version": "1.0.0",
"title": "Q4 2024 Revenue by Region",
"description": "Bar chart comparing regional revenue performance",
"author": "Finance Team"
},
"chart_type": "bar",
"orientation": "vertical",
"canvas": {
"width": 1200,
"height": 800,
"background_color": "#FFFFFF"
},
"data_series": [
{
"id": "revenue_q4",
"label": "Q4 2024 Revenue",
"color": "#2563EB",
"data_points": [
{"label": "North America", "value": 4250000},
{"label": "Europe", "value": 3180000},
{"label": "Asia Pacific", "value": 2890000},
{"label": "Latin America", "value": 1420000},
{"label": "Middle East", "value": 890000}
]
},
{
"id": "revenue_q3",
"label": "Q3 2024 Revenue",
"color": "#93C5FD",
"data_points": [
{"label": "North America", "value": 3950000},
{"label": "Europe", "value": 2980000},
{"label": "Asia Pacific", "value": 2650000},
{"label": "Latin America", "value": 1280000},
{"label": "Middle East", "value": 750000}
]
}
],
"axes": {
"x_axis": {
"label": "Region",
"show_gridlines": false
},
"y_axis": {
"label": "Revenue (USD)",
"min": 0,
"max": 5000000,
"format": "currency_millions",
"show_gridlines": true,
"gridline_color": "#E5E7EB"
}
},
"annotations": [
{
"type": "data_label",
"show": true,
"position": "above",
"format": "$X.XM"
},
{
"type": "callout",
"target_series": "revenue_q4",
"target_point": "North America",
"text": "+7.6% vs Q3",
"style": "badge_green"
}
],
"legend": {
"position": "top_right",
"orientation": "horizontal"
},
"style": {
"font_family": "Inter",
"title_size": 24,
"label_size": 12,
"bar_width": 0.35,
"bar_gap": 0.1,
"corner_radius": 4
},
"constraints": {
"data_lock": true,
"exact_values": [4250000, 3180000, 2890000, 1420000, 890000],
"allow_style_changes": true
}
}
}Example 5: Social Media Graphic (Instagram Post)
{
"social_graphic": {
"meta": {
"spec_version": "1.0.0",
"title": "Product Launch Announcement",
"campaign": "spring_2025_launch",
"brand_name": "Acme Tech"
},
"platform": "instagram_post",
"dimensions": {
"width": 1080,
"height": 1080,
"unit": "px"
},
"background": {
"type": "gradient",
"gradient": {
"direction": "diagonal_bottom_right",
"colors": ["#1E3A8A", "#7C3AED", "#EC4899"]
},
"overlay": {
"type": "noise",
"opacity": 0.05
}
},
"text_layers": [
{
"id": "headline",
"content": "Introducing AcmePod Pro",
"position": "center",
"offset_y": -120,
"style": {
"font_family": "Montserrat",
"font_weight": "bold",
"font_size": 64,
"color": "#FFFFFF",
"text_align": "center",
"max_width": 900,
"line_height": 1.1
}
},
{
"id": "subhead",
"content": "Sound reimagined. Silence perfected.",
"position": "center",
"offset_y": 0,
"style": {
"font_family": "Montserrat",
"font_weight": "medium",
"font_size": 28,
"color": "#E0E7FF",
"text_align": "center",
"max_width": 800
}
},
{
"id": "cta",
"content": "Available March 15 →",
"position": "bottom_center",
"offset_y": -80,
"style": {
"font_family": "Montserrat",
"font_weight": "semibold",
"font_size": 22,
"color": "#FFFFFF",
"background_color": "rgba(255,255,255,0.15)",
"padding": "12px 24px",
"border_radius": 24,
"text_align": "center"
}
}
],
"visual_elements": [
{
"id": "product_image",
"type": "image_placeholder",
"position": "center",
"offset_y": 100,
"size": {"width": 400, "height": 400},
"description": "AcmePod Pro earbuds in floating arrangement",
"effects": ["drop_shadow", "subtle_glow"]
}
],
"brand": {
"logo": {
"asset": "acme_logo_white.png",
"position": "top_center",
"offset_y": 60,
"size": {"width": 120, "height": 40}
},
"primary_colors": ["#1E3A8A", "#7C3AED"],
"fonts": ["Montserrat"]
},
"style": {
"mood": "premium",
"keywords": ["modern", "sleek", "bold", "tech"]
},
"constraints": {
"lock_text_content": true,
"lock_brand_elements": true,
"allow_color_variation": false,
"allow_layout_adjustment": "minor"
}
}
}Iteration Patterns
Once the user has a base JSON spec, guide them through scoped changes:
Change Lighting Only (Marketing)
Modify only the lighting section. Everything else stays locked.
Change Camera Angle Only (Marketing)
Modify only camera.angle and optionally camera.focal_length_mm.
Theme Swap (UI)
Swap token colors while keeping layout and components unchanged.
Add a Component (UI)
Add a new object to the components array with valid screen_id and container_id.
Update Data Values (Data Viz)
Modify values in data_series[].data_points while keeping chart structure and styling.
Change Chart Type (Data Viz)
Swap chart_type from "bar" to "line" or "area" while preserving data and axes.
Platform Resize (Social)
Change platform value and dimensions auto-adjust. Text layers may need position tweaks.
Color Scheme Swap (Social)
Modify background.gradient.colors and corresponding text colors for new mood.
Version History
- v1.1.0 (2025-12-05): Added data_viz and social_graphic schema types
- v1.0.0 (2025-12-05): Initial release with three schema types (marketing_image, ui_builder, diagram_spec)