Help us improve
Share bugs, ideas, or general feedback.
From nano-banana
Transforming natural language into structured JSON schemas for Nano Banana Pro image generation. Useful for reproducible marketing images, UI mockups, diagrams, data visualizations, and social graphics with precise control.
npx claudepluginhub jawhnycooke/claude-plugins --plugin nano-bananaHow this skill is triggered — by the user, by Claude, or both
Slash command
/nano-banana:creating-image-schemasThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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).
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Share bugs, ideas, or general feedback.
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).
Use this skill when the user wants to:
Do NOT use this skill when:
The power of JSON prompting is the handle concept. Every important element gets a stable identifier:
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 iterationui_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 lockdiagram_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 permissionsdata_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 specifiedsocial_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)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.
For Marketing Images:
For UI/UX:
For Diagrams:
For Data Visualizations:
For Social Graphics:
Build a complete JSON object with the appropriate root key. Ensure:
Tell the user:
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
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"
}
}
}
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
}
}
}
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
}
}
}
{
"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
}
}
}
{
"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"
}
}
}
Once the user has a base JSON spec, guide them through scoped changes:
Modify only the lighting section. Everything else stays locked.
Modify only camera.angle and optionally camera.focal_length_mm.
Swap token colors while keeping layout and components unchanged.
Add a new object to the components array with valid screen_id and container_id.
Modify values in data_series[].data_points while keeping chart structure and styling.
Swap chart_type from "bar" to "line" or "area" while preserving data and axes.
Change platform value and dimensions auto-adjust. Text layers may need position tweaks.
Modify background.gradient.colors and corresponding text colors for new mood.