Notre avis

Transforme le contenu d'une diapositive en illustration de type prise de note graphique (graphic recording) en utilisant l'API Gemini et les couleurs du thème du deck.

Points forts

Génère des visuels cohérents avec la charte graphique du deck (couleurs primaires, accent, arrière-plan)
Capture soit le texte directement soit une capture d'écran de la diapositive
Intègre automatiquement l'image générée dans le fichier MDX avec le bon chemin relatif
Propose le prompt à l'utilisateur pour validation avant génération

Limites

Nécessite une clé API Gemini configurée dans les variables d'environnement
Dépend d'un script externe (nanobanana-image) pour la génération et la capture d'écran
La qualité du résultat repose sur la clarté du prompt et des couleurs extraites

Quand l'utiliser

Quand vous voulez enrichir une présentation avec une illustration visuelle synthétique et artistique reprenant le contenu d'une diapositive sous forme de sketchnote.

Quand l'éviter

Si vous avez besoin d'une illustration extrêmement précise ou réaliste, ou si vous ne disposez pas d'une clé API Gemini.

Exemples

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

Génération d'enregistrements graphiques

Recommandé pour