Lieflat Charts 技术拆解：惊艳的可视化是怎么被工程化出来的

背景

最近我在给团队找一套能稳定产出高质量可视化的方案，试到一个开源 skill 叫 Lieflat Charts。出图效果跟常规 AI 可视化明显拉开了差距：同一类需求，不给它这套 skill，画出来就是另一副面孔——默认蓝、渐变、图例挤成一团。

因为后面我们有大量生成创新可视化的需求，我把这个库整个拆了一遍：SKILL.md 的规则、49 张图型的目录、三个 gallery 的实现代码、设计 token 文件、12 套报告模板，还有提交历史。这次拆解也参考了另一份 AI 的分析报告，里面引用的两篇论文后面会用到：EMNLP 2024 Findings 的 AcademiaChart，和 2026 年发表在 IEEE 可视化期刊上的 When Users Don’t Specify。这里做个记录。

常规可视化平庸在哪

先说它到底突破了什么。AI 做可视化有一条下意识路径：拿到数据，想起一个图型名（柱状图、饼图），调图表库，接受默认样式。这条路径两端都有问题。选型端，模型挑的是训练语料里出现频率最高的图，未必是语义最合适的那张；执行端，模型在字体、间距、对齐、色彩纪律这些细节上系统性翻车。这两点分别有论文支撑，就是前面提到的那两篇。

平庸可以拆成三层：选型平庸（占比就画饼图）、执行平庸（颜色乱、标签重叠）、表达平庸（标题写”收入柱状图”，不写判断）。Lieflat Charts 整份 SKILL.md，就是对着这三层各下了一剂药。

拆解

选图的主键换了

catalog.md 给 49 张图每张挂三个标签：数据形状、场合、读者时间。图型名在选型流程里消失了——“带正负的分类数值”指向 G10，“多对一归属”指向 L5 或 L12，“逐事件时刻分布”指向 L10。决策树按数据形状索引，每一步给出跨系列的候选，并且强制至少比较 3 个候选、写下淘汰理由。这条规则防的是模型抄离手最近的那张图。

读者时间被提升到和场合同级的维度。“读者愿意花几秒”直接把 49 张图分成两种世界观：Lupi 系发丝线、逐记录、30 秒细读；Glance 系粗柱、大数、提前聚合、10 秒扫完。大多数图表库按”静态还是可交互”分类，这套系统按”读者给几秒”分类。这一点对我触动很大：可视化的目的从来都是在时间预算内传递一个判断，常规流程里这个预算没人问过。

小数据的密度从哪来

这是我觉得最值钱的部分。数据只有几个百分比时，常规做法就是一根柱子，画面寒酸。Lieflat 的答案是单位分解，原话是”密度来自单位而不是记录数”：把聚合数摊回可数单位。

看 Ballot Tally（L15）的实现代码，多选题每个选项画满 100 根发丝刻度（节选，去掉了动画属性）：

for (let k = 0; k < 100; k++) {
  const x = 28 + k * 3.44, picked = k < v;
  const h = picked ? 12 + rnd(k+1, i+2) * 5 : 4.5 + rnd(k+1, i+5) * 2;
  el(s, 'line', { x1: x, y1: base, x2: x, y2: base - h,
    stroke: picked ? INK : '#CFCEC7', 'stroke-width': picked ? .9 : .55 });
}

46% 就是 100 根刻度里前 46 根被上墨、变高变粗，每第 10 根点一个标记。底注写”ONE TICK = ONE RESPONDENT”。Hundred Field（L14）更绝：四个占比摊成 100 个点，按黄金角 137.508° 做向日葵排列，每第 5 个点从圆心拉一根辐条，簇与簇之间连虚线。质感的密度是数学算出来的，不靠堆装饰。

注意边界：规则写明”只摊诚实单位，不编造个体记录”，取整少了人要写底注说明。创意被诚实性兜住，这是它能反复使用的原因。

另一半答案藏在我差点漏掉的一条规则里：gallery 好看有一半靠无数据的家具——账本纸横线、虚线导轨、刻度环、每 10 单位一根立柱网格、旁注引线。原文原话：“只画数据 + 一根底线的小数据图必然寒酸。“数据层诚实稀疏，密度预算花在家具上。这大概是全库最反直觉的一条经验，因为它承认了一个大家不好意思说的事实：惊艳感有相当比例来自”没有数据”的部分。

把品味写成代码

