Our review

Generates a hand-drawn visual note illustration from slide content using the Gemini API and the deck's theme colors, then inserts it into the MDX file.

Strengths

Creates visuals that match the deck's color scheme (primary, accent, background, text, surface)
Supports both text extraction and screenshot-based capture of the target slide
Automatically inserts the image into the MDX with correct relative path
Always prompts the user for confirmation before generating the image

Limitations

Requires a valid Gemini API key set in the environment
Relies on external nanobanana-image scripts for capture and generation
Quality depends on the prompt construction and extracted theme colors

When to use it

When you want to transform a slide's content into a visually appealing, synthetic sketchnote-style illustration that matches the deck's design.

When not to use it

If you need highly accurate or photorealistic imagery, or if you lack a configured Gemini API key.

Examples

Graphic recording from slide text

グラレコを生成。デッキ名: product-launch, スライド: 03-intro.mdx

Graphic recording from screenshot

Generate a graphic recording for the current slide in deck 'quarterly-review' based on a screenshot.

Custom graphic recording

Create a graphic recording illustration for slide 5 in deck 'design-sprint' using its theme colors and content.

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