Use baoyu-article-illustrator to explain tutorials, methods, and longer articles visually. It analyzes structure and distinguishes processes, comparisons, frameworks, and timelines before choosing positions. Not every paragraph benefits from a decorative image.
Install and invoke
Run this in your project terminal to install only this skill for Claude Code:
npx skills add jimliu/baoyu-skills --skill baoyu-article-illustrator -a claude-code
Node.js and npx must be available. For Codex, replace -a claude-code with -a codex. In the agent conversation, explicitly ask it to use baoyu-article-illustrator and supply your material. The installation command belongs in the terminal, not in your content brief.
Establish the image backend
The installed skill supplies the workflow; rendering still needs an available image tool. For a separate API route, install baoyu-image-gen selectively and complete provider, model, and preference setup. Its Google route uses your GOOGLE_API_KEY. Keep credentials out of articles and prompts. Without a backend, an illustration plan remains a plan.
First use creates preferences such as .baoyu-skills/baoyu-article-illustrator/EXTEND.md, with project settings taking precedence.
Example brief:
Use baoyu-article-illustrator for handoff.md.
Readers are handling their first project handoff. Use at most three images where process or responsibility is hard to understand.
First show placement, purpose, image content, and type. Suggest minimal styling with one palette.
Generate after confirming the outline and backend. Preserve all factual statements and figures.
Give every image an explanatory job
Use flowchart for processes, comparison for alternatives, and framework for relationships or layers. Style and palette are separate choices; visual appeal should not distort information. A metaphor should clarify the underlying concept rather than merely draw the literal object mentioned in the prose.
The confirmed workflow saves outline.md and an individual prompts/NN-type-topic.md before rendering. Images commonly go into an imgs/ folder beside the article, with other locations configurable. The outline should identify the exact insertion point and the information each image conveys.
Review figures, labels, arrow direction, and comparison relationships at the article's actual display width. Google's image documentation also recommends establishing text before rendering, supporting a text-first review. Correct errors by revising the saved prompt and regenerating or reducing on-image text, rather than accepting a candidate solely for its attractive style.
Check relative Markdown paths and compare the actual success count with the outline. Preserve earlier candidates when revising one illustration and avoid rerunning correct images unnecessarily. When the article changes, inspect whether its illustrations still express the same version of the facts.
Try it on an article with a genuine explanation problem
For a tutorial about a request moving from intake to release, first mark the two places readers may confuse: whether approval and implementation are sequential, and where a failed release loops back. Ask the agent to propose images only for those points, not one per paragraph. A flowchart could show owners and return paths; a comparison could contrast a normal release and a rollback. Each item in the outline should identify its paragraph. The prose must still state the facts for readers who skip the image.
At outline review, ask what relationship becomes harder to grasp if an image disappears; remove images with no good answer. After rendering, match every label against the article. If an owner name or arrow direction is wrong, correct the saved prompt and regenerate only that image. If the outline already invented a step, return to content analysis rather than changing the image backend or art style.
Set a visual rule for the whole series
To make a set of illustrations feel like one article, state the series rules in the first request: which passage each image explains, consistent line and color treatment, no more than one short line of text per image, and the target ratio. In a public X thread, Jinchenma attached an article to Claude Code and used baoyu-article-illustrator to draft 16:9 doodle prompts section by section. They saved the prompts and rendered the images in a separate tool rather than configuring an image API. This separates two acceptance points: prompts created and images actually rendered. Review the prompts for explanatory value, then inspect the final text and visual consistency in the images.