Xiaohei Illustration Generator

Xiaohei illustrations

by dzhng · MIT license · ★ 1,349 on GitHub

Xiaohei illustrations cover

Generate Ian-style Xiaohei illustrations for articles, posts, blogs, Notion documents, workflows, methods, processes, structures, states, metaphors, and opinions. Use when the user asks for weird, hand-drawn, Xiaohei, article,…

---
name: xiaohei-illustrations
description: Generate Ian-style Xiaohei illustrations for articles, posts, blogs, Notion documents, workflows, methods, processes, structures, states, metaphors, and opinions. Use when the user asks for weird, hand-drawn, Xiaohei, article, editorial, body illustrations, illustration ideas, shot lists, title removal, image edits, or image regeneration. By default, all image text and annotations are English, even when the source article is Chinese; only use another language when the user explicitly asks.
---

# Xiaohei Illustrations

## Purpose

Create 16:9 horizontal illustrations for article body sections and blog headers. The goal is not commercial illustration, a slide, or a cute cartoon. Turn the article's key judgment, process, structure, state, or metaphor into a clean, weird, creative, readable-but-not-instructional hand-drawn explanation.

The default visual IP is Xiaohei: a solid-black creature with white dot eyes, thin legs, and a blank expression, seriously doing something absurd but meaningful. Xiaohei must participate in the central action, not stand beside it as decoration.

## Default language rule

All visible image text must be English by default. This includes labels, notes, signs, fictional UI text, and tiny annotations. Do not mix in Chinese or other languages unless the user explicitly requests another language.

Keep English labels short, natural, and correctly spelled. Prefer 2–5 words per label.

Overview

Create 16:9 horizontal illustrations for article body sections and blog headers. The goal is not commercial illustration, a slide, or a cute cartoon. Turn the article's key judgment, process, structure, state, or metaphor into a clean, weird, creative, readable-but-not-instructional hand-drawn explanation.

What you get

  • How many images were generated.
  • What each image is for.
  • Where the files are saved.
  • Which images are strongest and which are optional.
Manual install (npx, ZIP)
Claude Codenpx skills add dzhng/skills --skill xiaohei-illustrations -g -a claude-code
Claude Code (degit)npx degit dzhng/skills/skills/graphics/xiaohei-illustrations#main ~/.claude/skills/xiaohei-illustrations
Claude.ai / desktopZip the folder and upload it under Settings → Capabilities → Skills.
Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

  • SKILL.md5.0 KB
Read SKILL.md here
dzhng/main1 file shown
SKILL.md
Show the full text115 lines

Xiaohei Illustrations

Purpose

Create 16:9 horizontal illustrations for article body sections and blog headers. The goal is not commercial illustration, a slide, or a cute cartoon. Turn the article's key judgment, process, structure, state, or metaphor into a clean, weird, creative, readable-but-not-instructional hand-drawn explanation.

The default visual IP is Xiaohei: a solid-black creature with white dot eyes, thin legs, and a blank expression, seriously doing something absurd but meaningful. Xiaohei must participate in the central action, not stand beside it as decoration.

Default language rule

All visible image text must be English by default. This includes labels, notes, signs, fictional UI text, and tiny annotations. Do not mix in Chinese or other languages unless the user explicitly requests another language.

Keep English labels short, natural, and correctly spelled. Prefer 2–5 words per label.

Read these references as needed

Do not load every reference unless the task needs it:

  • references/style-dna.md: visual style, color rules, text rules, and prohibitions.
  • references/xiaohei-ip.md: Xiaohei's appearance, personality, action library, and prohibitions.
  • references/composition-patterns.md: composition types, original-metaphor method, and anti-copying rules.
  • references/prompt-template.md: the single-image generation prompt template.
  • references/qa-checklist.md: post-generation checks and iteration rules.
  • assets/examples/: low-frequency visual calibration only. Do not copy the compositions, objects, or annotations from these examples.

Workflow

1. Understand the article

Read the user's article, link, Notion page, Markdown file, screenshot, or stated idea. Identify:

  • The core argument.
  • Which paragraphs carry a cognitive turn.
  • Which ideas benefit from an image.
  • Which parts should remain text-only.

Do not illustrate evenly. Prefer cognitive anchors: core judgments, breakpoints, input/output loops, forks, before/after contrasts, reuse paths, handoffs, common traps, and role-state changes.

2. Start with an illustration strategy

If the user asks only for analysis or illustration ideas, return a concise shot list first. For each proposed image, include:

  • Where it belongs in the article.
  • The image topic.
  • The core meaning.
  • The composition type.
  • What Xiaohei is doing.
  • Suggested visual elements.
  • Suggested English labels.

Default to 4–8 images. Use 1–3 for a short article. Avoid exceeding 9 unless the article truly needs it.

3. Generate one image at a time

If the user clearly asks to generate, output, make, or create images, do not stop for confirmation. Generate each image separately. Do not combine multiple illustrations into one image.

