Tufte Xiaohei Fusion

Tufte × 小黑 融合长图

一句话定位

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

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

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

1. 小黑只在「认知锚点」出现，绝不当装饰。 一张长图最少 3 个锚点，但小黑是稀缺情绪点，

放在核心判断 / 转折 / 金句处。判断标准：去掉小黑图的隐喻还完全成立 → 它太装饰了，重做。

1. 小黑绝不替数据说话。 凡涉及对比、比例、趋势、精确数字 → 必须走 Tufte 矢量层，

一个像素都不让 AI 乱画。小黑只用在「判断/情绪/转折」这种没有精确数据的地方。 这是 Tufte 的命根子(诚实/lie factor=1)，怪诞隐喻一旦扭曲数据，整张图的可信度就塌了。

1. 配色走 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"。

1. 小黑透明融入，不套白卡。 抠成透明 PNG 直接铺在 --paper 底色上，黑身子和 accent 配饰浮在纸面；

不要给它套一个白底卡片(曲直明确否过白卡)。

1. 小黑要胖，可以卖萌。 提示词强调 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 短标注、无左上角标题。

 "" -s 16:9 -r 2k -o assets/.jpg

若使用远程图片生成 API，轮询端点偶发失败很常见 → 必须带重试循环(见 pitfalls)。不要一次失败就误判为彻底不可用。

5. 抠透明

python3 scripts/cutout_transparent.py assets/.jpg assets/.png

脚本从四边 floodfill 抠外部白、保留内部白(眼睛/靶心)。脚本会自检"内部白保留=0"并告警。

6. 融入长图

在 Tufte HTML 里，每个锚点处插一个透明 band（无白卡）：

.png" alt="">

.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. 渲染 + 自检 + 交付

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
• Source: quzhi-ai/tufte-xiaohei-fusion
• License: MIT

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