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.
First exercise: prepare material you can check
Create process.md and paste this practice input. It is a designed handoff example, not a record from a real team:
Five design-handoff steps
1. Designer: confirm page states and interaction notes.
2. Product owner: confirm copy and acceptance criteria.
3. Engineer: confirm component and API dependencies.
4. Tester: confirm normal, empty and error states.
5. Project lead: confirm delivery scope and remaining tasks.
Use the prompt above with this file. Inspect structured-content.md first: five steps and five responsible roles, in the original order, with no invented durations, headcounts or completion rates. Correct the text before rendering.
Confirm layout, aspect, text language and an available backend before generation. Compare the image against the input: all five steps present, roles correctly attached, arrows in sequence and labels readable. A prettier graphic must not silently remove error states. These are acceptance criteria, not a claim that the example was successfully rendered.
Configure rendering and control density
Ask the agent to list image tools available in the current session before assuming you need to purchase API access or obtain a Google key. The current Skill checks an explicit backend named in this request first, then saved EXTEND.md preferences. Automatic selection prioritizes the client's native image capability.
| Available capability | What to do |
|---|---|
| Native imagegen is listed in Codex | Prefer it on the automatic path and follow its own parameters; this does not require GOOGLE_API_KEY. |
| Cursor exposes GenerateImage | Follow its own file and parameter conventions, describing the aspect in the prompt rather than assuming Codex-compatible arguments. |
| No native tool, but one installed non-native backend | Use that backend, such as baoyu-image-gen, after checking its provider, model and credentials. |
| Multiple unresolved backends, or preference set to ask | Confirm with the user. If none is available, stop and resolve rendering access first. |
EXTEND.md is searched in the project's .baoyu-skills/baoyu-infographic/, the XDG config directory and the home .baoyu-skills/baoyu-infographic/, in that order; the first match wins. If the wrong backend keeps appearing, inspect project preferences and the current request before reinstalling. Preferences guide recommendations; they do not automatically waive generation confirmation.
Only the Google API path needs your GOOGLE_API_KEY for that path. Keep it out of process.md, prompts and Git. Native tools may still have account eligibility and usage limits: not needing a separate Google key does not mean unlimited free images. Establish text before rendering text-heavy material.
Save the full final prompt to prompts/infographic.md before generation. Its text and settings are the basis for reuse and troubleshooting. If you get layout advice but no PNG, check whether a backend was actually invoked and where its output was saved. Do not silently substitute SVG or an HTML screenshot for the requested raster output. Correct faulty lettering in the prompt and regenerate instead of covering it with programmatic text overlays.
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.