DS DevShelfHub Projects · AI tools
Articles / Claude Code + Nano Banana 2: JSON Prompting and Skill-Based Image Generation

AI Engineering

Claude Code + Nano Banana: JSON Prompting and Image Generation

By DevShelfHub

Pair Claude Code with Gemini's Nano Banana models through two skills — a JSON prompter that produces richer-than-human prompts and a generator skill that renders images, supports reference images for multi-turn edits, and drops outputs straight into your project.

Claude Code + Nano Banana: JSON Prompting and Image Generation

Introduction

Nano Banana 2 and Nano Banana Pro are some of the best image generators around right now, but the default way to use them — opening a web UI, typing a short prompt, hoping for the best — leaves most of the quality on the table. Short prompts get short attention; the model needs a richer spec to produce its strongest output.

This guide pairs Nano Banana directly with Claude Code through two custom skills: one that converts plain English into detailed JSON prompts, and one that calls the Gemini image API to render them. The result is a workflow where Claude Code can fan out 20 image jobs in parallel, generate JSON-structured prompts you’d never write by hand, drop the outputs onto a landing page, and let you iterate — all from inside one terminal.

📚 Table of contents

  • Why JSON prompting beats free-text prompts
  • The two-skill recipe at a glance
  • Getting a Gemini API key and setting a spend cap
  • Installing the JSON-prompting skill
  • Building the Nano Banana generator skill
  • Walkthrough: portrait, swap a logo, build a landing page
  • Reference images and multi-turn editing
  • Costs and limits
  • Best practices
  • Common mistakes
  • Frequently asked questions

🪙 Why JSON prompting beats free-text prompts

“A perfume bottle” is a prompt. So is “a glass perfume bottle, soft amber liquid, late afternoon light through linen, on a marble countertop, mid-ground depth of field, 35mm lens, warm cream palette.” The first gets you stock photography. The second gets you a Vogue cover. Most people don’t write the second prompt because they don’t know what fields a great prompt even contains.

JSON-structured prompting solves that by listing the fields explicitly — subject, framing, lighting, surface materials, mid-ground environment, mood, palette — and asking the model to fill each one. The result is far richer than any human is going to type by hand, and the image quality jumps accordingly.

JSON fields worth standardizing

  • type, name, description, mood
  • framing (close-up, wide, top-down), aspect ratio
  • lighting (warm afternoon, cold studio, soft window)
  • surface materials, textures, palette
  • mid-ground / background environment
  • camera (lens, depth of field, focus subject)
  • style references (photography era, illustrator name, brand language)

🍳 The two-skill recipe

Claude Code skills are reusable workflows you can install once and invoke by name from any session. For this pipeline you want two:

Skill 1 — JSON Prompter

Takes a plain-English request (“hero shot of a sneaker on wet asphalt”) and produces a rich JSON prompt with all the fields above filled in. Open-source skill installable via npx.

Skill 2 — Nano Banana Generator

Takes the JSON output, calls the Gemini image API (Nano Banana / Nano Banana Pro), and writes the rendered image to disk. Supports aspect ratios, resolutions, and reference images for multi-turn edits.

🔑 Getting a Gemini API key and setting a spend cap

  1. Open Google AI Studio and accept the terms.
  2. Click Get API key, then Create API key. Name it something like “Claude Code”.
  3. Copy the key. Treat it like a password.
  4. Set up billing — Nano Banana image generation requires a paid tier (with some free credits at start).
  5. Set a spend cap. Go to Spend → Projects → Spending limits and cap it at, say, $10. You’re handing this key to an agent — the cap is your safety net.

⚠️ Anyone with this key can spend money on your behalf. Never paste it into chats or commit it to git. Use environment variables instead.

📥 Installing the JSON-prompting skill

The community skill cloud-code-nano-banana-skills exists on the MCP marketplace and ships with a working JSON prompter out of the box. Install it once and it’s available in every Claude Code session:

  1. Open a terminal where Claude Code (and therefore Node.js) is installed.
  2. Run the published npx skillfish add command for the Nano Banana skill.
  3. When prompted, choose global install so it’s available across projects.
  4. Accept install for all detected agents.
  5. Restart Claude Code. Type / and confirm “JSON prompting for Nano Banana” shows up.

Quick sanity check: ask Claude to generate JSON for “me at a laptop, working on an AI agent, Coca-Cola on the desk.” The skill returns a fully-populated JSON object, often with details you’d never have thought to specify.

🧪 Building the Nano Banana generator skill

The generator is a thin Python wrapper around the Gemini image API. The community version is shared as a zip you download and hand to Claude Code. You don’t need to read or modify the Python — just have Claude wrap it as a new skill.

  1. Download the zip from the skill’s release page and extract it.
  2. Paste the file paths into Claude Code with: “Create a new skill for generating images with Nano Banana using these files. Don’t make any changes — wrap them into a skill and make it available globally.”
  3. Run the install command Claude returns to fetch Python dependencies.
  4. Export the Gemini API key: export GEMINI_API_KEY=... in your shell profile (don’t paste it into Claude chat).
  5. Test with: “Use the Nano Banana skill to generate a 9:16 image of [subject].”

Under the hood the skill calls Gemini 3.1 (or 3.1 Pro for higher quality) for image generation, can accept a reference image for multi-turn edits, and supports aspect ratios from square to vertical 9:16 for social posts.

