正在加载…
写在前面
大家好，我是宋超。
今天这条你先别急着读字，往下滑，把几张动图看完再决定要不要往下看。
我们平时让 AI 帮忙出图，最尴尬的一步往往不是数据，是出来那张图一眼就是「默认样式」，扔进公众号、扔进汇报 PPT 里都拿不出手，最后还得自己回 Excel 里手动调半天。今天分享的这个东西，就是专门解决这一步的。
它是一个开源的图表 Skill，装到你手上的 CodeX 里，你把数据丢给它、说一句用在什么场合，它自己选图、自己出图。出来的不是一张死图片，是一个会动的网页，双击就能打开。
读完你能带走三样：它长什么样、今天怎么装上试一把、以及它身上最值得我们学的那一层。
📌 内容出处：推特 @躺在废墟里，开源项目 Lieflat Charts · 点这里看原文
先看效果，别看字
这张叫「同一份数据，三种看法」。十二个产品的价格和满意度，每三秒在三种画法之间飞一次。
这张是八个产品从 2019 年到 2026 年的营收赛跑，谁领先谁就变成最黑的那根。
这两张图有个共同点：它们都不是截图，是浏览器里正在跑的网页。作者的原话是，做成 HTML 的好处很明显，动效可以很丰富，还能无缝接到用 HTML 做的 PPT 里；要是你非得用传统 PPT，让 AI 把它转成动图贴进去就行。
它到底是个什么东西
这个项目叫 Lieflat Charts，作者是推特上的 @躺在废墟里。7 月 16 号开源，到今天一个多月，GitHub 上三千七百多颗星，还被 GitHub 趋势榜收录过。
那条介绍它的推文，点赞五千一，收藏八千一。收藏数比点赞还高不少，这个信号挺有意思：大家不只是路过点个赞，是真的存下来准备回头动手。
评论区里被说得最多的一句是「好看」，还有人调侃说，三千多颗星说明大家真是被默认图表丑怕了。也有人一句话点到了要害：HTML 做图真正的好处不只是动效，是把图表、报告和网页交付统一成了同一套流程。
它本身不是网站也不是 App，它是一个 Skill。就是第一周讲的那个 Skill，一份写给 AI 看的执行手册。装上以后，你的 CodeX 就多了这门手艺。
顺带说一句，第一周教过挑 Skill 的三个指标，看点赞、看新鲜、看说明书。这个项目三样都过得去：三千七百多颗星、这几天还在更新、README 长得比很多产品官网还讲究。
它有三种画法，看你的读者愿意花几秒
这是我觉得它最聪明的地方。它没把图表分成「柱状图、折线图、饼图」，而是看读者愿意在这张图上花几秒。
第一种叫 Lupi 编辑叙事型，给愿意凑近了慢慢看的人。它拒绝把数据揉成一个结论，而是把原材料摊开，一个点就是一条真实记录。适合年报、公众号长文、海报这种。
第二种叫 Basics 基础型，就是大家熟悉的柱线饼，但它在细节上较劲。你放大看那根柱子，它不是一块实心色块，是一格一格数出来的，一格代表一千块钱；折线上一个点是一天，空心的点是周末。数据量不大但又想让画面有质感的时候用它。
第三种叫 Glance 快读型，给只肯扫一眼的人。粗柱子、大数字、排序清楚，十秒内看懂谁高谁低、哪里出了问题。周报、汇报、看板用这个。上面那张营收赛跑就是。
除了这三种，还有专门的交互大图，用来放那种普通静态图扛不住的关系数据。下面这张画的是一百八十个服务之间的调用关系，在网页里你能用鼠标把它拽来拽去、放大缩小。
颜色也是有讲究的
它默认是黑白灰，作者管这套叫 Mono，是稳定的保底方案。除此之外还有三套彩色，名字起得很中国：青瓷蓝、椰林绿、编辑部红。
青瓷蓝是同一个颜色的深浅变化，适合有先后顺序的数据。下面这张是八年的客服工单量，每个泡泡是一个产品模块在某一年的量，深色内核代表升级过的紧急工单。
椰林绿是用颜色区分少数几个并列的类别。这张是五十个市场的注册量，柱子像波浪一样依次落下来。
编辑部红最克制，整张图是黑灰的，只给一个位置一点荧光橙，用来指挥你的眼睛该看哪儿。这张漏斗图里，每一根细丝是一个人，四千两百个访客怎么一层层漏成三百一十个付费的，一目了然。
有个外国网友的评论我觉得挺妙，他说青瓷蓝这套配色让他想起中国的水墨和瓷器。一套配色能被人认出文化来源，这在数据图表里是很少见的。
颜色不用你开口。你不说要彩色，它会自己看数据结构和使用场合来定；你要是给了自己的品牌色，它也能照着配一套。规矩是同一份交付只用一套色，不混着来。
要出整份报告，它也能干
单张图之外，它还有 12 套整页报告模板，每套都有中文版和英文版。调研报告、年度复盘、业务看板、海报、简报，甚至运动和旅行的个人数据记录都有。
下面这张是它的中文年报模板。我特意挑了中文版放上来，因为很多海外做的模板一放中文就垮，它这个没有。
你能拿它干哪些活
说回我们自己手上的活。我想到几个特别顺手的：
写公众号的时候配一张数据图。以前要么去找图，要么忍着用截图，现在把手里的数字丢给它，说一句「这是要发公众号的」，它出的图直接能用。
做月度复盘和汇报。把这个月的数据整理成表格给它，说要十秒内看懂排名和异常，它会给你 Glance 那一路的图。
做年度总结。这个我特别推荐。你今年读了多少本书、跑了多少公里、在知识库里记了多少条笔记，这些数字平时躺在那儿没人看，做成一张年度海报，它就成了一件能拿出来的东西。我们说记录是投资，图表就是把记录兑现的那一步。
社群运营和项目复盘。人数变化、活跃度、转化漏斗，这些数据你本来就有，只是一直没有好看的方式讲出来。
最值得学的，其实不是图
聊到这儿我得说一个更要紧的。这个项目里，图只是结果，真正厉害的是它那份说明书。
作者把自己的图表审美，写成了一份给 AI 看的硬规则。我挑几条给你看：
柱状图不断轴。柱的契约是长度和数值成正比，断轴毁契约。
标题写结论不写图型名。「Revenue by plan」可以，「柱状图」不行。
明度即数据。最重要的那个 = 最黑的那个。
动画不可优于结构。一个效果如果需要发明新布局才能安放，不配存在。
还有一句是直接写给 AI 的，我看到的时候愣了一下：
目标用户是非程序员，写作者、运营、做 PPT 的人。他们说人话，不说图型名。你的职责是把人话翻译成正确的图，而且好看到能直接发出去。
你看明白了吗？它出来的图好看，不是运气，是有人提前替你把上百个判断写死了。你说「帮我把这季度的转化画一下，发公众号用」，它背后走的是一整套选型流程：先看你的数据是什么形状，再从几十个模板里比较至少三个候选，淘汰的还得写明为什么淘汰。
这件事对我们的启发比工具本身大。很多人写 Skill 是在列功能清单，而好的 Skill 是在写判断标准。前者是告诉 AI「你能干什么」，后者是告诉 AI「什么样才算干得好、什么情况下不许这么干」。第四周自己动手做过 Skill 的同学，我建议你把它这份说明书当教材翻一遍，比看十篇教程管用。
今天怎么试
第一步，先别装，打开看。作者把所有模板做成了在线画廊，网址是 larashero3-dotcom.github.io/lieflat-charts，手机上也能开。里面的交互大图可以直接上手拖，报告模板可以逐套翻。看完再决定要不要装，五分钟的事。
第二步，想装的话，还是第一周那一招。把项目网址复制给 CodeX，说一句「我很喜欢这个 Skill，帮我安装一下」，剩下的它全包。网址是：
想让它做得更稳一点，可以在后面补一句「装完检查一下 SKILL.md、templates 文件夹和 catalog.md 在不在，然后告诉我结果」。它会自己去核，核完回你一句话。
第三步，装完直接说人话。不用记图型名字，把你的数据贴进去，加一句用在什么场合就行。比如：
这是我这个月的社群数据，帮我做两张图，要发到公众号里，中文。
把这份表格做成一张周报用的图，要求十秒内看懂排名和异常。
用青瓷蓝的配色重做这张图，结构不要变。
三个提醒，你用起来会更顺
一是有些图需要联网。它的图分两类，纯手绘的那种断网也能打开；用到图表库或者在线字体的那些，得联着网才显示得全。你要是发现打开是空白，先看看网。
二是授权这件事得注意。它用的是一个「非商业」的开源授权，自己学习、自己用、团队内部用都没问题，但如果你要拿它给客户做交付、或者放进要收费的产品里，得单独去找作者取得许可。这条别忽略，做自由职业和接单的同学尤其。
三是数据自己再核一遍。AI 出图快，但数字是你自己的。发出去之前，把关键的几个数拿原始表格对一下，这一步谁也替不了你。
最后
我把它推荐出来，不只是因为图好看。
更打动我的是，一个人认真琢磨了很久的审美和判断，可以被写成一份文档，然后被成千上万人装进自己的 AI 里，变成他们也拿得出手的东西。这在以前是不可能的，手艺只能靠带徒弟传。
所以别只是收藏。今天就挑一组你手上真实的数据，可以是这个月的收入、可以是你今年读的书、也可以是你社群的人数变化，让它给你出一张图。做出来的第一张图，欢迎发到社区里，我很想看看大家会拿它画什么。