Notre avis

Génère des illustrations de prise de notes visuelles dessinées à la main à partir du contenu des diapositives et les insère dans des fichiers MDX via l'API Gemini.

Points forts

Extrait automatiquement le texte des diapositives et les couleurs du thème pour un style cohérent.
Propose une extraction par texte ou par capture d'écran.
Enregistre les images dans le bon dossier et les intègre avec un formatage MDX approprié.

Limites

Nécessite une clé API Gemini configurée dans l'environnement.
La méthode par capture d'écran nécessite un serveur de développement en cours.
Ne supporte que le modèle Gemini 3.1 Flash image.

Quand l'utiliser

Lorsque vous souhaitez créer facilement des visuels de type graphique recording à partir de diapositives de présentation.

Quand l'éviter

Lorsque vous avez besoin d'images photoréalistes ou de compositions complexes au-delà de notes visuelles dessinées.

Exemples

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

Génération d'enregistrements graphiques

Recommandé pour