Xiaohei Illustrations

Give an article’s idea a visible action.

Find the parts of a Chinese article that benefit from an illustration, then let Xiaohei explain each through a concrete action. White space, thin lines and brief Chinese notes hold the set together.

By Ian（伊恩）

Setup & first taskView on GitHub
A black character turns a hand-drawn press that transforms a paper idea into a key, with short Chinese notes.Open full image

Ian’s example: Xiaohei turns an unformed idea into a small test by operating a press.

View source

Images generated by Ian and provided as style references. Use them to judge line work, spacing and Xiaohei’s role; invent a new composition for your own article. Atlasnote has not tested the generation workflow.

Environment documented by the author

  • Codex
GitHub stars
12,951
Version
1.0.0
Checked
Categories
Design & Video

Start with one idea worth illustrating.

Pick a point where readers may struggle. Decide what Xiaohei does and how that action explains the point before making the first image. Plan positions and subjects for a full article so the pictures do different jobs.

Pick a task and get started

Planning produces an illustration brief. Generation and editing require an image tool in the current Codex session.

Which step do you need?

Decide where pictures earn their place in a finished article and what each should explain.

  1. Install the complete Xiaohei skill folder

    These are the author’s terminal setup steps and require Git. After entering the cloned repository, copy its inner skill folder with references, assets and agents intact. The commands use Unix-style paths; use the documented folder structure when setting up another environment.

    git clone https://github.com/helloianneo/ian-xiaohei-illustrations.git
cd ian-xiaohei-illustrations
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
cp -R ./ian-xiaohei-illustrations "${CODEX_HOME:-$HOME/.codex}/skills/"
    Read the author’s setup guide

    Prepare the article and image tool

    Open Codex in the article’s working folder and confirm the skill is available. Say that you want planning only when you do not want images yet. For rendering, confirm that the session has image generation or editing and name the output location.

    Read the author’s usage examples

  2. Give your AI this first task

    Atlasnote wrote these task examples from the author’s workflow. Attach readable article text, a defined idea or an image to edit. Supply the text if the assistant cannot open your link.

    Use $ian-xiaohei-illustrations for planning only. Read the attached Chinese article and propose around four illustrations at useful conceptual turns; use fewer if the article does not need that many. For each, identify the paragraph it follows, its single point, structure type, main object, Xiaohei’s action and brief Chinese labels. Remove repetition rather than spreading images evenly through the text, and do not reuse the author’s old compositions.

  3. Check what you receive

    • Each proposed image has a specific position and one explanation that justifies including it.
    • The plan supplies a structure, character action, main objects and short labels for generation.
    • The image count fits the article, with repetition and purely decorative ideas removed.
    Read the author’s notes for this task
More about this skill

The skill begins with the article and selects points where an image can explain a judgment, relationship or change. Each illustration carries one job. A short piece may need only one or two; even a long piece benefits from removing repeated visual ideas before generation.

Xiaohei acts inside the scene. It may operate a machine, move material or become a filter itself. Its silhouette is flexible, while a solid-black body, white dot eyes, thin legs and a serious approach to absurd work provide continuity. The character’s action should make the metaphor work.

The visual rules fix the white background, thin black hand-drawn lines, ample empty space and restrained Chinese notes. Orange marks the main path, red calls attention to a point or problem, and blue adds secondary information. Every image does not need all three colors, and consistent style should leave room for new compositions.

The workflow covers planning, separate image generation, local editing and file delivery. A planning request produces a shot list; an explicit generation request proceeds to the image tool. Save individual PNGs in the article’s folder and report their purpose and paths so they can be placed in the text.

Sources and verification

Sources checked

Reviewed the README, skill, five reference guides, usage examples and image attribution. The displayed images come from the author’s repository; Atlasnote has not installed or tested generation.

Author documentationOriginal skillCharacter rulesStyle and colorComposition choicesReview and editingExample attribution

Explore other illustration needs

Continue with interactive explanatory figures, a different drawing style or photo-based illustration when those better fit the task.

AnatomyTurn a technical mechanism into an isometric object, delivered as HTML, SVG or React components.Orange Line IllustrationThin black lines, white space and warm orange turn one claim into a readable action.Photo RevivalRedraw a snapshot’s memorable cues as a small illustration on white paper with vivid color.Taste SkillA design process grounded in brand material or product data, with frontend code and browser checks.