Generate Blog Images, Favicons, and Product Visuals Inside Claude Code With Nano Banana

The Context Switch Nobody Talks About

You're mid-session in Claude Code. You've just shipped a new blog post or updated a landing page. Now you need a featured image.

So you open a browser, navigate to Midjourney or DALL-E, type a prompt, download the file, rename it, drag it into your project, and run an optimization pass. Twelve minutes later you're back to coding — except now you've lost your flow and forgotten what you were doing.

This is the tax that visual content puts on developers who write. It's small per occurrence, but it compounds fast.

Nano Banana eliminates it. It's a Claude Code skill that lets you generate and edit images from inside your terminal — same session, same context, no switching. You describe what you want, it generates it, and drops the file into your project directory.

Here's how to set it up and how we actually use it.

---

What Nano Banana Is

Nano Banana is a Claude Code skill built by Keanan Koppenhaver that wraps the Gemini CLI's nanobanana extension. When installed, Claude automatically routes any image generation request through it — no special command needed unless you want to be explicit.

Under the hood, it uses Google's gemini-2.5-flash-image model (roughly $0.04 per image) with an optional upgrade path to gemini-3-pro-image-preview for higher-quality output.

The skill handles:

• Text-to-image generation — describe an image, get an image
• Image editing — modify an existing file with a natural language instruction
• Icon and favicon generation — properly sized UI assets
• Diagrams — flowcharts, architecture diagrams, system maps
• Seamless patterns — background textures and repeating elements
• Photo restoration — fix old or damaged photos
• Sequential images — narrative or story-style image sets

---

Setup (10 Minutes, One-Time)

1. Install the Gemini CLI

npm install -g @google/gemini-cli

2. Get a Gemini API key

Go to Google AI Studio, create a key, and export it:

export GEMINI_API_KEY="your-key-here"

Add this to your .zshrc or .bashrc so it persists.

3. Install the nanobanana extension

gemini extensions install https://github.com/gemini-cli-extensions/nanobanana

Verify it installed:

gemini extensions list | grep nanobanana

4. Install the skill into Claude Code

git clone https://github.com/kkoppenhaver/cc-nano-banana ~/.claude/skills/nano-banana

That's it. Restart Claude Code and the skill is active. No configuration files to edit.

---

Use Case 1: Blog Featured Images

This is where we use it most. Every blog post needs a featured image that works at 1200×630 (the standard Open Graph preview size). Getting this right used to mean opening a design tool or a separate AI image generator.

Now:

Generate a blog header image for a post about using AI to automate SEO content.
Modern flat illustration style, purple and blue gradient, clean minimalist,
no text in the image. 1200x630.

Claude routes this to:

gemini --yolo "/generate 'modern flat illustration, AI automating SEO content workflow,
purple and blue gradient, minimalist, no text' --aspect=16:9 --preview"

The file lands in ./nanobanana-output/ with a timestamp. You rename it, optimize it, and drop it into your post.

Prompting tips for blog images:

• Always say "no text" — generated text in images is almost always unreadable
• Specify a style early (flat illustration, editorial photo, abstract, isometric)
• Name the color palette — vague prompts produce inconsistent colors across a post series
• Use --count=3 to get variations and pick the best one

---

Use Case 2: Favicons and App Icons

Favicons are annoying to commission and overkill to open Figma for. Nano Banana's /icon command is purpose-built for this.

Create a favicon for Maximal Studio. The brand is a minimal geometric shape,
dark background, white or electric blue accent. Professional, modern, no text.

This calls:

gemini --yolo "/icon 'minimal geometric mark, dark background, electric blue accent,
professional AI studio brand, no text'"

The output is a square image ready to resize into your favicon pipeline. For a full set (16px, 32px, 180px for Apple touch icon), generate one high-resolution version and run it through a standard favicon generator.

For product icon sets:

Create 3 variations of an app icon for a lead generation SaaS.
Clean, modern, flat design. Dark navy background, orange accent. No text.

Use --count=3 to get the variations in a single call.

---

Use Case 3: Product and Marketing Images

If you're shipping a SaaS product, landing page, or case study, you regularly need images that explain what the product does — without a design team on call.

