Open Source a Very Beautiful Article Illustration Skill

This morning, I wanted to create a few 3:4 social media images for an article about Claude.

I had some social media Skills I built myself on hand, so I asked Codex to call GPT-Image 2.0.

The results exceeded expectations. Clean white background, restrained 3D materials, Chinese labels printed directly in the image. From afar it looks like a magazine spread; up close, the details are all readable. After posting it in groups and on social media, several people asked how it was done. I was satisfied too.

Since the effect was already validated, I figured I might as well turn it into a proper Skill and share it. Hence: guizang-material-illustration

Still, a lot of work went into it. There’s a big gap between a “runnable” prompt and a Skill that anyone else can pick up and consistently produce good results from.

What Problem Does It Solve?

Writing articles, making weekly reports, posting on social media, preparing slide decks — you can’t avoid the need for illustrations.

Not the kind where you just use a template for the cover.

The hard part is those illustrations that need to explain a concept, a process, or a set of data clearly.

Either you directly paste dense screenshots, or you end up with a beautiful AI-generated illustration that no one understands what it’s talking about.

This Skill does exactly one thing: turn your article, notes, data, or product description into an explanatory illustration with Chinese labels embedded inside the image.

The illustration includes arrows, annotations, and spatial relationships — readers can grasp what you’re saying at a glance.

It doesn’t handle Xiaohongshu card layouts or PPT slide design.

It just handles the central illustration. Once generated, you can drop it directly into a social card Skill, PPT Skill, or any document.

From a Casual Prompt to a Formal Skill

The initial prompt only worked in specific scenarios. To turn it into a tool that others could use reliably, every part needed to be adapted independently.

Scenario Adaptation and Unified Visual Style

At the start, it could only handle simple flowcharts. But in reality, the scenarios needing illustrations are far more diverse:

• Project progress in weekly reports
• System architecture in product documentation
• Charts in data analysis
• Physics experiments in teaching materials
• Even articles about philosophical concepts.

I broke these scenarios down one by one and created separate visual structures and prompt templates for each type:

• Work reports & product explanations: Progress, risks, decisions, roadmaps — expressed with flowcharts and hierarchy diagrams.
• Data charts: The most time-consuming part. AI field evaluation charts tend to be dull and repetitive — all the same bar charts and line charts. I specifically designed a materialized expression for charts, giving bar charts, Gantt charts, Sankey diagrams, heat maps, and other chart types a 3D texture.
• Educational instructional diagrams: Elementary school lever principles, high school electromagnetic induction — each component, force direction, and reaction process needed to be labeled correctly. Good looks aren’t enough; accuracy is required.
• Humanities illustrations: Trade routes on the Silk Road, moon imagery in classical poems, abstract relationships between philosophical concepts. This category is the hardest, requiring a balance between “atmosphere” and “clarity.”

All these scenarios were eventually unified under one visual language:

White-background studio lighting, restrained 3D material objects, a single accent color (default IKB blue), and short Chinese labels embedded inside the image. The result looks like a set of physical models placed on a white tabletop and photographed.

Reference Retrieval for Obscure Concepts and Logos

During testing, I ran into a problem.

If you ask AI to draw a PKCE flow diagram or a Zettelkasten card system, it probably has no idea what they look like.

Not to mention logos for new products, specific scientific apparatus, or historical/cultural objects.

So I added a judgment logic: Before generating, the Agent evaluates whether the concept is common enough.

If it judges the concept is obscure — say, a management framework, a biology lab device, or an icon for a niche AI model — it first retrieves reference information and reference images, extracts visual cues (silhouettes, color conventions, distinctive shapes), and then uniformly converts them into the Guizang material illustration style.

The reference is used only to understand what the thing actually looks like, not to copy the art style.

All final images return to the unified visual system.

Making the Model Reliably Write Text Inside the Image

GPT-Image 2.0’s Chinese text generation capability is actually quite good.

But the AI Agent sometimes gets “too clever”:

Knowing that the image model might make mistakes in generating text, it simply omits the text, using HTML to place labels outside the image instead.

What you get is a beautiful but blank decorative image surrounded by disconnected text.

For an explanatory illustration, labels inside the image are the content.

