Our review

Generates hand-drawn visual note illustrations from slide content and inserts them into MDX files using the Gemini API.

Strengths

Automatically extracts slide text and theme colors for consistent styling.
Supports both text-based and screenshot-based content extraction.
Saves images to the correct assets directory and inserts them with proper MDX formatting.

Limitations

Requires a GEMINI_API_KEY to be set in the environment.
Screenshot method requires a running development server.
Only supports the Gemini 3.1 Flash image model.

When to use it

When you want to create engaging graphic recording style visuals from presentation slides with minimal manual effort.

When not to use it

When you need photorealistic images or complex compositions beyond hand-drawn visual notes.

Examples

Create graphic recording for first slide

グラレコを生成して。デッキは product-launch、スライド1の内容をグラレコ風にして挿入して。

Generate visual notes from current slide screenshot

Take a screenshot of the current slide in deck 'tech-talk' and generate a graphic recording style image, then insert it.

Graphic recording for topic 'architecture'

Run graphic recording for the 'architecture' section of my 'system-design' deck.

name: graphic-recording description: | Graphic recording style image generation skill. Takes slide text or screenshots as input, generates a hand-drawn visual note illustration that follows the deck's theme colors, saves it to the deck's assets directory, and inserts it into the MDX file. Uses Gemini API (gemini-3.1-flash-image-preview). Triggers: "グラレコ", "グラフィックレコーディング", "graphic recording", "グラレコ風", "グラレコを生成" allowed-tools:

Bash
Read
Write
Edit
Glob
Grep

graphic-recording Skill

Generate graphic recording style visual note illustrations from slide content. Reuses the nanobanana-image skill's generation scripts.

Prerequisites

GEMINI_API_KEY set in .env.local

Workflow

Step 1: Identify Target Slide

Determine from user request:

Target deck: directory name under decks/
Source slide: which MDX file's content to visualize
Insertion target: same slide or a different one

Ask if unclear.

Step 2: Extract Slide Content

Method A: Text-based (preferred) Read the target MDX file and extract text content.

Method B: Screenshot-based If dev server is running, capture the slide and analyze visually:

npx tsx .claude/skills/nanobanana-image/scripts/capture-slide.ts \
  --deck <deck-name> \
  --slide <0-indexed> \
  --output /tmp/slide-capture.png

Step 3: Extract Theme Colors

Read the deck's deck.config.ts and extract:

primary — main color (headings, emphasis borders)
accent — accent color (highlights, arrows)
background — background color
text — body text color
surface — surface color (card backgrounds)

Step 4: Build Prompt

Combine slide text content and theme colors into a graphic recording style prompt.

See references/prompt-guide.md for prompt construction guidelines.

Always present the prompt to the user for confirmation before generating.

Step 5: Generate Image

Use the nanobanana-image generation script:

npx tsx .claude/skills/nanobanana-image/scripts/generate-image.ts \
  --prompt "<constructed prompt>" \
  --output "decks/<deck>/assets/<filename>.png" \
  --aspect-ratio 16:9 \
  --resolution 2K

Default aspect ratio: 16:9 (full-width slide usage)
Filename: graphic-recording-<topic>.png (kebab-case English)

Step 6: Insert into MDX

<img src="./assets/<filename>.png" alt="..." style={{ width: "100%", borderRadius: "0.8rem" }} />

Use relative path ./assets/ (resolveAssetPaths() auto-converts)
Adjust width and placement based on slide layout

Step 7: Report Results

Generated image file path
Prompt used
How to verify on dev server

Graphic Recording Generation

Recommended for