Lieflat Charts Skill：让 AI Agent 生成顶级编辑质感的数据可视化图表

Skill超级捕获手 技术创作者 2026-09-06 13 阅读

Lieflat Charts 是一套面向 AI Agent 的数据可视化 Skill，能将 CSV、JSON 等原始数据自动转化为具备编辑质感的精致 HTML 图表。与传统绘图库”填模板”的思路不同，它内置了一套从数据语义到视觉表达的设计语言——Agent 会根据数据类型（论文数据 vs 周报数据）和使用场景自动选择图表风格，让同一份数据在不同场景下呈现最适合的视觉形态。目前支持 Claude Code、Codex、moxt 等主流 AI Agent，安装后只需一句话指令即可生成专业级图表或完整报告。上线以来连续进入 GitHub Trending 周榜，Star 数持续攀升，是 AI Agent 可视化领域近期最值得关注的新晋项目。

功能与设计原则

Lieflat Charts 遵循”数据叙事优先”的设计哲学：不再让 AI 盲目调用 Chart.js 或 Matplotlib，而是先理解数据背后的意图，再选择最合适的视觉形式输出。核心能力包括：

  • 多风格自动适配：Lupi（编辑叙事型）、Glance（快速判断型）、Basics（基础编辑型）三种视觉风格，Agent 根据场景自动切换
  • 60+ 图表类型：覆盖柱状图、折线图、热力图、桑基图、小提琴图、环形关系图等，从基础到专业均包含
  • 12 套中英文报告模板：支持年报、月报、白皮书、调研一页纸等完整叙事交付，一键生成可发布 HTML 报告
  • 统一视觉语法：字体、留白、线条、动效全部遵循同一套规范，保证多张图表风格协调不杂乱
  • 颜色系统：Mono 黑白灰为保底方案，另有青瓷蓝、椰林绿、编辑部红三套彩色预设，支持用户自定义品牌色

认可度

  • GitHub Star：4,752（截至 2026-09-06）
  • Forks：281
  • 连续进入 GitHub Trending 周榜（AI 方向），9 月初周新增 Star 保持在高位
  • 在 ClaudeAtlas 平台 Quality Score 达 81/100（Recency 90/100、Skill Content 100/100）
  • 微博、知乎、X（Twitter）等平台上有多个科技博主自发推荐，讨论热度在同期 Skill 中位居前列

链接

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

原作者

larashero3-dotcom（GitHub username），独立开发者/设计者，围绕 AI Agent 协作场景开发数据可视化工具。该作者同时维护 moxt 平台的 Skill 生态，专注于提升 AI Agent 的专业输出质感。

介绍

Lieflat Charts 起源于一个朴素观察：AI Agent 在生成图表时往往”有数据、无审美”，输出的可视化要么是默认模板的堆砌，要么是单调的彩色堆叠。这个 Skill 通过预置 60+ 套经过专业设计的 HTML 模板，为 AI Agent 提供了一套完整的视觉语法系统。

每个模板都经过排版优化，确保标题、图例、数据来源、旁注等元素在视觉上有主次之分。系统默认黑白灰（Mono）方案，干净克制不易出错；当数据场景明确需要色彩表达时（如公司年报需要品牌色），AI 会自动切换到青瓷蓝、椰林绿或编辑部红等预设色系。

最大的亮点是”零门槛使用”——不需要用户了解任何可视化知识，只需把数据交给 AI Agent 并说出需求，Agent 会自动判断：是要一张快速可读的图表（Lupi/Glance），还是一份完整报告（Report 模式）。输出为单文件 HTML，双击即可在浏览器打开，支持截图、嵌入 PPT 或直接发布。

特点

  • 风格自动选择：Lupi（叙事）、Glance（快读）、Basics（基础编辑）三种风格，AI 根据数据语义和场景自动适配，无需手动指定
  • 60+ 图表类型：柱状、折线、面积、热力、桑基、小提琴、K 线、环形、散点、矩形树图等，从日常汇报到学术论文全覆盖
  • 12 套中英文报告模板：年报、月报、白皮书、调研一页纸、海报、Brief 等完整叙事交付，生成可发布 HTML 报告
  • 统一视觉语言：字体、留白、线条、动效全部遵循同一套规范，多张图表放在一起风格协调，具备编辑级质感
  • 颜色系统可进化：Mono 保底 + 三套彩色预设 + 支持用户自定义品牌色，同一交付禁止混用色系，保证视觉纯净

使用方法

安装（一条命令）：

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

或直接对 AI Agent 说：

“帮我安装 lieflat-charts。请把 https://github.com/larashero3-dotcom/lieflat-charts 克隆到 ~/.claude/skills/lieflat-charts，安装完成后检查 SKILL.md 存在。”

基本调用示例：

# 场景1：把这份CSV做成图表
用户：把这份调研数据做成适合公众号长文的5张中文版图表
Agent：自动读取数据 → 判断场景为"长文发布" → 进入Lupi编辑叙事模式 → 输出5张HTML图表

# 场景2：快速周报
用户：这是一份周报数据，要求10秒内看懂排名、变化和异常
Agent：自动判断场景为"快读汇报" → 进入Glance快速判断模式 → 输出聚合型图表，大数字+色块+清晰排序

# 场景3：完整年报
用户：生成一份2026年Q2的HTML年报
Agent：进入Report模式 → 从12套模板中选择适合年报的模板 → 输出完整HTML报告

使用场景与人群

适用场景：

  • 运营/产品周报、月报的数据可视化
  • 学术论文数据的图表化呈现
  • 公众号、长文配图（数据叙事类文章）
  • 内部汇报、PPT 配图
  • 数据调研报告、白皮书撰写

目标用户：

  • 经常需要用数据讲故事的产品经理、运营、分析师
  • 用 AI Agent（如 Claude Code）做数据研究的科研人员
  • 需要在报告中嵌入高颜值图表的商务/市场人群
  • AI Agent 开发者，寻求提升 Agent 输出专业度的工具

输入与输出案例

案例 1：CSV 周报数据

输入：
用户提供一份CSV文件，包含某App 2026年8月每日DAU、留存率、付费率
指令："把这份数据做成Glance图表，适合周一晨会汇报"

输出：
一张HTML页面，包含：
- 大数字标题："DAU 8月均值 128万，环比+12%"
- 柱状图：每日DAU趋势
- 色块排序图：本周Top 3指标变化
- 异常标注：8月15日留存率突降用红色标注

案例 2：学术论文数据可视化

输入：
用户提供一篇关于全球AI人才分布的论文PDF
指令："读这篇论文，找出最值得讲的几个数据结论，做成适合发表的单页HTML图表"

输出：
2-3张HTML图表（Lupi编辑叙事型），每张包含：
- 细线柱状图：各国AI人才数量对比
- 旁注说明数据来源和统计口径
- 适合截图或嵌入文章，不需要额外排版

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

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 13 阅读