mono-tokens.js 只有 177 行，自称”风格的唯一正本”：纸灰和炭黑两极、7 级灰阶、Inter 字重梯度、动画参数、卡片骨架 CSS。任何文件和它冲突，以它为准。明度即数据——最重要的系列拿最黑的那级。禁渐变、禁阴影、禁发光、柱状图禁断轴。还有个细节：演示数据用确定性伪随机 rnd(i,k)，不用 Math.random()，注释写的原因很实际——“刷新必须长一样，否则截图、录屏、回归对比全部失效”。

一开始我以为惊艳来自这些约束。后来把自己的结论攻击了一遍，发现因果不完整：约束只保证下限（不丑、统一），峰值另有来源，后面说。

彩色部分更能看出工程思路。三套预设各带一个显式的色彩逻辑字段：porcelain 是 ordinal（明度即数据，只是把灰换成蓝）、palm 是 categorical（色相对应类目，琥珀只给主角）、wire 是 mono+accent（灰阶扛全部数据，荧光橙永远只给一个元素）。文件里还有一条写死的加墨规则 INK_BOOST：灰阶下 0.5px 发丝线看得见，换成淡彩色就消失，所以线宽统一乘 1.8、透明度加地板。注释原话：“这不是可选项。“颜色在这里也是数据契约，带容量上限——类目超过 6 个直接退回灰阶。

错误怎么变成规则

这套库最像”复盘文化”的地方，是它把每次返工都固化成了规则：

第七节”什么时候说不”：断轴柱拒绝并给出三个诚实替代；发光、玻璃拟态、3D 拒绝；给纯装饰元素加交互拒绝，理由是”给没有内容的元素加 hover 是欺骗”。
交付前 14 条自检，最后一条是我的最爱：“这张图放回所选 gallery 的对应卡片旁边，是不是同一个模板家族，而不只是’风格有点像’？”
catalog.md 末尾有一节”已移除图型”，像墓碑一样记录每张被删的图和原因。Slope Beads 因为交叉斜线可读性不足被删，原文还补了一句”不建议按原样恢复”。
SKILL.md 里散落着带事故记录的规则：“抄形不抄魂 = 白做（pictorial bar 曾把’符号计数’错做成’树长高’，返工）”、“动画不可优于结构（effectScatter 教训）”。
提交历史同样如此：第一个 PR 修的就是骨架文档里 Chart.js 该挂 canvas 却写成 div 的错误；后来有一次提交专门把默认输出从报告改回图表，因为 agent 太容易自作主张升级成报告。

用户要的图不在 49 张里时，走”翻译流程”，第一步是灵魂拷问：这个图型编码了什么？每个视觉通道（位置、长度、角度、面积、明度、密度）分别对应哪个数据维度？答不出来就回去问数据结构。报告模板层同样贯彻这个原则。R04 财报模板的注释写着，它的排版参考是一张浅蓝海报，“只学排版和字体，浅蓝不学”；汉字没有压缩字形，书脊就换成重黑体加收紧字距。同一个方法论：学结构，换材质。

修正后的结论

按第一性原理的流程，对自己的结论做了一轮对抗审查之后，我把最初”惊艳来自约束”的说法修正成三件事的乘积：

峰值来自资产：49 张图型的本体设计、纹理生成器（黄金角、确定性抖动、手绘 blob）是高创意的人工产物，协议只是防止它们在复制中退化。只有 token 没有这些图，产出会统一但平庸。
下限来自协议：候选审计、说不清单、14 条自检，把失败案例变成防再犯规则。
一致性来自 token：批量产出”一眼一家人”。

另外有一条两边分析都漏掉的硬约束，写在这里提醒自己：这个库是 PolyForm Noncommercial 许可，禁止商用。方法论和协议可以学，模板和代码资产不能直接搬进商业项目。

经验教训

常规可视化的病根在选型路径：先想图型名，再看数据。倒过来做，先判数据形状和读者时间预算，图型名最后出现。
小数据要有质感，靠单位分解（1 刻度 = 1 人）加环境家具（导轨、刻度、旁注），两项都有诚实性边界。
品味可以工程化：token 唯一正本，加负面清单和自检清单。负面清单比正面指导管用，因为”违反即返工”比”建议”可执行。
每次返工都值得固化成一条规则或一条墓碑记录，半年后它就是别人眼里的天赋。
学参考图学魂不学形：先回答每个视觉通道编码什么，再决定抄什么、换什么。
下一步：按这套协议起草我们自己的创意可视化 skill，每种美学各建一套 token 正本，不往一套里塞。