Lieflat Charts Skill：AI Agent 的专业级数据可视化方案

Lieflat Charts Skill：让 AI Agent 做出专业级数据可视化报告

Lieflat Charts 是一套面向 AI Agent 的数据可视化 Skill，能够根据结构化数据自动生成精致、可交互的 HTML 图表与完整报告。设计理念不走”堆图表”路线，而是先判断数据应该表达什么结论，再匹配合适图型与视觉风格——这是它与市面上大多数 AI 图表工具的本质差异。上线后快速进入 GitHub Trending 周榜前端方向 Top 1，并在多个 AI Agent 社群引发讨论。

功能与原则

Lieflat Charts 围绕一个核心工作流设计：先理解数据结论，再选择图型，最后生成图表。它不是把数据丢给一个图表库，而是让 AI Agent 具备”编辑思维”——每一个图表都有明确的信息输出目的，而不是装饰性填充。

支持三大图型体系：
– Lupi Editorial（编辑叙事型）：适合年报、论文、公众号长文，强调真实数据单位、细节旁注和编辑排版，适合愿意停下来细读的场景
– Glance（快速判断型）：适合周报、dashboard、监控大屏，粗柱大数字、提前聚合，让读者在几秒内看到排序、变化与异常
– Basics（基础编辑型）：保留柱状图、折线图、环形图等常见轮廓，但用可数刻度和编辑排版增加质感，适合数据量较少的场景

此外还提供 3 套交互大图（网络、路径、多段流向）和 12 套整页报告模板（中英文双版）。

认可度

• GitHub Star：4,824（截至 2026-09-07）
• 2026 年 9 月初进入 GitHub Trending 周榜，在前端 & AI 双方向同时上榜，AI 方向位列前端周榜 Top 1
• 在 moxt.ai 平台完成设计与持续迭代，被多个 AI coding agent 社区推荐使用
• 作者”躺在废墟里”在微博、小红书、B 站等平台同步运营，技术社区有一定影响力

链接

GitHub：https://github.com/larashero3-dotcom/lieflat-charts

原作者

作者 GitHub 账号为 larashero3-dotcom，社交媒体 ID 为”躺在废墟里”。项目在 Moxt Agent 平台（moxt.ai）完成设计规范、模板结构和工作流的打磨，并持续迭代更新。

介绍

Lieflat Charts 的设计者认为，大多数 AI 图表工具的思路是”先选模板，再填数据”——这样做出来的图往往信息密度低、视觉粗糙，无法承载真正的数据故事。

Lieflat Charts 反其道而行：先判断这条数据应该表达什么结论，再从 49 种图型索引（catalog.md）中找到对应的数据契约，最后调用对应模板生成图表。每张图只承担一个独立结论，图数由结论数量决定——单个问题 1 张，两个到三个结论 2–3 张，完整文章或论文 4–6 张。

在视觉上，它建立了一套统一的视觉语法：Mono 黑白灰体系（纸灰与炭黑两极加中间灰阶）、三套彩色预设（青瓷蓝、椰林绿、编辑部红），以及 custom 色板能力。所有图型共享同一套 token，生成后仍可持续调色而不破坏数据比例和视觉主次。

12 套整页报告模板则将图表能力延伸为完整文档：调研报告、年度复盘、月度经营数据、财报分析、产品影响力故事、个人运动/旅行记录等，覆盖从工作到个人的常见报告场景，每套均提供中英文双版。

特点

• 数据契约驱动：先定义数据与结论的对应关系，再选图型，不是”先选模板再填数据”
• 双阅读速度设计：Lupi（慢读细读）vs Glance（快读判断），同一数据可以生成两种阅读节奏的版本
• 真实数据单位：标题、旁注、来源、发丝线均对应真实数据，而非装饰性噪声
• 多格式输出：静态 SVG 图、Chart.js/ECharts 交互图、整页 HTML 报告，一套 skill 多重输出形态
• 品牌色扩展：内置三套彩色预设，支持用户自定义品牌色板，保证企业场景可用性

使用方法

安装方式，一条命令搞定：

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

也可以直接对 Agent 说：

帮我安装 lieflat-charts。请把 https://github.com/larashero3-dotcom/lieflat-charts 克隆到 ~/.claude/skills/lieflat-charts，安装完成后检查 SKILL.md、templates/、catalog.md 和 mono-tokens.js 是否存在。

安装后使用示例：

把这份调研数据做成适合公众号长文的 5 张中文版图表。默认先比较 Lupi Editorial 和 Lupi Basics 候选；两组都不适配时，再使用 Glance。

或者：

这是一份周报数据，要求 10 秒内看懂排名、变化和异常。

使用场景与人群

适用场景：
– AI coding agent（Claude Code、Codex 等）在项目中生成数据报告
– 自动化工作流里需要将数据转化为可发布 HTML 报告
– 个人/团队定期报告生成（周报、月报、年度复盘）
– 数据新闻、公众号长文、研究简报的图表制作

目标用户：
– 需要 AI Agent 输出专业级数据可视化的开发者
– 数据分析师、产品经理、内容创作者（通过 Agent 协作）
– AI 应用开发者，将 Lieflat Charts 集成到自己的 Agent 产品中

输入与输出案例

案例 1：调研报告图表生成

输入（对 Agent 说）：

读这篇论文，找出最值得讲的几个数据结论，做成一页完整的 HTML 图表。

输出：Agent 根据论文数据，自动从 catalog.md 选择 4–6 个独立结论对应的图型，用 Lupi Editorial 风格生成一组 SVG 图表，每张图保留真实数据单位、旁注和来源注释，可直接嵌入论文或公众号文章。

案例 2：周报快速可视化

输入（对 Agent 说）：

这是一份周报数据，要求 10 秒内看懂排名、变化和异常。用 Glance 风格。

输出：Agent 自动聚合数据、选出关键排序和变化指标，用 Glance 风格（粗柱、大数字、色块）生成一张或多张 HTML 图表，适合放进企业微信周报或 Dashboard 页面。

GitHub: https://github.com/larashero3-dotcom/lieflat-charts