If short labels like “User Prompt”, “AI Execution”, “Result Check” are not inside the image, readers have to cross-reference, and the explanatory power takes a direct hit.

I repeatedly corrected this behavior in the prompt layer: requiring labels to be generated inside the image, limiting each label to 2-5 Chinese characters, specifying spatial positions (top-left, bottom-right, center, etc.), and requiring them to be placed on clean white areas or annotation boards.

After many rounds of tuning, the label accuracy has stabilized.

Charts: Not Screenshot Reskinning, but Redrawing from Data

The most intuitive approach is to feed the original chart screenshot to the model and ask it to “beautify” it.

The problem: if the original chart has poor layout (dense coordinates, blurry colors, crowded data points), the model will inherit those bad visual features. It’s just a reskin; the underlying ugly chart remains.

My approach is “semantic extraction”:

The Agent first extracts truly important information from the chart screenshot or raw data, including chart type, title, conclusion, axes, data values, units, category order, extreme values or anomalies to highlight.

Then it hands this pure semantic information to GPT-Image 2.0, asking it to draw a brand-new materialized chart from scratch.

The final chart can have a larger title area, clearer data presentation, and even small scenes and icons around it to aid understanding.

It’s not a reskin of the original; it’s redesigning an infographic.

Anti-pattern Correction and Pre-delivery Review

AI-generated illustrations have some recurring pitfalls that will definitely cause problems if not specifically guarded against:

• No text at all in the image — meant to explain a concept, but ends up as a purely atmospheric picture
• A huge block of text crammed into the image, making it unreadable
• Chinese label errors — wrong characters, garbled text, or labels pointing to the wrong spot
• Prompt leakage — the prompt text used for generation appears directly in the final image
• Reference image copying — the model replicates watermarks, low-quality backgrounds, or even original UI elements from the reference

I added a QA review step at the end of the Skill. Before delivery, the Agent checks each item:

• Are labels correct?
• Are data values correct?
• Is the image cropped?
• Are there unexpected watermarks or garbled text?

If a problem is found, it regenerates directly — no external patching.

What It Can and Cannot Do

If you’ve followed my previous articles or are familiar with Skills, you know I usually make clear what’s suitable for this tool and what isn’t. Nothing is omnipotent, and Skills can’t handle everything either. Same here.

Suitable scenarios:

• Article illustrations, knowledge explanation graphics, concept breakdown diagrams
• Work report graphics, project status diagrams
• Product mechanism diagrams, system architecture diagrams
• Data chart beautification (bar charts, line charts, Gantt charts, Sankey diagrams, heat maps, funnel charts)
• Teaching material illustrations (elementary science, middle school physics/chemistry/biology)
• Humanities viewpoint illustrations (history, philosophy, literary imagery)
• Central visual for social media cards, main visual for PPT slides

Not suitable for: Full Xiaohongshu card layout (that’s the job of the social card Skill), PPT structure design, real photography editing, portraits, long-form poster text layout.

Installation and Usage

Tell your Codex (or any other Agent, though this prompt has not been tested with other image models):

Help me install this Skill:
npx skills add https://github.com/op7418/guizang-material-illustration --skill guizang-material-illustration

Once installed, just use natural language with the Agent, for example:

• “Use Guizang’s material illustration Skill to turn this product description into a mechanism diagram with Chinese labels.”
• “Pick 3 core concepts from this article and generate a labeled illustration for each.”

No need to select modes or specify parameters — the Agent automatically decides what type of image to generate based on the materials.

Of course, you can also combine it with Cang Shifu’s PPT Skill and social media image Skill to create even more beautiful and richer content.

This is another case of model emergence.

When I was generating test images for that article this morning, I didn’t explicitly request the image style or type. But the model itself chose a very suitable style, and the colors also remained consistent with the original theme.

So many times, the context we provide to AI truly matters.

Once you provide sufficiently rich context, AI can rely on aesthetics and content to achieve unity, consistency, and harmony.

I look forward to seeing the images you make with this Skill in the comments. If you have any other suggestions or requests, feel free to let me know.

If you find this helpful, please give it a like or forward it to friends who might need it. Thank you!