nanobanana-image

Generate slide images via the Gemini API and insert them into MDX content.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/co-r-e/dexcode --skill nanobanana-image
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nanobanana-image
Source: https://github.com/co-r-e/dexcode/tree/main/.claude/skills/nanobanana-image
Command: npx skills add https://github.com/co-r-e/dexcode --skill nanobanana-image

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/genai, and includes scripts (resource) components.

AI image generation skill. Uses Gemini API (gemini-3.1-flash-image-preview) to generate high-quality images for slides, saves them to the deck's assets directory, and inserts them into MDX. Triggers: 「画像を生成」「画像を作って」「イメージを生成」「generate image」「create image」

What problem does it solve?

Automates the creation of visually engaging slide imagery by generating images from prompts and embedding them into the slide deck, eliminating manual image sourcing and design time.

Core Features & Use Cases

  • Gemini-powered image generation for slides and decks
  • Saves generated images to decks/<deck>/assets and inserts references into MDX
  • Supports end-to-end workflow from prompt to in-situ image placement for presentations
  • Use Case: Add a hero image to a slide deck without leaving Claude Code

Quick Start

Run the nanobanana-image workflow in Claude Code to generate a Gemini-powered image for your slide and automatically insert it into the deck's MDX file.

Frequently Asked Questions about nanobanana-image

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate AI images for slides and insert them into MDX content?

To generate AI images for slides, the Skill uses the Gemini API to create high-quality visuals and automatically inserts references into your MDX content. It handles output paths, saving images to the deck's assets directory and embedding them via relative paths.

How does automated image generation work within Claude Code workflows?

Automated image generation within Claude Code works by triggering the Skill with prompts like 'generate image', which then calls the Gemini API, saves the output to decks/<deck>/assets, and updates the slide's MDX file with the image reference.

Do I need a Gemini API key to generate slide deck assets?

Yes, you need a GEMINI_API_KEY to generate slide deck assets. The Skill requires this prerequisite key to authenticate requests to the Gemini API for producing 1K, 2K, or 4K resolution images with various aspect ratios.

Can I use this to add a hero image to a presentation deck without leaving my code editor?

Yes, you can use this to add a hero image to a presentation deck without leaving your editor. The end-to-end workflow generates the image via Gemini and places it directly into your MDX slide content using relative paths.

What image resolutions and aspect ratios are supported when generating deck visuals?

When generating deck visuals, the Skill supports 1K, 2K, and 4K resolutions along with various aspect ratios. This flexibility ensures the generated images fit different slide layouts and visual requirements.