Tufte × 小黑 融合长图
一句话定位
一张手机长图里，Tufte 负责骨架和证据（讲清、让人信），小黑负责钩子和情绪（勾住、打动）。 不是把两种风格混在一张图上（那会两败俱伤——小黑要留白，Tufte 要密度），而是分工 + 融入： 小黑做成透明 PNG，直接浮在 Tufte 长图的瓷白底上，和正文卡片共享同一套配色。
这套方法和决策来自已验证样例（assets/example/）和多轮版式迭代，不是凭空设计。
铁律（先读，违背即失败）
- 小黑只在「认知锚点」出现，绝不当装饰。 一张长图最少 3 个锚点，但小黑是稀缺情绪点， 放在核心判断 / 转折 / 金句处。判断标准：去掉小黑图的隐喻还完全成立 → 它太装饰了，重做。
- 小黑绝不替数据说话。 凡涉及对比、比例、趋势、精确数字 → 必须走 Tufte 矢量层， 一个像素都不让 AI 乱画。小黑只用在「判断/情绪/转折」这种没有精确数据的地方。 这是 Tufte 的命根子(诚实/lie factor=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"。
- 小黑透明融入，不套白卡。 抠成透明 PNG 直接铺在
--paper底色上，黑身子和 accent 配饰浮在纸面； 不要给它套一个白底卡片(曲直明确否过白卡)。 - 小黑要胖，可以卖萌。 提示词强调 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 = 当前版式的
--accenthex（把那套调色板的 accent 色填进提示词， 例#b8542e），用在焦点物件/路径 + 手写标注；无红蓝、无其它色。 - 抠图友好：纯白底、≤2 短标注、无左上角标题。
bash<your-image-generator> "<提示词>" -s 16:9 -r 2k -o assets/<name>.jpg
若使用远程图片生成 API，轮询端点偶发失败很常见 → 必须带重试循环(见 pitfalls)。不要一次失败就误判为彻底不可用。
5. 抠透明
bashpython3 scripts/cutout_transparent.py assets/<name>.jpg assets/<name>.png
脚本从四边 floodfill 抠外部白、保留内部白(眼睛/靶心)。脚本会自检"内部白保留=0"并告警。
6. 融入长图
在 Tufte HTML 里，每个锚点处插一个透明 band（无白卡）：
html<div class="bband"><img src="assets/<name>.png" alt=""></div>
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. 渲染 + 自检 + 交付
bashpython3 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 + 三小黑成图），低频视觉校准用，不要照抄构图
