Oh wow! My Skill ranked #2 on GitHub this week! I just saw that Cang’s project hit #1, clicked in, and laughed — mine was on the list too, at #2. It’s this Chinese Xiaohei bizarre text illustration Skill: http://github.com/helloianneo/ian-xiaohei-illustrations… Originally just made it for my own Notion docs: 16:9 white background hand-drawn, with a few red/orange/blue annotations. Never expected it to blow up like this.

helloianneo/ian-xiaohei-illustrations

Source: https://github.com/helloianneo/ian-xiaohei-illustrations

Ian Xiaohei Illustrations

Turn the judgments, flows, statuses, and metaphors in Chinese articles into white-background, hand-drawn, bizarre yet clean text illustrations.

16:9 horizontal | Xiaohei IP | plain white hand-drawn | minimal red/orange/blue Chinese annotations | Codex Skill

What is this repo

Ian Xiaohei Illustrations is a Codex Skill that guides an AI Agent to generate text illustrations for Chinese articles, posts, blogs, Notion docs, and methodology content.

It’s not a general illustration prompt, nor a PPT infographic template. The core goal is: first understand the cognitive anchors in the article, then turn one of its judgments, flows, structures, states, or metaphors into a memorable 16:9 hand-drawn explanatory image.

The default visual IP is “Xiaohei”: a small black solid character with white dot eyes, thin legs, and a blank expression. Xiaohei is not a mascot, not a sticker, not a decorative element standing in the corner — it’s an absurd worker seriously participating in the system’s operation.

In one sentence: Make AI not just “match an image,” but draw a key cognitive action from the article.

Who is it for

Perfect for:

• People writing Chinese articles who need text illustrations and article images
• People creating knowledge-based content, methodology content, AI workflow content
• People who want to turn abstract judgments into concrete metaphors
• People who want a lighter, weirder, more recognizable illustration style than PPT infographics
• People using Codex for content production and want a consistent visual language

Not suitable for:

• People who want commercial illustrations, brand KV, or refined flat illustrations
• People who want traditional PPT infographics, complex architecture diagrams, or flowcharts
• People who want children’s cartoons, cute IPs, or sticker pack styles
• People who want to cram large amounts of text, long explanations, or full course pages into a single image
• People who need strictly editable vector source files

What does it produce

Default output:

• 16:9 horizontal text illustrations
• 4-8 shot lists per article
• Theme, core meaning, structure type, Xiaohei’s action, and suggested Chinese annotations for each image
• Final PNG images, saved to workspace assets/-illustrations/

Default no output:

• PPTX / PDF / Keynote
• SVG / HTML / Canvas editable graphics
• Commercial posters or cover KV
• Large text-based infographics

Visual Style

This skill uses Ian’s “Xiaohei Bizarre Text Illustration” style by default:

• Pure white background, no paper texture, beige, shadows, or gradients
• Black hand-drawn line art, thin lines, slight jitter
• Lots of white space, subject occupying about 40%-60% of the frame
• Minimal red, orange, blue Chinese handwritten annotations
• Each image expresses only one core action, structure, state, or metaphor
• Xiaohei must participate in the core action, not just be decorative
• Bizarre, creative, clean, but not childish or cute

Example Effects

Two Breakpoints

Two Breakpoints

Sort by Purpose

Sort by Purpose

One Fish, Multiple Eats

One Fish, Multiple Eats

Receiving Path

Receiving Path

Information Well

Information Well

Idea Press

Idea Press

Content Fermentation

Content Fermentation

Trust Bridge

Trust Bridge

These images are style calibration examples, not composition templates. When using, you should reinvent metaphors from the current article, not copy objects and compositions from past examples.

Installation

Clone the repo:

git clone https://github.com/helloianneo/ian-xiaohei-illustrations.git
cd ian-xiaohei-illustrations

Copy the skill to Codex skills directory:

mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
cp -R ./ian-xiaohei-illustrations "${CODEX_HOME:-$HOME/.codex}/skills/"

After installation, use in Codex:

Use $ian-xiaohei-illustrations to design and generate 5 Xiaohei bizarre text illustrations for this Chinese article.

How to Use

Only make illustration plan

Use $ian-xiaohei-illustrations Don't generate images yet.
Analyze where the following article is worth illustrating, output a shot list of about 5 images.
For each image, write clearly: after which paragraph, theme, core meaning, structure type, what Xiaohei is doing, suggested Chinese annotation words.
<paste article>

