Explain It With Pictures — AI skill for Claude Code

Explain It With Pictures

An open-source skill for AI coding agents (Claude Code, opencode, Cursor, Codex…) that turns any codebase into **illustrated, annotated explanations a non-technical person can follow**.

Built for **vibe coders** — people who build working software by prompting AI and end up owning something they can't fully explain. Ask your agent *"explain how my project works"* and instead of a wall of jargon you get a single illustrated HTML document: hand-drawn diagrams with numbered story steps, labeled arrows, plain-words captions, an annotated file tree, and a glossary.

 *A diagram the skill produced for a small real app. Every box is dual-labeled (plain words + the real filename), every arrow says what travels on it, numbers tell the story in reading order.*

Free and simple, on purpose

• Hand-drawn, not AI-generated. The agent draws SVG diagrams itself. Text stays crisp, edits are one-line changes, files stay tiny — and it never calls an image-generation API.
• One self-contained file. No dependencies, no CDNs, no build step. Opens offline in any browser, prints to PDF cleanly.
• Zero paid services. No accounts, no network calls, no API keys.
• Readable by someone who has never coded. Every technical word is defined at first use and gathered into a glossary; every diagram ends with an "In plain words:" analogy caption.

What you get

Ask your agent:

"Explain how my project works — illustrate it. I built this with AI and don't really understand it."

You'll get `docs/how-it-works.html` in your project, containing:

1. A one-paragraph, zero-jargon summary
2. The big picture — every part and how they connect
3. What happens when you… — a "day in the life" diagram per user action
4. Your data opened up and labeled, field by field
5. The cast of characters — every file in one human sentence, including what happens if you delete