技术知识库 · 工具评测 · · 国科智飞 Gavin
lieflat-charts：把图表审美写成 Agent 可执行的规则
一套给 Agent 的视觉语法：先判数据契约再选图型，用统一色板与留白让 HTML 图表有编辑感。License 是个要注意的坑。
lieflat-charts 是 moxt.ai 出品的一套数据可视化 Skill，2026 年 7 月中创建，一个月左右在 GitHub 拿到七百多星。它遵循 Agent Skills 格式，装进 Claude Code、Codex 或 moxt 这类兼容 SKILL.md 的 Agent 之后，能把数据生成有编辑感的 HTML 图表。
它最值得说的定位是：不是模板库，而是一套视觉语法。模板库给你一堆好看但难改的样例，视觉语法给的是一组决策规则——字体、留白、线条、动效、数据契约怎么定，让 Agent 每次出图都在同一套语言里。
能力与亮点
先判断数据契约，再选图型。 这是整个 Skill 的第一原则，也是最值钱的一条：不是从模板目录里挑一个顺眼的，而是从数据结构出发决定视觉形式。这个顺序反过来，才是大多数难看图表的来源。
三种阅读速度对应三类读者。 Lupi 是编辑叙事型，细线、点阵、大量留白，适合论文、长文、年报和数据故事；Glance 是快速判断型，粗柱、大数字、色块、清晰排序，几秒看懂高低与异常，适合周报和汇报；Basics 保留柱线环等熟悉轮廓，适合结构简单、数据量少的内容；Interactive 面向高密度关系数据，力导向图这类探索型大图。
色彩系统有兜底也有克制。 Mono 黑白灰保底，另外三套彩色预设：青瓷蓝是有序单序列，椰林绿用于少量无序类目，编辑部红用黑灰阶加荧光橙做视线落点。用户可以按品牌色建自定义色板；同一份 HTML 只使用一种色彩系统，这条约束避免了「五颜六色 PPT」式的灾难。
图型目录按读者时间分类。 目录里有 49 张图，每张挂三个标签：数据形状、场合、读者时间。找图不是按名字翻，而是按「我有什么数据、给谁看、他有多少时间」筛。
规则先于模板，这是可迁移的方法。 把「什么数据配什么图、什么场合用多大字号」写成显式规则，比多做几个好看模板更费功夫，但换来的是一致性：不同人、不同时间用同一个 Agent，出图的风格不会漂移。
每张图先承担一个独立结论。 不把所有字段都画上去，再用标题、旁注、来源、留白、动效把整页串成叙事。真实数据单位是视觉原子，不用装饰性噪声伪造密度；明度承担层级，位置、长度、密度、结构承担数据编码。
安装足够轻。 npx skills add 一条命令，或把仓库克隆到 ~/.claude/skills/（Codex 用 ~/.codex/skills/）。模板目录里有几种风格的 gallery，可以直接拿样例看效果。
它解决的是最后一公里的观感。 数据没错、结论也对，但图表丑，读者就先打了折扣。把留白、字号、来源标注这些细节变成规则，比要求每个人都去学设计便宜得多。
局限与坑
License 要放在第一位看。 它是自定义许可（在 GitHub 上被识别为非标准许可），不是 MIT 或 Apache。个人和内部使用问题不大，但如果要把图表作为交付物放进商业产品、SaaS 或客户方案里，先确认授权条款，别等交付前才发现。
审美由规则保证，质量仍由模型决定。 Skill 提供的是语法，不是判断。模型选错图型、误读数据含义时，再好的色板也救不回来。生成后的人工复核不能省，尤其涉及对外发布的数据。
HTML 产物不是 BI 面板。 输出的是精致的静态（少量交互）HTML，不是可下钻、可联动的数据产品。要仪表盘能力，ECharts、Chart.js 这类库更合适；它们「能用但丑」的老问题，恰恰是 lieflat 想补的那一段。
彩色模式与 Mono 的自动选择还没有实测结论。 官方说会根据场景自动选色系，但这属于自述，重要场合建议手动指定色系，别把稳定性交给默认行为。
模板是参考不是组件。 gallery 里的页面是展示语言用的，接入自己的数据还得改绑定和排版，不要期待开箱即用的业务组件。
对模型能力的依赖是隐性的。 数据契约的判断、图型的匹配、旁注的措辞都依赖底层模型的理解力；模型换一个版本，同样的指令可能给出不同的排版选择。要稳定就锁定模型版本，并把 gallery 样例当作回归基线。
适用场景
- 周报、汇报、公众号配图、年报级数据故事的创作者；
- 已经在用 Claude Code / Codex，想给 Agent 加一套稳定审美的人；
- 咨询、方案类工作，需要把数据讲成整页叙事而不是甩一张图；
- 对「工具被抹平后，差异在审美与判断」有共鸣的团队。
不适合：只需要标准业务图表的工程团队；要求可交互 BI 能力的场景；不愿处理授权问题的商业交付。
选型建议
如果只是偶尔出一两张图，直接让大模型写 HTML 也能用，但每次质量看运气。把它放进工具谱系里更清楚：ECharts、Chart.js 这类传统图表库要人写代码、调配置，设计语言得自己补；Datawrapper、Flourish 是给人工操作用的 SaaS，不面向 Agent。lieflat-charts 填的是中间那段空白——把审美沉淀成 Agent 可复用的决策规则，让出图从「看运气」变成「有下限」。
要稳定产出，就值得装上这套语法。如果已有 ECharts 技术栈和设计规范，先看 lieflat 的规则能不能反哺你们的图表规范，而不是替换现有库。
准备用在对外交付前，先确认 License 条款；对外数据先人工过一遍图型选择和数据口径。用好它的关键动作只有一个：养成「先定数据契约，再选图」的习惯——Skill 帮你的是流程和一致性，判断还是人的事。