Lieflat Charts：让 AI Agent 产出「有品味」的数据图表

一、故事从一个具体场景开始

设想一个真实的下午：产品经理把一份 CSV 拖进对话框，说"帮我把这季度各渠道的转化画出来"。AI Agent 立刻回了一张图——蓝红撞色、3D 饼图、图例挤成一团、数据标签重叠、数字被四舍五入成整数。技术上"成功"了，但没人敢把它放进周报。

问题出在哪？不是模型不够聪明，而是模型缺少一套"品味法典"。 图表好不好看，本质上是一套需要被明确写下来的规则——什么时候用粗柱而不是细线、什么时候把单位刻度标出来、什么时候留白比数据更重要。而这些规则如果只活在某个人的脑子里，就永远无法被 Agent 复用。

Lieflat Charts 就是把这套法典写下来、并且连同 63 张成品模板一起交付的方案。

二、背景：它不是图表库，而是一份"图表规范"

项目作者"躺在废墟里"于 2026 年 7 月 16 日创建该仓库，4 个月内积累 6753 星、410 fork、约 300 位贡献者，成为 Agent Skills 生态中增长最快的可视化 Skill 之一。

它的定位异常清晰：这是一个遵循 Agent Skills 格式的静态资源包，不是需要启动的服务。核心资产是三类文件：

• SKILL.md（约 19.5 KB / 19534 字符）——图表品味法典本体
• catalog.md + 5 个 gallery 文件——63 张图型的索引与真实实现
• templates/——24 套报告模板 + 8 套演示模板 + 21 个换肤样张

仓库根目录没有 package.json、没有 Dockerfile、没有 CI 配置、也没有测试目录中的单元测试文件——只有两个 Node 脚本：scripts/validate.mjs（结构与配色一致性静态校验，12 KB）和 scripts/smoke-new-charts.mjs（基于 Playwright 的运行时烟测，逐个打开 12 个 gallery、滚动触发懒渲染、断言 SVG 子元素数与控制台无报错）。

三、类比：它像一本"版式圣经"

如果把图表生成理解为出版，Lieflat Charts 就是排版规范手册：

• Mono（黑白灰） 是正文墨色 —— 墨色深浅直接映射数据大小，最重要 = 最黑。它是"保底方案"，任何数据都不会出错。
• Porcelain 青瓷蓝 / Palm 椰林绿 / Wire 编辑部红 是三套彩色预设 —— Agent 会根据数据语义自动选：有序单序列用青瓷蓝，少量无序类目用椰林绿，需要一个受控视线落点用编辑部红，适配不明确就退回 Mono。
• Lupi / Glance / Basics 是三种阅读速度 —— Lupi 细读 30 秒以上，Glance 3 秒读完，Basics 是熟悉轮廓加编辑质感。

关键约束只有一句话：同一份 HTML 或同一组图只锁定一种色彩系统，不得混用。 这条规则看似苛刻，却正是大多数 AI 生成图表最难看的原因——模型总爱在同一张图里同时使用彩虹色、渐变、阴影和 3D。

四、核心功能与真实场景

1. 硬约束式选型，替代模型的自由发挥

catalog.md 给 63 张图型各挂三个标签：数据形状（选图主键）、场合、读者时间。SKILL.md 规定了不可违背的选型顺序：

1. 默认先完整审计 Lupi Editorial（L1–L19）
2. 再审计 Lupi Basics（F1–F17）
3. 只有两者都不适配，或用户明确要求 dashboard / 三秒快读，才允许进入 Glance
4. Maps 仅在用户明确要求地图时启用
5. 主力（L1–L15、F1–F13）用尽后可用后备，但必须写明"主力的哪几张、因为什么不适适配"

同时还有 5 张"例外直用"图：OHLC 四值 → F17 Candlestick；五数概括+异常值 → F15 Tick Box；同一实体跨 3–6 连续维度 → L20 Parallel Coordinates；整年 52 周×7 天 → L17 Calendar Heatmap；密度轮廓 → G19 Violin。

更硬的一条：必须从仓库模板生成。不允许脱离模板另画一张"看起来差不多"的图，不允许拼接多个模板造混合图型，不允许退回图表库默认样式。Agent 必须先在 catalog 锁定图型编号，再打开对应 gallery 里的 <div class="card"> 块、找到 // ════ 图型名 ════ 注释块拿到真实渲染代码。

2. 三种交付模式，边界清晰

模式	触发条件	产物
图表模式（默认）	只给数据，或说"可视化/分析数据/做几张图"	单文件 HTML 图表
演示模式	明确说"一套 PPT / 幻灯片 / 演示文稿"	16:9 HTML/PDF 演示，19 页模板
报告模式	明确说"报告 / 年报 / 月报 / 白皮书 / 海报 / brief"	整页 HTML 报告，R01–R12 模板

SKILL.md 反复强调防升级："用户同时说了'分析'但没有明确要求报告，先交付最强单图或 2–3 张证据图，不得直接生成报告"；"用户提供的 PPT、截图或 HTML 只能作为画布参考，不是数据来源，也不能决定图型"。

3. 面向非程序员的自然语言接口

SKILL.md 开头直白写道：目标用户是写作者、运营、做 PPT 的人，"他们说人话（'帮我把这季度转化画一下，发公众号用'），不说图型名"。Agent 的职责是把人话翻译成正确的图，而且好看到能直接发出去。

4. 数据契约与真实性约束

