Whiteboard Diagram Slides upd (1 skill)

Part 1: What You're Getting

This skill turns Claude Code into your whiteboard-diagram studio for YouTube videos. You describe a concept - or point it at a script - and it generates a hand-drawn, whiteboard-style slide: cards, cartoon characters, sketch icons, arrows, and hand-lettered text, all in one cohesive illustration, ready to drop over your video.

One free API key. No design skills needed.

It's powered by Google's Gemini 3 Pro Image Preview model (Nano Banana Pro), and every diagram is generated as a single image - so the text, icons, and characters all share the exact same hand-drawn art style instead of looking pasted together.

How it works:

The skill ships with 5 reference screenshots that define the aesthetic - the soft-pastel, sketch-note whiteboard look. Every time you ask for a diagram, it studies those references, picks the closest layout template, and passes the references to Gemini as style anchors. That's the trick that keeps every slide on-brand.

Two ways to feed it:

  • From a concept - just describe what the slide should show ("a 3-step setup", "the chaos of posting manually to 5 platforms", "this idea as a recipe card") and it builds it.
  • From a script - point it at your script.md with [DIAGRAM: name] markers, and it pulls out every diagram request, reads the surrounding context, and generates all of them.

6 built-in diagram types (each with a tuned prompt template + matching reference):

  • Chaos / Before-After - tangled arrows, an overwhelmed character, "the manual way" energy
  • Card Columns - 3 pastel cards side by side for feature/option overviews
  • Numbered Steps / Checklist - circle badges, checkboxes, sketch icons - great for setups
  • Flow with Branches - a vertical process that branches out to platforms/outputs
  • Recipe / Concept Card - a metaphor card with characters on either side
  • Architecture / Hub-and-Spoke - a core system with spokes radiating to components

What you get:

  • A single 16:9 PNG per diagram (1080p-ready for video overlay)
  • A bundled Python environment so it runs in isolation - no polluting your global Python
  • Built-in iteration - if a slide isn't quite right, it passes the previous attempt back and refines it
  • A full style guide + QA checklist baked in, so output stays in the hand-drawn whiteboard look every time

Anti-patterns it avoids:

  • Bold saturated color blocks (it forces soft pastels - cream, light blue, soft green)
  • A digital/polished look (it stays hand-drawn and whiteboard-y)
  • Fonts that look pasted on (all text is illustrated as part of the image)
  • Foreign-looking icons (every icon is sketched in the same style as everything else)
  • Crowded slides (it enforces generous whitespace)

You need: A free Google AI Studio API key (https://aistudio.google.com/apikey). Gemini's free tier covers a generous number of image generations per day.

Part 2: Copy-Paste This Into Claude Code

Copy everything below and paste it into Claude Code. It will install the skill, walk you through setup, and generate a test diagram.

I want you to install the Whiteboard Diagrams skill and set it up. Here's what to do:

Step 1 - Install the skill:

Run these commands:

git clone https://github.com/bosar-academy/cc-whiteboard-diagrams.git /tmp/cc-whiteboard-diagrams
cd /tmp/cc-whiteboard-diagrams && ./install.sh --all

The install script copies the skill to ~/.claude/skills/whiteboard-diagrams/, creates a Python venv inside that folder with the required dependencies (google-genai, pillow), and stubs a .env file. Confirm all three happened.

Step 2 - Get my Gemini API key:

Tell me to grab a free key from https://aistudio.google.com/apikey and paste it back to you. Once I give it to you, write it to ~/.claude/skills/whiteboard-diagrams/.env in the format:

GEMINI_API_KEY=<my key>

Step 3 - Verify and test:

Confirm the skill is installed at ~/.claude/skills/whiteboard-diagrams/SKILL.md, the venv exists at ~/.claude/skills/whiteboard-diagrams/.venv/bin/python, the 5 reference screenshots are in ~/.claude/skills/whiteboard-diagrams/assets/references/, and my .env has the API key.

Then generate one test diagram to prove the pipeline works end-to-end. Use the "Numbered Steps" template. Make a 3-step "How to Get Started" checklist (Step 1: Pick a topic, Step 2: Describe the slide, Step 3: Generate). Pass the matching reference screenshots as --examples, include the full style block, and save it to /tmp/diagram-assets/test.png. Then open it for me.

After the test, tell me the skill is ready and remind me how to use it:
- Just say "generate slides for my video", "make a diagram of X", or "create a whiteboard illustration of this concept"
- Or point it at a script.md with [DIAGRAM: name] markers and it generates all of them
- It auto-picks the closest of 6 diagram templates and keeps everything in the hand-drawn whiteboard style
← Previous
Next →