DEV Community

Cover image for How to Turn Any Article Into an Illustration Series with Claude Code
ZHANG YICHI
ZHANG YICHI

Posted on

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.

AI-generated cover illustration for a blog post about how AI agents use tools via MCP, consistent hand-drawn style
Illustration explaining what MCP is, generated by the SurgePix illustration skill in Claude Code
Illustration showing how tool calling works between an AI agent and external tools, generated with SurgePix
Illustration depicting AI agent security and permission boundaries, part of a consistent illustration set generated by Claude Code and SurgePix

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
Enter fullscreen mode Exit fullscreen mode

3. Set your API key as an environment variable

Windows (PowerShell):

[Environment]::SetEnvironmentVariable("SURGEPIX_API_KEY", "your-key", "User")
Enter fullscreen mode Exit fullscreen mode

Mac/Linux (zsh):

echo 'export SURGEPIX_API_KEY=your-key' >> ~/.zshrc
source ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

4. Verify

node surgepix-setup/scripts/check_env.mjs
Enter fullscreen mode Exit fullscreen mode

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

Claude Code terminal showing the prompt to generate a blog illustration set with the SurgePix skill
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 loading the SurgePix generate-illustrations skill after recognizing the prompt
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.

SurgePix skill returning a download link for the completed illustration set in Claude Code

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

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

Top comments (0)