Each image explains one core structure. Every prompt must include:

  • 16:9 horizontal article illustration.
  • Pure white background.
  • Black hand-drawn line art.
  • Sparse red, orange, and blue handwritten English annotations.
  • Large areas of blank space.
  • Xiaohei as the central action-taker.
  • No PPT look, commercial illustration, childish cuteness, complex architecture, or top-left type title.

Do not copy prior examples. Examples only calibrate line density, restraint, and how Xiaohei participates. Unless the user explicitly asks to recreate a prior image, invent a fresh metaphor from the current article.

4. Check and iterate

After generation, inspect the image against references/qa-checklist.md. Regenerate or locally edit if any of these occur:

  • Xiaohei is only decorative.
  • The image is too crowded.
  • It looks like a flowchart or PPT slide.
  • There is too much text or misspelled English.
  • A top-left title appears, such as “workflow,” “system diagram,” or “common pitfalls.”
  • The style becomes cute, childish, rigid, or corporate.
  • The background is not clean white.
5. Save and deliver

When working in the workspace, save final images under a task-specific folder such as:

assets/<article-slug>-illustrations/

or the folder the user is already using for that article.

Name files in order:

01-topic-name.png
02-topic-name.png

Preserve original generated files. Do not overwrite existing assets unless the user explicitly asks for replacement.

Output style

Before generation, keep strategy output concise. After generation, report:

  • How many images were generated.
  • What each image is for.
  • Where the files are saved.
  • Which images are strongest and which are optional.

Do not over-explain style theory; let the images speak.

1---
2name: xiaohei-illustrations
3description: Generate Ian-style Xiaohei illustrations for articles, posts, blogs, Notion documents, workflows, methods, processes, structures, states, metaphors, and opinions. Use when the user asks for weird, hand-drawn, Xiaohei, article, editorial, body illustrations, illustration ideas, shot lists, title removal, image edits, or image regeneration. By default, all image text and annotations are English, even when the source article is Chinese; only use another language when the user explicitly asks.
4---
5 
6# Xiaohei Illustrations
7 
8## Purpose
9 
10Create 16:9 horizontal illustrations for article body sections and blog headers. The goal is not commercial illustration, a slide, or a cute cartoon. Turn the article's key judgment, process, structure, state, or metaphor into a clean, weird, creative, readable-but-not-instructional hand-drawn explanation.
11 
12The default visual IP is Xiaohei: a solid-black creature with white dot eyes, thin legs, and a blank expression, seriously doing something absurd but meaningful. Xiaohei must participate in the central action, not stand beside it as decoration.
13 
14## Default language rule
15 
16All visible image text must be English by default. This includes labels, notes, signs, fictional UI text, and tiny annotations. Do not mix in Chinese or other languages unless the user explicitly requests another language.
17 
18Keep English labels short, natural, and correctly spelled. Prefer 2–5 words per label.
19 
20## Read these references as needed
21 
22Do not load every reference unless the task needs it:
23 
24- `references/style-dna.md`: visual style, color rules, text rules, and prohibitions.
25- `references/xiaohei-ip.md`: Xiaohei's appearance, personality, action library, and prohibitions.
26- `references/composition-patterns.md`: composition types, original-metaphor method, and anti-copying rules.
27- `references/prompt-template.md`: the single-image generation prompt template.
28- `references/qa-checklist.md`: post-generation checks and iteration rules.
29- `assets/examples/`: low-frequency visual calibration only. Do not copy the compositions, objects, or annotations from these examples.
30 
31## Workflow
32 
33### 1. Understand the article
34 
35Read the user's article, link, Notion page, Markdown file, screenshot, or stated idea. Identify:
36 
37- The core argument.
38- Which paragraphs carry a cognitive turn.
39- Which ideas benefit from an image.
40- Which parts should remain text-only.
41 
42Do not illustrate evenly. Prefer cognitive anchors: core judgments, breakpoints, input/output loops, forks, before/after contrasts, reuse paths, handoffs, common traps, and role-state changes.
43 
44### 2. Start with an illustration strategy
45 
46If the user asks only for analysis or illustration ideas, return a concise shot list first. For each proposed image, include:
47 
48- Where it belongs in the article.
49- The image topic.
50- The core meaning.
51- The composition type.
52- What Xiaohei is doing.
53- Suggested visual elements.
54- Suggested English labels.
55 
56Default to 4–8 images. Use 1–3 for a short article. Avoid exceeding 9 unless the article truly needs it.
57 
58### 3. Generate one image at a time
59 
60If the user clearly asks to generate, output, make, or create images, do not stop for confirmation. Generate each image separately. Do not combine multiple illustrations into one image.
61 
62Each image explains one core structure. Every prompt must include:
63 
64- 16:9 horizontal article illustration.
65- Pure white background.
66- Black hand-drawn line art.
67- Sparse red, orange, and blue handwritten English annotations.
68- Large areas of blank space.
69- Xiaohei as the central action-taker.
70- No PPT look, commercial illustration, childish cuteness, complex architecture, or top-left type title.
71 
72Do not copy prior examples. Examples only calibrate line density, restraint, and how Xiaohei participates. Unless the user explicitly asks to recreate a prior image, invent a fresh metaphor from the current article.
73 
74### 4. Check and iterate
75 
76After generation, inspect the image against `references/qa-checklist.md`. Regenerate or locally edit if any of these occur:
77 
78- Xiaohei is only decorative.
79- The image is too crowded.
80- It looks like a flowchart or PPT slide.
81- There is too much text or misspelled English.
82- A top-left title appears, such as “workflow,” “system diagram,” or “common pitfalls.”
83- The style becomes cute, childish, rigid, or corporate.
84- The background is not clean white.
85 
86### 5. Save and deliver
87 
88When working in the workspace, save final images under a task-specific folder such as:
89 
90```text
91assets/<article-slug>-illustrations/
92```
93 
94or the folder the user is already using for that article.
95 
96Name files in order:
97 
98```text
9901-topic-name.png
10002-topic-name.png
101```
102 
103Preserve original generated files. Do not overwrite existing assets unless the user explicitly asks for replacement.
104 
105## Output style
106 
107Before generation, keep strategy output concise. After generation, report:
108 
109- How many images were generated.
110- What each image is for.
111- Where the files are saved.
112- Which images are strongest and which are optional.
113 
114Do not over-explain style theory; let the images speak.
115 
View all files on GitHub →

