pdf-triptychlisted

# pdf-triptych 把一份长文档拆成三张有递进、有共同标尺的图。 ## 这套流程解决什么 长标准文档读不动，不是因为字多，是因为**结构藏在字里**：哪些是主线、哪些是横切、哪些只是用法，原文往往不说。直接"把 PDF 转成图"会得到一堆罗列的方框；正确顺序是先把结构挖出来，再决定用什么形状承载，最后才写代码。 三张图的分工与联系： | 图 | 讲什么 | 与上一张的关系 | |---|---|---| | 一 · 骨架 | 这份文档的层级结构：从抽象到具体怎么展开，哪些定义横跨若干层，有没有第三维度 | — | | 二 · 细节 | 概念之间的准确关系，通常是把原文里的几张 figure 揉成一张 | 与图一**同轴叠放**：图二的每个框落在图一的哪一列，就属于哪一层 | | 三 · 例子 | 换成一个具体场景，每样东西落在哪一列 | 与图一**同列**：沿竖虚线往上看就知道它对应结构的哪一层 | 共同标尺有两样，缺一不可：**贯穿全图的竖向虚线（列）** 和 **全文统一的三类颜色**。 **张数由文档结构决定，不是写死三张。** 判断标准： - 原文的几张 figure **之间有主从关系**（一张是骨架，另几张是它某个节点的放大）→ 骨架与细节**分成两张**，细节那张标明谁是谁的放大。 - 原文的 figure **互不相交、谁也不属于谁** → 骨架与细节**合成一张**，把几张切面并排，并明说"它们不是一条线上的几段"。这时总共两张图。 - 例子层始终独立成图。 第二次执行（ISO/IEC 22989）走的是第二条：那份标准的三张图互不兼容，原文从未说过谁属于谁，合成一张并列展示是对的。 ## 视觉语法的底线 这套图的视觉语法是固定的，不要每次重新发明。下面几条直接用： | 项 | 内容 | |---|---| | 色板哲学 | 纸灰 `#F0EFEB` + 炭黑两极；**一律实心**：不透明材质、不发光、不渐变滤镜、无阴影。质感全靠明度对比和形状 | | 卡片四件套 | 结论式标题 `h2` + 副标题（图例、单位、范围，用 ` · ` 分隔）+ 图 + 来源行（全大写、加字距） | | 标题规则 | **写结论不写图型名**。"从一个概念展开到每一条可落地的指标" 好过 "扇出树" | | 形状 | 卡片圆角 24px，无边框无阴影，靠留白分卡 | | 字体 | Inter + 苹方；标题 700 / 数值 800 / 轴标签 600 | | 动画 | 只用一次淡入，快进快停不弹跳；必须带 `prefers-reduced-motion` 降级 | | 交互 | 这根线背后有没有真实记录？没有（纯示意的发丝线）→ **禁止加交互**，给没有内容的元素加 hover 是欺骗 | | 演示数据 | 确定性伪随机，禁用 `Math.random()`——刷新必须长一样，否则截图和回归对比全失效 | | 说不的底线 | 发光 / 玻璃拟态 / 3D → 拒绝；断轴 → 拒绝 | 有两条是**概念结构图特有的**，和常见的数据图表做法正好相反： **一、不要单一强调色。** 数据图表通常有一个要讲的结论（哪个最大、哪个异常），拿一个强调色指向它是对的。但概念结构图要讲的是**整体结构**，没有哪个分支比别的更重要，单一强调色会制造虚假的重点。 > **失败模式**：首次执行时，我把唯一的橙色给了一个分支（它确实是原文里最特别的一支）。用户的反馈是："整个页面唯一的颜色给了这一支，一般人会觉得这是所有