🎬 Walkthrough

1. Portrait shot

“Generate a 9:16 image of [me / your subject], full-body, holding a Sprite in one hand and a Mac Mini with the OpenClaw logo on it in the other. Use the JSON prompter first, then the Nano Banana skill.”

Claude composes the JSON, calls Nano Banana, saves the image to disk. You see the file appear in your project folder.

2. Logo swap on an existing image

Drop thumbnail1.png in your Downloads. Then prompt: “Swap the Claude logo for a ChatGPT logo in this image. Use the Nano Banana skill and pass the file as a reference.”

The skill passes the file as a reference image to the Gemini API. Output: the original scene with the logo cleanly replaced.

3. Landing page with generated visuals

“Make a sleek landing page for [product]. Generate four hero images via Nano Banana — stagger the angles, vary the palette. Drop them into the page and ship the site.”

Claude fans out four image jobs, waits for each, then composes the Next.js landing page with the new images embedded. End-to-end in a few minutes.

🖼️ Reference images and multi-turn editing

The most overlooked feature: Nano Banana supports passing a reference image and asking the model to modify it. This is what enables logo swaps, character consistency across renders, scene continuation, and iterative refinement without starting over.

Patterns that work well

  • Identity preservation. Generate a base portrait, then ask for variations (different outfit, different setting) using the same reference.
  • Brand consistency. Feed the same logo / colorway / palette as a reference for every asset in a campaign.
  • Iteration without churn. “Same scene, change the lighting to dusk” usually preserves everything else.
  • Composite scenes. Two reference images, ask for a combined composition.

The wrapper skill requires a file path for the reference image, so download or save the source locally before invoking the skill — the agent can’t infer the file from a URL alone.

💰 Costs and limits

Pricing for Gemini image generation is per-call, and a typical 9:16 image is a few cents. A run of 20 images costs roughly the price of a coffee. The bigger risk is forgetting to cap your project — an agent in a loop can burn through credits quickly. Spend caps are the right control here.

  • Set a per-project monthly cap in Google AI Studio
  • Check the usage dashboard after every batch run for the first week
  • Keep Nano Banana 3.1 Pro for the heavy renders; use 3.1 for drafts and ideation
  • Cache JSON prompts — re-running an identical prompt regenerates the image for no reason

✅ Best practices

  • Always JSON first, then render. Skipping the prompt-expansion step costs you 50% of the quality.
  • Use environment variables for the key. Don’t paste it into the conversation.
  • Batch instead of looping. Ask for four images in one prompt rather than four prompts.
  • Save the winning JSON. When a prompt produces a great result, keep the JSON so future runs can re-use it.
  • Use Pro for finals, base model for drafts. Cost scales; quality does too.
  • Pair with a website skill. Generation + composition + deploy is the real unlock, not just images on disk.

❌ Common mistakes

  • Forgetting to set a spend cap on the API project
  • Pasting the API key into a chat — it ends up in logs, history, and the agent’s context
  • Skipping the JSON prompter and asking Nano Banana directly with short prompts
  • Asking for a reference-based edit without first downloading the reference file locally
  • Trying to install per-project when global is what you want for skills you’ll reuse
  • Running 50 image jobs at once with no review checkpoint — you burn credits before iterating
  • Forgetting to restart Claude Code after installing a new skill

Conclusion

Image generation in 2026 isn’t bottlenecked by the model — it’s bottlenecked by the prompt and the surface around it. Pairing Nano Banana with Claude Code via two simple skills moves you from “open a website, type a one-liner, hope” to “describe what you want, get a JSON spec you couldn’t have written by hand, ship the final image straight into a project.”

Start by installing both skills and running the portrait demo. From there, swap in your own assets, extend the workflow to landing pages, and stack creative work on top of the same agent that already writes your code. One terminal, real production output.

Related reading

Claude Code + Nano Banana 2: JSON Prompting and Skill-Based Image Generation FAQ

Is Nano Banana free?

You get some free credits when you first enable the paid tier on Google AI Studio. After that, image generation is per-call, typically a few cents per image. Cap your project to avoid surprises.

Does this work in the Claude Code CLI or only Claude desktop?

Both. Skills are global once installed, so they show up in the Claude Code CLI, Claude desktop, and any IDE extension. The CLI is fastest; the desktop app gives you inline image previews.

Can I use a different image model behind the same skill?

Yes. The generator skill is just a Python wrapper. Point it at GPT Image, Stable Diffusion, or any other provider with a comparable API and the rest of the pipeline (JSON prompting, batching, embedding into pages) keeps working.

How do I keep my API key safe?

Set it as an environment variable in your shell profile (~/.zshrc or equivalent). Never paste it into the Claude chat — the conversation history will include it. If you suspect leakage, regenerate the key from Google AI Studio.

Can I run image generation jobs in parallel?

Yes — the API supports it, and Claude Code will batch jobs together if you ask for several images in one prompt. Watch the spend; parallel runs use credits quickly.

What’s the difference between Nano Banana and Nano Banana Pro?

Pro produces higher fidelity at a higher cost per render. Use base for draft batches and ideation; switch to Pro for finals, hero images, and anything that’s going on a landing page.

Can I extend the skill with my own fields?

Absolutely. The JSON prompter is just a schema and instructions. Add your own fields (brand voice, hard requirements, do-not-use elements) and Claude will populate them on every request.