Use baoyu-infographic for a standalone image explaining relationships such as steps, alternatives, categories, or layers. Layout and visual style are separate, so information should determine the composition. Organize and verify unsettled source material before asking for an 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-infographic -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-infographic and supply your material. The installation command belongs in the terminal, not in your content brief.
Treat every label as content to review
Provide reliable material and the relationship readers should understand. Processes need order and branches, comparisons need consistent dimensions, and categories need accurate membership. The image model should not invent facts while arranging them.
Example brief:
Use baoyu-infographic to make a landscape graphic from process.md.
Explain the five design-handoff steps, using the exact labels and owners in the file.
Save structured-content.md first so I can check every label and the sequence.
Suggest linear-progression with ikea-manual styling. Generate after confirming ratio, language, and backend.
Recommendations are adjustable. Two options may suit binary-comparison, multiple dimensions comparison-matrix, and recurring relationships circular-flow. Layout controls reading order while style controls line treatment and material. Avoid collapsing both into a vague request for a technological look.
Configure rendering and control density
An image tool must be available in the current client. A separate API route can use baoyu-image-gen after provider and model setup. Its Google path uses your GOOGLE_API_KEY; keep credentials out of source content. Establish text before rendering text-heavy images.
The output folder normally sits under infographic/topic/ with sources, analysis.md, structured-content.md, saved prompts, and infographic.png. Check every figure, quotation, and unit in the structured document. If material needs shortening, revise the input or explicitly request a summary rather than letting aesthetic adjustments silently change facts.
Inspect each panel in the intended reading order and at mobile display size. Check labels, legends, arrows, and color distinctions. Density is an optional format, not a measure of professionalism. If the information does not fit, reduce scope or split it into several images rather than continually shrinking the text.
Correct lettering by updating the prompt and regenerating, retaining earlier candidates for comparison. Precisely scaled statistics or publication-quality scientific charts require a verifiable plotting workflow; generated visual proportions are not measurements. Keep a text explanation and provenance alongside the graphic for maintenance and readers who cannot use the image.
Approve the text version of a comparison first
To compare three deployment options by cost, scale, and maintenance ownership, first write a structured table with the same measure in each column. Mark unknown values as unverified rather than putting unlike numbers from different sources into one graphic. A comparison-matrix may fit three options and three criteria; a journey from sign-up to a completed task may fit linear-progression better. Choose layout for the relationship, not because the default bento-grid happens to look attractive.
Read structured-content.md before rendering and check every unit, compared item, condition, and source. Fix omissions there rather than asking an image model to repair a visual. Read the resulting graphic from start to end at mobile size. If labels become tiny or the order is unclear, reduce its scope or split the content into two graphics. Keep a copyable text version as the reliable representation of exact numbers and for readers whose images do not load.
Check every item along the visual flow
Check the information structure before the visual polish. In a five-scenario demonstration by 302.AI, the caffeine timeline used an appropriate flow layout but duplicated a step and included material outside the main sequence. For a science explainer or product guide, ask for a plain-text list of nodes, order, and one line per node first. Remove duplicates and irrelevant items before choosing layout, style, and ratio. After rendering, follow the arrows and verify each number, term, and transition. A polished graphic can still teach the wrong sequence.