Details

License
MIT
Stars on the repo
★ 1,349
Checked
Source
dzhng/skills ↗
Creator
dzhng · 1 listing
View creator

Similar skills

See all →
SkillCel-Shaded Video Creatoredenfunf/reelmimic · by edenfunfMake Japanese TV-anime style videos (MP4) with code — cel-shaded characters with tapered line art, big detailed eyes, hair clumps with a specular band, comedic anime reactions (sweat drop, anger vein, sparkle eyes, ≥< eyes, dot eyes, tears), painted skies with cumulus clouds, school/street/classroom/rooftop sets with time-of-day palettes, speed/focus lines, impact frames, dramatic zooms, smears, sakura petals and anime subtitles (CJK). Canvas 2D rendered frame by frame in headless Chrome, encoded with ffmpeg. Use when a reference video or brief calls for anime / 動畫 / 日系動畫 / アニメ / cel-shaded / slice-of-life / school romance / shōnen-style reactions, or when the video-clone router picks the anime-cel style. 2D only; characters are original (Hina, Ren) or new ones built on the same rig.★ 3.6k GitHub starsSkillOpuscar Film Directorlemomo-ai/lemo-opuscar · by lemomo-aiDirect and produce a short film made entirely in code, in one of the styles of the Lemo-Opuscar library (e.g. Impasto Oil Painting 油画厚涂, Watercolor Brush 水彩笔刷, Ukiyo-e 浮世绘, Satellite Briefing 卫星简报, Exploded Teardown 产品拆解, Microscope Story 显微叙事). Use when the user asks for a video, film, short, promo, explainer or animation (视频、短片、动画、宣传片) in a named style, including data, science and product explainers built from real material such as satellite imagery, laser scans, CAD files or archive scans (数据解说、科普、产品拆解); when they want a film made about their own topic and haven't chosen a style (help them choose); or when they ask which film styles there are. Not for editing or converting existing video files.★ 3k GitHub starsSkillGame Asset Generatorscenario-labs/skills · by scenario-labsUse when creating game art through Scenario MCP: sprites, sprite sheets, icons, props, loot, tilesets and autotile terrain transitions, seamless tiles, isometric buildings, top-down maps, pixel art, UI buttons and panels, parallax background layers or depth planes for side-scrollers, and character or concept art; or when assets need transparent backgrounds, background removal, style-consistent variation batches, upscaling, pixel-grid cleanup, or PNG export for Unity, Godot, or Unreal.★ 854 GitHub starsSkillAI-Toolkit LoRA Trainerartokun/comfyui-mcp · by artokunTrain custom LoRAs with ostris AI-Toolkit. Covers WAN 2.2/2.1 (people, styles, video motion) and Z-Image (Turbo & Base, low-VRAM image LoRAs). Use when the user wants to train a WAN or Z-Image LoRA; covers local + RunPod setup, dataset prep, key params, and using the result in a ComfyUI workflow.★ 759 GitHub starsSkillANIMA 1.0 Anime Generatorartokun/comfyui-mcp · by artokunAnime/illustration text-to-image (ANIMA 1.0, ~2B Cosmos DiT). Use for anime, manga, illustrated characters; accepts Danbooru tags + natural language; runs/trains on <6GB VRAM; includes anime inpainting via Anima-LLLite ControlNet★ 759 GitHub starsSkillComfyUI Node Publishingartokun/comfyui-mcp · by artokunAuthoring & publishing ComfyUI custom nodes to the Comfy Registry, covering node structure, pyproject.toml spec, comfy-cli publishing, and CI★ 759 GitHub stars