所有图表"尽量保留数据的真实单位"——一格可以是一个百分点，一根 tick 可以是一个人，一条 hairline 可以是一天。演示模式还明确禁止"照搬模板示例数字或发明新图型"，数据、单位、时间范围、来源、标题结论必须来自用户材料或明确标注的计算。

图：Lupi Editorial 系列实拍——细线、点阵、大量留白与旁注，适合论文、年报与公众号长文

五、上手门槛：CLI 与 Agent 两端

安装极其简单，零依赖、零构建：

npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts

或直接克隆到 ~/.claude/skills/lieflat-charts（Codex 用 ~/.codex/skills/）。装完后对 Agent 说一句"把这份调研数据做成适合公众号长文的 5 张中文版图表"即可。

运行期有一个必须注意的约束：纯 SVG 图可离线运行，但使用 Chart.js、ECharts、地图 GeoJSON 或在线字体的图，需要联网。仓库模板通过 CDN 引入 chart.js@4 和 echarts@6，字体走 Google Fonts（Inter、Noto Sans SC、Source Serif 4）。内网或离线环境下若不内联依赖，图表会缺库空白。

仓库自带 examples/ 提供成品参照：lenny-2026-survey.html（23 KB）、examples/presentations/presentation-studies-v3.zh.html（105 KB）、examples/reports/r04-financial-report.zh.html（19.7 KB）。

图：Glance 系列——粗柱、大数字、色块与清晰排序，3 秒读完，适合周报与汇报

六、争议与局限：不回避

1. 许可证是最大的约束。 LICENSE 文件为 PolyForm Noncommercial License 1.0.0（GitHub API 因非标准文本返回 NOASSERTION，PIFS 已正确回退识别为 PolyForm-Noncommercial-1.0.0）。该协议允许非商业用途，但明确禁止商业使用。对企业团队而言，这是落地前必须过法务的一关。

2. 强约束也可能变成强限制。 "必须从模板生成、禁止另画"这条规则保证了下限，但当用户数据形态非常规、63 张图型都不匹配时，Agent 只能被迫用"最接近"的模板，可能出现"数据被图型绑架"的情况。SKILL.md 自己也承认这一点，所以才设置 F15/F17/L17/L20/G19 五个例外直用通道。

3. 视觉风格是被强推的。 "统一视觉语法"意味着所有输出长得像同一个品牌。对追求品牌多样性的团队，这是减分项；对追求"丑但能用"的团队，反而是收益。

4. 强依赖外部 CDN 与在线字体。 前述离线问题在企业内网环境是真实障碍。虽然 SKILL.md 建议开源分发时内联 mono-tokens.js，但并未强制要求内联 Chart.js / ECharts 与字体。

5. 仓库规模已近 1MB 图片资产。 docs/assets/ 下有 42 个 PNG 与 8 个 GIF，其中 interactive-motion.gif 单文件 2.36 MB、color-porcelain-almanac-motion.gif 1.78 MB。克隆仓库会拉取大量二进制，动辄数百 MB，对 CI 缓存和网络不友好的环境是负担。

6. 缺乏自动化测试闭环。 仓库有 validate.mjs 与 smoke-new-charts.mjs 两个脚本，但没有 GitHub Actions 工作流把它们接入 CI。这意味着校验是"手动执行"而非"提交即校验"，质量门禁依赖作者自觉。

7. 贡献者数据的真实性需要警惕。 GitHub /contributors 接口的 Link header 末页推算约 300 人，但该项目主体为单人主导的模板仓库，300 这个数字大概率包含了大量浅层 fork/引用者贡献，并不等同于 300 位活跃维护者。

图：Interactive 交互大图系列——ECharts 力导向网络，支持拖拽与缩放，用于高密度关系数据

七、行业意义：从"能画"到"画得好"

Lieflat Charts 代表了 Agent Skills 生态的一个关键转折：从提供能力（capability）转向提供品味（taste）。

早期 Agent 可视化工具大多解决"能不能画"，而这个项目明确把"该画成什么样"沉淀为可执行、可校验的规则文件——63 张图型索引、强制选型顺序、色彩互斥约束、图数上限（单页默认最多 6 张，不为凑数重复表达同一结论）、prefers-reduced-motion 无障碍支持。

几个信号值得注意：

• 6753 星 / 410 fork / 约 300 贡献者，说明它已被广泛试用与二次分发
• 从单一图表扩展到完整交付链：2026-09-25 加入演示模式，2026-10-15 补齐 4 套完整彩色演示模板，报告模式提供 12 套中英双版整页模板
• 中英双语平权：所有报告与演示模板都提供 .zh 与 .en 两版，说明作者的目标市场不止中文区
• 2026-10-15 修复 Windows 路径分隔符问题（#22），反映出真实的跨平台使用场景

图：Report Mode 整页报告模板（12 套中英双版），覆盖调研报告、业务数据报告、财报分析、dashboard、海报与个人年度记录

八、适用与不适用

适合：内容团队与数据分析岗做公众号长文、年报、周报、复盘；有品牌视觉规范要求的商业内容（注意许可）；需要把"图表品味"作为团队共识固化下来的组织。

不适合：商业闭源分发场景（PolyForm 禁止）；纯离线内网环境（需自行内联 CDN 依赖与字体）；需要实时交互式 BI 或后端数据服务（这是静态产出工具，不是数据平台）。

---

本文基于 GitHub 仓库 larashero3-dotcom/lieflat-charts 于 2026-11-07 的公开快照分析：6753 stars、410 forks、约 300 contributors、PolyForm Noncommercial 1.0.0 许可、最近推送 2026-11-03。