Directly generate text illustrations

Use $ian-xiaohei-illustrations Generate 4 Xiaohei bizarre text illustrations for the following article.
Requirements: 16:9 horizontal, pure white background, black hand-drawn line art, minimal red/orange/blue Chinese handwritten annotations.
<paste article>

Generate a single image for one concept

Use $ian-xiaohei-illustrations Generate a text illustration for "Trust is not shouted, but laid piece by piece with evidence."
The image should be bizarre but clean, Xiaohei must perform the core action.

Remove title or wrong text from image

Use $ian-xiaohei-illustrations Help me edit this image, remove the "Flowchart" title in the top left. Keep everything else unchanged.

More examples at examples/prompts.md.

Workflow

This skill’s workflow is:

1. Read the article, Markdown, Notion content, screenshot, or user-provided topic
2. Extract core insights, cognitive turning points, process structures, and paragraphs suitable for visualization
3. First output a shot list: each image selects only one cognitive anchor
4. Choose a structure type for each image: Workflow, system partial, before/after comparison, role state, conceptual metaphor, method layering, map route, or mini comic panel
5. Reinvent a low-tech, bizarre but plausible physical metaphor
6. Let Xiaohei perform the core action
7. Generate each image individually with an image model
8. Check against QA checklist: white background, white space, Xiaohei action, Chinese annotations, non-PPT feel, not a copy of old examples
9. Save final PNG, report usage and path

Directory Structure

.
├── README.md
├── LICENSE
├── NOTICE.md
├── assets/
│   └── ian-wechat-qr.jpg
├── examples/
│   ├── images/
│   │   ├── 01-two-breakpoints.png
│   │   ├── 02-sort-by-purpose.png
│   │   └── ...
│   └── prompts.md
└── ian-xiaohei-illustrations/
    ├── SKILL.md
    ├── agents/
    │   └── openai.yaml
    ├── assets/
    │   └── examples/
    └── references/
        ├── style-dna.md
        ├── xiaohei-ip.md
        ├── composition-patterns.md
        ├── prompt-template.md
        └── qa-checklist.md

The subdirectory to actually install into Codex is:

ian-xiaohei-illustrations/

The root-level README, LICENSE, NOTICE, and examples are GitHub sharing documents.

Notes

• Chinese text in images: shorter is more stable.
• Each image tells only one core structure; don’t turn the article into a manual.
• Xiaohei must perform the core action; if removing Xiaohei still makes the image fully valid, it means Xiaohei is too decorative.
• Example images only calibrate line density, white space, color restraint, and Xiaohei’s participation; don’t copy compositions.
• AI image models may have typos, hallucinated labels, style drift, or extra titles; check after generation.
• If Chinese typos are severe, prioritize reducing annotation words and regenerate.

Related Projects

• Ian Handdrawn PPT (https://github.com/helloianneo/ian-handdrawn-ppt) — Chinese hand-drawn tech PPT-style page image generation Skill
• Awesome Claude Code Skills (https://github.com/helloianneo/awesome-claude-code-skills) — Curated collection of Claude Code Skills / Agents / Plugins
• Obsidian + Claude AI Second Brain (https://github.com/helloianneo/obsidian-ai-second-brain) — Guide to building personal knowledge base with Obsidian + Claude AI

About the Author

Ian (Yi’en) — Product Designer / Solo Practitioner / AI Builder

Building a one-person company with an AI team.

• GitHub: helloianneo (https://github.com/helloianneo)
• X/Twitter: @ianneo_ai (https://x.com/ianneo_ai)
• Website: ianneo.xyz (https://ianneo.xyz)
• WeChat: ianneoxyz
• Email: [email protected]

Keep Exploring

This Xiaohei illustration Skill is just a small tool in my personal production system built with AI.

If you’re also using AI for content, knowledge bases, workflows, or productization, check out my website: ianneo.xyz (https://www.ianneo.xyz/).

If you just want to observe, follow me on X/Twitter (https://x.com/ianneo_ai).

Interested in Indie Builders Club? Add WeChat: ianneoxyz, note “OPC”.

If scanning is inconvenient, search WeChat: ianneoxyz.

License

MIT License. See LICENSE.