Dashboard mockup context:

Create a product marketing image showing a clean analytics dashboard
on a laptop screen. Abstract data visualizations, green and dark theme.
Professional, no real brand logos.

Abstract "how it works" illustrations:

Illustration showing three connected nodes representing data pipeline:
scrape, process, publish. Clean isometric style, gradient blue background,
white icons. No text labels.

Social media preview cards:

Square social card (1080x1080) for a blog post announcement.
Dark background, bold abstract shapes in purple and orange.
Visual interest only, no text.

For social cards you'll add text as an overlay in your CMS or design tool — the image just needs to be a strong visual that doesn't compete with text you'll place on top.

---

Use Case 4: Editing Existing Images

The /edit command is underused. You can pass in an existing image file and give it a natural language instruction:

Remove the background from this product screenshot and make it transparent.

gemini --yolo "/edit product-shot.png 'remove background, make transparent'"

Other useful edits:

• "Change the background color to dark navy"
• "Add a subtle drop shadow to the main element"
• "Make this feel more professional, reduce visual noise"
• "Convert this to grayscale with a single orange accent"

This works well for taking a rough screenshot or export and cleaning it up without going into Photoshop.

---

Use Case 5: Diagrams and Technical Illustrations

If you write technical content or create architecture docs, the /diagram command generates flowcharts and system diagrams from a plain description.

Draw a flowchart showing how our blog automation pipeline works:
GSC MCP Server → Claude identifies keyword gaps →
DataForSEO validates search volume →
Claude writes draft → Human review → Publish

gemini --yolo "/diagram 'blog automation pipeline flowchart: GSC MCP Server →
keyword gap analysis → DataForSEO validation → draft generation →
human review → publish. Clean, minimal, dark background'"

These aren't as precise as a dedicated diagramming tool — but for blog illustrations and explainer images, they're good enough and take seconds instead of minutes.

---

The Commands, Summarized

What you want	Skill command	Typical prompt pattern
Blog header	/generate	Style + color palette + "no text" + aspect ratio
Favicon / app icon	/icon	Brand adjectives + color scheme + "no text"
Product marketing image	/generate	Context + style + tone
Edit an existing file	/edit filename 'instruction'	Specific change in plain English
System diagram	/diagram	Step-by-step description of the flow
Background texture	/pattern	Material + mood + color
Sequential story images	/story	Narrative description

Add --count=3 to get variations. Add --preview to auto-open the result.

---

Cost Reality Check

At $0.04 per image on the default gemini-2.5-flash-image model, generating 25 images a month costs $1. Even if you're iterating heavily — generating 3 variations per asset and throwing away 2 — the cost is negligible compared to any stock photo subscription or design tool seat.

The higher-quality gemini-3-pro-image-preview model costs more but produces noticeably better output for product-facing images where quality matters. For internal diagrams and draft blog headers, the default model is fine.

---

What It Doesn't Replace

Nano Banana isn't a replacement for a designer. If you need brand-consistent, polished visuals for a major campaign — the kind of thing that goes on a billboard or a Series A pitch deck — you need a human with taste and context.

What it replaces is the category of images that are "good enough to ship" — a blog post header that won't embarrass you, a favicon that looks intentional, a product explainer image that communicates the idea without requiring a Figma file.

That's the majority of images most developer-run products actually need. The professional stuff is the exception, not the rule.

---

Get Started

1. npm install -g @google/gemini-cli
2. Get your key at aistudio.google.com
3. gemini extensions install https://github.com/gemini-cli-extensions/nanobanana
4. git clone https://github.com/kkoppenhaver/cc-nano-banana ~/.claude/skills/nano-banana
5. Restart Claude Code and ask it to generate an image

The first time you use it, describe exactly what you need and let Claude handle the command construction. Once you've seen a few outputs you'll get a feel for which prompting patterns work for your brand's visual style — and the whole workflow becomes as fast as asking a question.

If you want to see this kind of tooling applied to your content or product workflow, book a free AI audit. We'll look at where you're losing time to tool-switching and what a tighter setup looks like for your team.