How to Turn Any Article Into an Illustration Series with Claude Code

I never opened a design app for this.

One prompt in Claude Code, and I had a full set of blog illustrations — a cover image plus three section illustrations — same character, same style, consistent 16:9 layout, ready to drop into a post.

Here's the exact setup, in case you want the same thing.

The problem with most AI image tools

If you've generated images with an LLM before, you know the annoying part: consistency. Ask for four illustrations on related topics, and you'll usually get four different styles, four different "main characters," sometimes four different color palettes. Fine for a single hero image. Useless for a matching set.

For a blog post that needs multiple illustrations — a cover plus a few section images — that inconsistency is a dealbreaker. Nobody wants a post where every illustration looks like it came from a different artist.

The fix: lock the style into a skill, not a prompt

Instead of re-describing the style every time and hoping the model cooperates, I used SurgePix's generate-illustrations skill for Claude Code. It's one of nine open-source agent skills that let coding agents (Claude Code, Cursor, Codex CLI, Gemini CLI) call SurgePix's image API directly — no browser, no dashboard, just natural language in your terminal.

The skill handles the consistency problem at the generation level: same character, same linework, same palette, across every image in a set — because the style constraints are baked into how the skill calls the API, not left to chance in a one-off prompt.

Setup (3 minutes)

1. Get your API key

Go to surgepix.ai → Settings → API Management → + New Key.

2. Install the skill

npx skills add SurgePix/agent-skills

3. Set your API key as an environment variable

Windows (PowerShell):

[Environment]::SetEnvironmentVariable("SURGEPIX_API_KEY", "your-key", "User")

Mac/Linux (zsh):

echo 'export SURGEPIX_API_KEY=your-key' >> ~/.zshrc
source ~/.zshrc

4. Verify

node surgepix-setup/scripts/check_env.mjs

If that prints your key back, you're done. Restart your terminal/agent if it doesn't pick it up right away.

Works with Claude Code, Cursor, Codex CLI, Gemini CLI, and any agent that supports the SKILL.md standard.

Generating the set

Once it's installed, you don't need to remember any commands — just describe what you want in plain language. Here's the actual prompt I used:

Generate a set of blog illustrations for my post about how AI agents use tools via MCP: one cover, and 3 section images — "what is MCP", "how tool calling works", "security". Use the same character in all four. Consistent hand-drawn style, 16:9.

Claude Code recognized the request, loaded surgepix-generate-illustrations, checked the environment, and generated all four images in one pass — returning a download link when it finished. No manual regeneration, no style drift between images.

Why this matters beyond illustrations

This is really a pattern, not a one-off trick: agent skills let you offload an entire workflow — not just a single API call — to natural language. The same approach works for other SurgePix skills in the repo: posters, presentations (with real .pptx export, not just images), background removal, image translation, and more. If you're writing technical content and hand-drawing (or Canva-ing) your own illustrations, this is worth trying.

Try it yourself

• Full illustration skill demo (video)
• Skills repo (open source): github.com/SurgePix/agent-skills
• Full install + first-generation walkthrough (video)
• Docs: surgepix.ai/blog/developer-guides/install-skills

If you try it and get stuck, drop a comment — happy to help debug.