| Filename | Latest commit message | Latest commit date |
|---|---|---|
| assets | ||
| examples | ||
| ian-xiaohei-illustrations | ||
| .gitignore | ||
| LICENSE | ||
| NOTICE.md | ||
| README.md | ||
Ian Xiaohei Illustrations (English)
Turn the judgments, workflows, states, and metaphors inside an article into clean, hand-drawn, absurd-but-tidy in-article illustrations on a pure white background.
16:9 landscape | Xiaohei IP | pure white hand-drawn | sparse red/orange/blue handwritten annotations | Codex Skill
This is an English adaptation of Ian's original ian-xiaohei-illustrations skill, rewritten to work with English articles and English handwritten annotations.
What this repository is
Ian Xiaohei Illustrations is a Codex Skill that guides an AI agent in generating in-article illustrations for articles, posts, blogs, Notion docs, and methodology content.
It is not a generic illustration prompt, and it is not a PPT infographic template. Its core goal: first understand the cognitive anchors in an article, then turn one judgment, workflow, structure, state, or metaphor into a memorable 16:9 hand-drawn explanatory image.
The default visual IP is "Xiaohei" (小黑, "Little Black"): a small solid-black character with white dot eyes, thin legs, and a blank expression. Xiaohei is not a mascot, not a sticker, and not a decoration standing in the corner — Xiaohei is an absurd worker earnestly participating in the operation of the system.
In one sentence: make the AI not just "add an image", but actually draw one key cognitive move from the article.
Who it's for
Especially good for:
- People who write articles and need in-article illustrations
- People who make knowledge content, methodology content, or AI workflow content
- People who want to turn abstract judgments into concrete metaphors
- People who want an illustration style that is lighter, weirder, and more personally recognizable than PPT infographics
- People who use Codex for content production and want a reusable, consistent visual language
Not for:
- People who want commercial illustration, brand key visuals, or polished flat illustration
- People who want traditional PPT infographics, complex architecture diagrams, or formal flowcharts
- People who want children's cartoons, cute IP characters, or sticker-pack styles
- People who want to cram long body text, lengthy explanations, or full course pages into one image
- People who need strictly editable vector source files
What it produces
Default output:
- 16:9 landscape in-article illustrations
- A 4-8 image shot list per article
- For each image: the theme, core idea, structure type, Xiaohei's action, and suggested annotation words
- Final PNG images, saved to
assets/<article-slug>-illustrations/in the workspace
Not produced by default:
- PPTX / PDF / Keynote
- SVG / HTML / Canvas editable graphics
- Commercial posters or cover key visuals
- Text-heavy infographics
Visual style
This skill defaults to Ian's "Xiaohei absurdist in-article illustration" style:
- Pure white background — no paper texture, beige, shadows, or gradients
- Black hand-drawn line art, thin lines, slightly wobbly
- Lots of white space; the subject occupies only about 40%-60% of the canvas
- A few red, orange, and blue handwritten annotations
- One image expresses only one core action, structure, state, or metaphor
- Xiaohei must participate in the core action, not just decorate
- Absurd, creative, and clean — but never childish or cutesy
Examples
Note: these sample images were generated for the original Chinese-language version of the skill, so their handwritten annotations are in Chinese. They calibrate style only — line density, white space, color restraint, Xiaohei's role.
Two Breakpoints
Sort by Purpose
One Fish, Many Uses
Handoff Path
Information Well
Idea Press
Content Fermentation
Trust Bridge
These images are style calibration samples, not composition templates. When using the skill, reinvent the metaphor from the current article — do not copy the objects and compositions of old examples.
Installation
Clone the repository:
git clone https://github.com/0xGingi/ian-xiaohei-illustrations-english.git
cd ian-xiaohei-illustrations-english
Copy the skill into your Codex skills directory:
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
cp -R ./ian-xiaohei-illustrations "${CODEX_HOME:-$HOME/.codex}/skills/"
After installing, use it in Codex:
Use $ian-xiaohei-illustrations to design and generate 5 absurdist Xiaohei in-article illustrations for this article.
How to use
Illustration planning only
Use $ian-xiaohei-illustrations — do not generate images yet.
Analyze where this article is worth illustrating and output a shot list of about 5 images.
For each image, specify: which paragraph it goes after, the theme, the core idea, the structure type, what Xiaohei is doing, and suggested annotation words.
<paste article>
Generate in-article illustrations directly
Use $ian-xiaohei-illustrations to generate 4 absurdist Xiaohei in-article illustrations for this article.
Requirements: 16:9 landscape, pure white background, black hand-drawn line art, a few red/orange/blue handwritten annotations.
<paste article>
Generate one image for a single concept
Use $ian-xiaohei-illustrations to generate one in-article illustration for: "Trust isn't shouted into existence — it's laid down one piece of evidence at a time."
The scene should be absurd but clean, and Xiaohei must carry out the core action.
Remove a title or wrong text from an image
Use $ian-xiaohei-illustrations to edit this image: remove the "Workflow" title in the top-left corner and keep everything else unchanged.
More examples in examples/prompts.md.
Workflow
The skill's process:
- Read the article, Markdown, Notion content, screenshot, or topic provided by the user
- Extract the core arguments, cognitive turning points, workflow structures, and passages suited to visualization
- Output a shot list first: each image picks exactly one cognitive anchor
- Choose a structure type for each image: Workflow, system close-up, before/after, character states, conceptual metaphor, layered method, map route, or mini comic panels
- Reinvent a low-tech, absurd-but-coherent physical metaphor
- Have Xiaohei carry out the core action
- Call the image model separately for each image
- Check against the QA checklist: white background, white space, Xiaohei's action, annotations, no PPT feel, no copies of old examples
- Save the final PNGs and report their purpose and paths
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 only thing that actually needs to be installed into Codex is the subdirectory:
ian-xiaohei-illustrations/
The root-level README, LICENSE, NOTICE, and examples are GitHub documentation.
Notes
- The shorter the text inside an image, the more reliably it renders.
- Each image explains only one core structure — don't turn the article into an instruction manual.
- Xiaohei must carry the core action; if the image still fully works with Xiaohei removed, Xiaohei is too decorative.
- The example images are only for calibrating line density, white space, color restraint, and how Xiaohei participates — do not copy their compositions.
- AI image models can produce typos, hallucinated labels, style drift, or unwanted titles — review every generation.
- If text errors are severe, reduce the number of annotation words first, then regenerate.
Related projects
- Ian Handdrawn PPT — a skill for generating hand-drawn, PPT-style technical page images
- Awesome Claude Code Skills — a curated collection of Claude Code Skills / Agents / Plugins
- Obsidian + Claude AI Second Brain — a guide to building a personal knowledge base with Obsidian + Claude AI
About the original author
Ian — product designer / one-person-company practitioner / AI builder
Building a one-person company with an AI team.
- GitHub: helloianneo
- X/Twitter: @ianneo_ai
- Website: www.ianneo.xyz
- WeChat:
ianneoxyz - Email: hello.neoc@gmail.com
Keep exploring
This Xiaohei illustration skill is just one small tool in Ian's AI-powered personal production system.
If you're also using AI for content, knowledge bases, workflows, or productization, check out Ian's website: www.ianneo.xyz.
If you just want to watch from a distance first, follow Ian on X/Twitter.
To learn about the Indie Builders Club, add Ian on WeChat: ianneoxyz with the note "OPC".
If scanning isn't convenient, you can also search WeChat for: ianneoxyz.
License
MIT License. See LICENSE.