guizang-material-illustration: AI Illustration Skill for Claude Code Agents

The Center Image Problem the Skill Is Built to Solve

Content in social posts, presentations, reports, and educational materials often needs one image that explains a central concept rather than decorating the page. A flow diagram, a mechanism chart, a labeled architecture overview: these are distinct from a stylistic background or a stock photo. They carry meaning on their own and should hold up when the surrounding text is removed.

guizang-material-illustration is built to produce that category of image inside a Claude Code or Codex agent environment. It targets Chinese-language content production specifically: the default output includes Chinese-language labels in the image itself, which is a meaningful constraint because many AI image generators produce garbled or absent CJK text when labels are part of the prompt. The README describes the skill's main purpose as solving the center-image problem for social cards, articles, PPT slides, and documentation.

Three Modes: Explanatory Diagram, Chart Beautification, and Reference-Assisted Illustration

The skill handles three distinct input scenarios. The first is an explanatory diagram: the user provides abstract text, a concept description, a process, or a system relationship, and the skill generates a labeled diagram with a Swiss editorial composition, soft 3D materials, and a restrained color palette. The default accent color is IKB blue (International Klein Blue), with lemon yellow, lime green, safety orange, and graphite black as documented alternatives.

The second mode is chart beautification. When the input is a screenshot of an existing chart or a raw dataset, the skill extracts the chart type, title, axis labels, units, data values, error bars, and any conclusions before generating a new chart in the Guizang material style. The README is direct about the goal: the output is not a reskin of the original screenshot, but a version that communicates the data faster. Values, coordinates, and units are preserved without alteration.

The third mode is reference-assisted illustration. For obscure concepts, brand logos, scientific instruments, historical objects, or technical frameworks, the skill first retrieves factual context and visual identification cues before generating the illustration. The README gives PKCE, Andon, Zettelkasten, and Kirkpatrick as examples of subjects that benefit from a reference pass before illustration, because generating them without context risks drawing the wrong structure.

Installing the Skill and Invoking It

There are two installation paths. The quickest is the npx command:

npx skills add https://github.com/op7418/guizang-material-illustration --skill guizang-material-illustration

The manual path clones the repository directly to the skills directory that Claude Code reads:

git clone https://github.com/op7418/guizang-material-illustration.git ~/.claude/skills/guizang-material-illustration

After installation, verify that SKILL.md, assets/, and references/ are present under ~/.claude/skills/guizang-material-illustration. These three directories hold the execution rules, the reusable prompt template, and the visual style, chart, and quality-check reference files respectively.

To trigger the skill, tell the agent what you need in natural language. The README gives examples such as asking for a mechanism diagram for a product description, requesting chart beautification from a screenshot, or asking for a science diagram with specific labeled parts. The skill determines the illustration type internally based on the input content; the user does not need to specify a mode.

How the Skill Processes a Request

The workflow described in the README has eight steps. The skill reads the input material and identifies the relationship or data structure that actually needs to be drawn. It then classifies the output type internally: flow diagram, mechanism chart, materialized chart, educational diagram, or humanities-context scene. For subjects that need accurate structural details, it retrieves factual reference information before proceeding.

Once the content is understood, it compresses the annotation text into one summary sentence and three to five short labels. It then writes the image generation prompt with explicit label placement, data values, aspect ratio, safe zones, visual style parameters, and any reference cues. The image is generated using GPT-Image, imagegen, or whatever image generation capability the running agent exposes.

After generation, the skill checks the result: Chinese labels, data accuracy, cropping, legend completeness, and readability at social card scale. If any of those checks fail, the skill regenerates rather than patching text on top of a flawed image. The final output is a saved image path and the generation prompt, so the image can be passed directly to a social card or presentation skill.

What the Skill Will Not Do

The README maintains a clear boundary between what this skill handles and what it does not. It does not produce a complete social card, which includes the title, body text, color theme, platform sizing, and export. That work belongs to the companion guizang-social-card-skill. It does not design a full presentation structure, handle photo retouching, produce portrait photography, or lay out a long-form poster.

It also does not work without an image generation capability in the current agent. The skill produces generation prompts and calls the agent's image generation endpoint; if that endpoint is unavailable, no output is produced. The README does not describe a path for running the skill without live image generation access.

The project's license is not stated in the repository metadata. The README does not mention a license file, so users should check the repository directly before using the skill in a commercial context.

Companion Relationship with guizang-social-card-skill

The two skills are designed to run in sequence. The recommended workflow starts with guizang-material-illustration to generate the center image, then passes that image to guizang-social-card-skill, which handles the 3:4 portrait, 1:1 square, or 21:9 wide card formats along with title, body text, and color theme. The README notes that when the center image is the primary focus of the card, the social card layout should give the image a large enough area that labels inside it remain legible at display size.

guizang-social-card-skill is a separate repository. The two skills share the same visual style reference, which ensures consistent typography weight, color use, and compositional approach across the illustration and the surrounding card. This division of responsibility means the illustration skill stays focused on generating accurate, labeled images while the card skill handles sizing, export format, and platform-specific constraints.

The references/ directory inside this skill contains three files that govern the generation process: visual-style.md defines the Guizang material illustration style including proportions, safe zones, and theme color options; prompt-patterns.md documents reusable prompt structures for loop diagrams, flow charts, hub diagrams, contrast layouts, and hierarchy diagrams; and chart-beautify.md covers the semantic extraction rules for chart input and the data-first regeneration approach. These reference files are where maintainers would add new chart types or adjust the QA checklist for Chinese label accuracy.

Editorial conclusion

guizang-material-illustration is the right fit for Claude Code users who produce articles, reports, presentations, or social cards in Chinese and need a repeatable way to generate labeled explanatory images rather than generic decorative ones. It is not a replacement for a full social card layout tool or a complete presentation designer; the README is explicit that those tasks belong to companion skills. Before adopting it, check that the agent you are running has image generation access through GPT-Image, imagegen, or an equivalent, because the skill depends entirely on that capability.

Frequently asked questions

Official sources

1. Issues
2. op7418/guizang-material-illustration on GitHub
3. README