Smart Illustrator

Turns any markdown article, slide script, or topic into illustrations, infographics, and cover images using Gemini, Excalidraw, and Mermaid.

Image & VideoIntermediate★ 536⑂ 82AI score 8/10Last updated: Jun 26, 2026

What it does

It reads your markdown, decides where visuals belong (typically 3–5 spots), then picks the right rendering engine for each one.

Article mode (default): analyze content, generate images, output {article}-image.md with a cover in the frontmatter
Slides mode: batch-generate one 16:9 infographic per section from a script
Cover mode: platform-sized covers for YouTube (16:9), WeChat (2.35:1), Twitter (1.91:1), Xiaohongshu (3:4)
Three-tier engine routing: Gemini for metaphor/creative art, Excalidraw for hand-drawn concept and comparison diagrams, Mermaid only for complex flows above 8 nodes (with a fixed semantic color palette)
--prompt-only skips the API entirely and hands you a JSON prompt to paste into Gemini Web
--style light / dark / minimal / bento for consistent visual tone, including Bento Grid feature showcases

Who it's for

Bloggers and newsletter writers tired of hand-making diagrams for every post
Course creators converting lecture scripts into slide infographics
Creators who need consistent YouTube thumbnails and social covers
Engineers who find plain Mermaid too flat and want Excalidraw-style sketches

Examples

/smart-illustrator posts/agent-loop.md — produces a cover plus 3–4 inline images and writes agent-loop-image.md
/smart-illustrator lesson-03.md --mode slides --prompt-only — emits a batch JSON prompt to the clipboard for manual generation in Gemini Web
/smart-illustrator --mode cover --platform youtube --topic "Claude 4 deep dive" — generates just the 16:9 thumbnail
/smart-illustrator architecture.md --engine excalidraw -c 2 — forces sketch-style diagrams and returns two candidates each

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/axtonliu/smart-illustrator/HEAD/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.

↓ Download ZIP

Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the SKILL.m folder from the GitHub repo axtonliu/smart-illustrator into my ~/.claude/skills/smart-illustrator/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/axtonliu/smart-illustrator.git ~/.claude/skills/smart-illustrator

⚠ This is a third-party skill. Check the source repository before installing.

Open a terminal and make sure the skills directory exists: mkdir -p ~/.claude/skills
Clone the repo: git clone https://github.com/axtonliu/smart-illustrator.git ~/.claude/skills/smart-illustrator
Confirm the styles/, scripts/, and references/ folders came along: ls ~/.claude/skills/smart-illustrator
Export a Gemini API key so image generation works: echo 'export GEMINI_API_KEY=your_key' >> ~/.zshrc && source ~/.zshrc
Verify Node/npx is available with npx -v (install Node.js LTS if not); bun is fetched automatically via npx -y bun.
Restart Claude Code and run /smart-illustrator your-article.md
To test without an API key, add --prompt-only. Clipboard copy uses macOS pbcopy; on Windows/Linux read the backup file saved in /tmp instead.

View source on GitHub ↗License: MIT