# Tufte Xiaohei Fusion

> >

- **Type:** Skill
- **Install:** `agentstack add skill-quzhi-ai-tufte-xiaohei-fusion-tufte-xiaohei-fusion`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [quzhi-ai](https://agentstack.voostack.com/s/quzhi-ai)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [quzhi-ai](https://github.com/quzhi-ai)
- **Source:** https://github.com/quzhi-ai/tufte-xiaohei-fusion/tree/main/skill/tufte-xiaohei-fusion

## Install

```sh
agentstack add skill-quzhi-ai-tufte-xiaohei-fusion-tufte-xiaohei-fusion
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Tufte × 小黑 融合长图

## 一句话定位

一张手机长图里，**Tufte 负责骨架和证据（讲清、让人信），小黑负责钩子和情绪（勾住、打动）**。
不是把两种风格混在一张图上（那会两败俱伤——小黑要留白，Tufte 要密度），而是**分工 + 融入**：
小黑做成透明 PNG，直接浮在 Tufte 长图的瓷白底上，和正文卡片共享同一套配色。

这套方法和决策来自已验证样例（`assets/example/`）和多轮版式迭代，不是凭空设计。

## 铁律（先读，违背即失败）

1. **小黑只在「认知锚点」出现，绝不当装饰。** 一张长图最少 3 个锚点，但小黑是稀缺情绪点，
   放在核心判断 / 转折 / 金句处。判断标准：去掉小黑图的隐喻还完全成立 → 它太装饰了，重做。
2. **小黑绝不替数据说话。** 凡涉及对比、比例、趋势、精确数字 → 必须走 Tufte 矢量层，
   一个像素都不让 AI 乱画。小黑只用在「判断/情绪/转折」这种没有精确数据的地方。
   这是 Tufte 的命根子(诚实/lie factor=1)，怪诞隐喻一旦扭曲数据，整张图的可信度就塌了。
3. **配色走 A：一长图一调色板，小黑入乡随俗。** 长图可用 tufte-viz 全部调色板（按题材/tone 选，
   见 `tufte-viz/references/color-palettes.md`），**不锁死任何一种**。
   无论选哪套版式：
   - **小黑身子恒为黑**——这是 IP 识别度，跨版式不变；
   - 小黑的 **accent 配饰 / 路径 / 手写标注颜色 = 当前版式调色板的那一个 `--accent`**
     （Indigo Porcelain→橙 `#b8542e`；Kraft Paper→酒红 `#a83a2e`；Forest Ink→`#a8482c`；Monocle→`#c1442e`…）；
   - 小黑透明 PNG 直接铺在**该版式的 `--paper` 底色**上。
   一句话：换版式 = 换 `--paper` + 换小黑配饰/标注的 accent 色，小黑的黑身子不动。两层共享一套色板才统一。
   不要用小黑母 skill 默认的红/橙/蓝三色乱配——融合场景只用"黑 + 当前版式那一个 accent"。
4. **小黑透明融入，不套白卡。** 抠成透明 PNG 直接铺在 `--paper` 底色上，黑身子和 accent 配饰浮在纸面；
   不要给它套一个白底卡片(曲直明确否过白卡)。
5. **小黑要胖，可以卖萌。** 提示词强调 round / chubby / plump 的黑豆身子 + 细腿 + 白点眼；
   **表情可爱 / 卖萌是 OK 的**（曲直说可以萌）——这条**覆盖母 skill ian-xiaohei 默认的 "deadpan / not cute"**。
   但别滑到复杂服装 / 儿童卡通 / 精致商业吉祥物那种。瘦小黑不要。

## 工作流

### 1. 消化正文，选锚点
读全文，提炼核心观点和认知转折。挑 ≥3 个最适合小黑的「认知锚点」，给每个锚点想一个
**怪诞但成立的单一隐喻**（一图一结构）。其余内容保持纯 Tufte。

### 2. 设计「图元 × 小黑动作」
这是融合的核心资产。每个锚点定：小黑做什么动作、和哪个数据/结构元素互动、accent 焦点是什么、
2 个内的手写中文标注。详见 `references/glyph-action-map.md`（按隐喻类型查动作）。

### 3. 先搭 Tufte 数据层
用 tufte-viz 的 mobile 模式把长图骨架做出来（卡片、条/轴/节点、数字、标注），
**给小黑预留位置**。**先按题材/tone 从 tufte-viz 的 17 套调色板选版式**（AI/方法论→Indigo Porcelain；
育儿/温暖→Kraft Paper；教育/自然→Forest Ink；通用→Monocle…），记下这套版式的 `--paper` 和 `--accent`，
step 4 生成小黑时要用到 accent（见铁律 3）。同一篇内容也可换不同版式出多版。
> 先读母 skill：`tufte-viz`(信息层规范) 和 `ian-xiaohei-illustrations`(小黑 IP 形象/禁忌/提示词模板)。

### 4. 生成小黑（每锚点一张）
用 ian-xiaohei 的纯净版脚本单独生成，提示词在母 skill 模板基础上加三条**融合约束**（覆盖母模板冲突项）：
- **胖身子可卖萌**：round/chubby/plump 黑豆身 + 细腿 + 白点眼；表情可爱/萌 OK（覆盖母模板 deadpan/not-cute）。
- **配色 A**：小黑身恒黑；唯一 accent = 当前版式的 `--accent` hex（把那套调色板的 accent 色填进提示词，
  例 `#b8542e`），用在焦点物件/路径 + 手写标注；无红蓝、无其它色。
- **抠图友好**：纯白底、≤2 短标注、无左上角标题。
```bash
 "" -s 16:9 -r 2k -o assets/.jpg
```
若使用远程图片生成 API，轮询端点偶发失败很常见 → **必须带重试循环**(见 pitfalls)。不要一次失败就误判为彻底不可用。

### 5. 抠透明
```bash
python3 scripts/cutout_transparent.py assets/.jpg assets/.png
```
脚本从四边 floodfill 抠外部白、保留内部白(眼睛/靶心)。脚本会自检"内部白保留=0"并告警。

### 6. 融入长图
在 Tufte HTML 里，每个锚点处插一个透明 band（无白卡）：
```html
.png" alt="">
```
```css
.bband{margin:14px auto 6px;padding:0;}
.bband img{display:block;width:92%;max-width:340px;height:auto;margin:0 auto;}
```
**务必给 img 宽度约束**(width/max-width + 居中)——无约束的 img 会按原图尺寸撑开冲出页面。

### 7. 渲染 + 自检 + 交付
```bash
python3 scripts/render_longimage.py mobile.html 输出_长图.png --paper 241,243,245
```
脚本渲染 + 按 paper 色裁切，并自检"最宽行 vs 列中位宽"报溢出。
**视觉判断必须人眼复核**：自动化只能做确定性自检(白底/黑线/橙焦点/标注无错字/胖瘦 bbox/无溢出)，
最终好不好看必须看成图再定。

## 落款（对外作品）

长图为对外 IP 作品，**禁标技法 footnote**，也不要把曲直写成原内容作者。默认落款只放：
```
长图生成 by 曲直
```
若内容来自他人分享、会议、逐字稿或外部材料，可另起一行写清原文/来源；但不要把曲直写成原内容作者，除非用户当场另行指定。

## 深入参考

- `references/glyph-action-map.md` — 图元 × 小黑动作映射表（设计锚点互动时查）
- `references/workflow-and-pitfalls.md` — 完整管线细节 + 今天踩过的坑（溢出 bug / SSL 重试 / 无法读图的 QA / 删元素要 CSS+HTML 成对删）
- `assets/example/` — 《如何给 AI 下指令》验证样例（HTML + 三小黑成图），低频视觉校准用，**不要照抄构图**

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [quzhi-ai](https://github.com/quzhi-ai)
- **Source:** [quzhi-ai/tufte-xiaohei-fusion](https://github.com/quzhi-ai/tufte-xiaohei-fusion)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-quzhi-ai-tufte-xiaohei-fusion-tufte-xiaohei-fusion
- Seller: https://agentstack.voostack.com/s/quzhi-ai
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.