🌐 English · 中文

tufte-xiaohei-fusion

"Tufte gives the structure. Xiaohei gives the story."
「Tufte 负责讲清，小黑负责勾住。」

Turn an article into a Tufte-style phone long-image, then fuse Xiaohei hand-drawn character illustrations directly into the information design. The result is not a decorative mascot pasted onto a chart. Tufte handles structure, evidence, typography and graphical honesty; Xiaohei adds emotional hooks at the exact cognitive turning points.

npx skills add quzhi-ai/tufte-xiaohei-fusion

See demo · Install · How it works · Architecture

---

Why this skill exists

Tufte-style visualizations are clear, restrained and evidence-heavy. Xiaohei illustrations are sparse, weird and emotionally memorable. If you simply mix them, both sides get worse: the chart becomes noisy, and the character becomes decoration.

This skill treats them as two layers:

• Tufte layer — layout, hierarchy, bars, matrices, evidence, typography, lie factor
• Xiaohei layer — transparent PNG character illustrations used only at cognitive anchors

The rule is simple: if removing Xiaohei does not remove any meaning, the illustration is decoration and should be redesigned.

---

How It Works

A seven-step workflow:

1. Read the article — extract the core claim and cognitive turns
2. Pick Xiaohei anchors — choose at least three moments where a strange visual metaphor helps
3. Build the Tufte layer — create the phone long-image structure first
4. Generate Xiaohei illustrations — one transparent-friendly image per anchor
5. Cut out the white background — keep internal whites such as eyes and target centers
6. Fuse into HTML — place transparent PNGs directly on the paper background
7. Render and check — Chrome headless screenshot + overflow and visual checks

Article → Tufte structure → cognitive anchors → Xiaohei metaphors
        → transparent PNGs → HTML fusion → phone long-image PNG

Demo

Demo 1 — "How to Prompt AI"

Mode: phone long-image · Palette: Indigo Porcelain · Xiaohei anchors: target path / raw material blocks / level-up ladder

Full example

---

Design Principles

Xiaohei appears only at cognitive anchors

Do not scatter Xiaohei everywhere. Each illustration must explain a mechanism, transition, warning or punchline.

Xiaohei never carries precise data

Any exact comparison, trend, quantity or proportion belongs to the Tufte vector layer. Xiaohei can carry mood and metaphor, not measurements.

One palette, one accent

Xiaohei's body stays black. The path, focal object and handwritten labels use the current Tufte palette's single accent color.

Transparent, not carded

Xiaohei must be cut out as a transparent PNG and placed directly on the paper background. Do not put it inside a white card.

Cute is allowed, complex mascot is not

Xiaohei should be round, chubby and simple, with white dot eyes and tiny legs. Keep the linework sparse and weird; avoid polished commercial mascot style.

---

Install

npx skills add quzhi-ai/tufte-xiaohei-fusion

Or manually: clone this repo and copy the skill directory into your Claude Code skills directory:

cp -r skill/tufte-xiaohei-fusion ~/.claude/skills/

Then tell Claude:

"Turn this article into a Tufte Xiaohei fusion long image."
"把这篇做成小黑 Tufte 长图。"

---

Architecture

tufte-xiaohei-fusion/
├── README.md
├── README.zh.md
├── LICENSE
├── skill/
│   └── tufte-xiaohei-fusion/
│       ├── SKILL.md
│       ├── references/
│       │   ├── glyph-action-map.md
│       │   └── workflow-and-pitfalls.md
│       ├── scripts/
│       │   ├── cutout_transparent.py
│       │   └── render_longimage.py
│       └── assets/
│           └── example/
├── docs/
│   ├── glyph-action-map.md
│   └── workflow-and-pitfalls.md
├── examples/
│   └── 01-how-to-prompt-ai/
└── assets/
    └── hero-example.png

Key files

File	Purpose
skill/tufte-xiaohei-fusion/SKILL.md	The actual skill workflow
docs/glyph-action-map.md	How to map a cognitive anchor to Xiaohei's action
docs/workflow-and-pitfalls.md	Rendering pipeline and known pitfalls
scripts/cutout_transparent.py	Flood-fill cutout that preserves internal white
scripts/render_longimage.py	Chrome screenshot + paper-color crop + overflow check

---

Dependencies

The final long image is plain HTML/CSS rendered through Chrome headless.

Required:

Google Chrome or Chromium
Python 3
Pillow
numpy

Xiaohei illustration generation can use any image generation tool. Save raw images as white-background JPG/PNG, then run cutout_transparent.py to produce transparent PNGs.

---

Support the Project

If tufte-xiaohei-fusion has been helpful, consider buying the author a coffee:

WeChat Pay	Alipay

Star History

---

Acknowledgements

• Edward Tufte — for the principles of graphical integrity, data-ink, small multiples and high-density evidence.
• helloianneo/ian-xiaohei-illustrations — for generously sharing the original Xiaohei illustration skill. This project builds the Tufte-fusion workflow on top of that open Xiaohei illustration practice.
• Xiaohei — a hand-drawn character system used here as a sparse narrative layer, not a decoration layer.
• tufte-viz — the information-design layer this skill builds on.

License

MIT — see LICENSE

---

Clarity first. Emotion only where it earns its ink.