TL;DR

Lieflat Charts 是一个开源的数据可视化 Skill：装进 AI agent 后，你只管丢数据和说结论，它按”数据契约先行”的规则产出编辑级审美的 HTML 图表。一条命令安装，20 分钟上手。

准备

  • 任一兼容 Agent Skills（SKILL.md）的工具：Claude Code、Codex、Moxt 等
  • 一份想可视化的数据（CSV / 表格 / 报告原文都行）
  • 注意：生成的 HTML 图表部分模板经 CDN 加载 Chart.js/ECharts，查看需联网

它为什么好看（设计理念 30 秒）

和”直接让 AI 画个柱状图”的区别在于它有一套硬规则：

  • 先数据契约，再选图型——不先挑模板，先判断数据结构适合什么
  • 每张图只承担一个独立结论，再组成整页；不为凑数重复表达
  • 真实数据单位是视觉原子——一根 tick 可以是一个人，不用装饰噪声伪造密度
  • 三种阅读速度：Lupi Editorial（细读，发丝线+旁注+账本导轨）/ Lupi Basics（常见图型加编辑排版）/ Glance（粗柱大数字，10 秒看懂排名与异常）
  • 色彩有纪律：Mono 黑白灰保底；青瓷蓝给有序序列、椰林绿给少量无序类目、编辑部红给受控视线落点；同一份 HTML 只用一套色彩系统

步骤

安装（一条命令）

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

或者把下面这段话直接发给有 shell 权限的 agent：

安装话术 
帮我安装 lieflat-charts。请把 https://github.com/larashero3-dotcom/lieflat-charts 克隆到 ~/.claude/skills/lieflat-charts，安装完成后检查 SKILL.md、templates/、catalog.md 和 mono-tokens.js 是否存在。
参数 取值 说明
Codex 用户 路径换成 ~/.codex/skills/lieflat-charts 其余不变
更新 git pull 后确认最新 commit 已安装过时这样说

使用（说需求，不说图表类型）

安装后直接对 agent 说，让它按数据契约自己选图型：

周报场景 
这是一份周报数据，要求 10 秒内看懂排名、变化和异常。[粘贴数据]
公众号长文场景 
把这份调研数据做成适合公众号长文的 5 张中文版图表。默认先比较 Lupi Editorial 和 Lupi Basics 候选；两组都不适配时，再使用 Glance。
调色与风格 
用青瓷蓝预设重做这张图，用明度深浅表示数值大小，不改变原图的结构。

图数规则（skill 内置，了解后好提需求）：单个结论 1 张，2–3 个结论 2–3 张，完整文章 4–6 张，单页最多 6 张。

成品对照

实测生成的 HTML 图表截图将由实测补充（R-004）。自检标准：同一份数据跑 Lupi 与 Glance 各一张，前者能读 30 秒以上、后者 10 秒内看懂结论。

常见坑

现象原因解法
打开 HTML 图表是空白Glance/交互模板经 CDN 加载 Chart.js/ECharts查看时联网；或让 agent 换原生 SVG 的 Lupi 模板
商用被许可卡住PolyForm Noncommercial 许可公司项目商用需向作者取得授权；个人学习/非商用不受限
生成的图和预期图型不符直接指定了图表类型改说”结论+场景”（如”10 秒看懂排名”），让它按数据契约选型
一页塞了十几张图没有结论优先按”一个结论一张图”砍，单页 ≤6 张
彩色版花哨过火色系与数据类型不匹配有序数据→青瓷蓝，无序类目→椰林绿，强调落点→编辑部红；拿不准就回 Mono

方法致谢

本文素材来自 @Zhiyu333 的 Lieflat Charts 帖子（2026-09-01，作者在 Moxt 制作并开源），数据与安装方式以官方仓库 README 为准。

下一步