--- slug: "tufte-xiaohei-fusion" source_type: "readme" source_url: "https://cdn.jsdelivr.net/gh/quzhi-ai/tufte-xiaohei-fusion@main/README.md" repo: "https://github.com/quzhi-ai/tufte-xiaohei-fusion" source_file: "README.md" branch: "main" --- **🌐 English** · [中文](https://github.com/quzhi-ai/tufte-xiaohei-fusion/blob/HEAD/README.zh.md)

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](#demo) · [Install](#install) · [How it works](#how-it-works) · [Architecture](#architecture)

Tufte Xiaohei fusion long image demo

--- ## 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

How to Prompt AI Xiaohei Tufte long image

[Full example](https://github.com/quzhi-ai/tufte-xiaohei-fusion/tree/HEAD/examples/01-how-to-prompt-ai/) --- ## 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 ```bash npx skills add quzhi-ai/tufte-xiaohei-fusion ``` Or manually: clone this repo and copy the skill directory into your Claude Code skills directory: ```bash 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](https://github.com/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](https://github.com/quzhi-ai/tufte-xiaohei-fusion/tree/HEAD/LICENSE) ---

Clarity first. Emotion only where it earns its ink.