Skip to content

Lieflat Charts

Data visualization Skill for AI Agents, turning data into polished, interactive HTML charts. 面向 AI Agents 的数据可视化 Skill,将数据快速生成精致、可交互的 HTML 图表。

Install

$npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts
Claude Code
claude mcp add lieflat-charts -- npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts
Cursor / Claude Desktop (mcp.json)
{
  "mcpServers": {
    "lieflat-charts": {
      "command": "npx",
      "args": [
        "skills",
        "add",
        "https://github.com/larashero3-dotcom/lieflat-charts",
        "--skill",
        "lieflat-charts"
      ]
    }
  }
}

Install command taken from the project's README or registry entry. Always review code before running it.

Lieflat Charts

中文 | English

Lieflat Charts 是一套遵循 Agent Skills 格式的数据可视化与报告生成 skill,可供 moxt、Claude Code、Codex 及其他兼容 SKILL.md 的 AI agent 使用。本 skill 在 moxt.ai 制作,默认把数据做成有编辑感的图表;只有用户明确要求报告、年报、月报、白皮书、海报或 brief 时,才从 12 套中英文整页模板生成可发布的 HTML 报告。

它以统一的字体、留白、线条和动效建立自己的视觉语法,包括以下几种视觉风格:

  • Lupi(编辑叙事型):用细线、点阵、逐条记录和大量留白展开数据,强调真实单位、细节和旁注,适合论文、长文、年报与需要慢慢阅读的数据故事。
  • Glance(快速判断型):用粗柱、大数字、色块和清晰排序提前聚合信息,让读者几秒内看懂高低、变化和异常,适合周报、汇报与 dashboard。
  • Basics(基础编辑型):保留柱状图、折线图、环形图等熟悉轮廓,再用可数刻度、发丝线和编辑排版增加质感,适合结构简单或数据量较少的内容。

此外还提供网络、路径和多段流向等独立交互大图。每张图都尽量保留数据的真实单位,同时让标题、旁注、来源和页面结构参与表达。

Mono 黑白灰是稳定的保底方案,同时也有彩色模式,目前支持青瓷蓝、椰林绿和编辑部红三种彩色色系,方便适配各种场景的数据可视化。Agent 会根据数据结构和使用场景,在 Mono、青瓷蓝、椰林绿或编辑部红之间自动选择;适配关系不明确时使用 Mono。用户明确提供品牌色或色值时,也可以建立一套 custom 色板。同一份 HTML 或同一组图只使用一种色彩系统,生成后仍可继续调色,同时保持图型结构、比例、对比度和数据契约。

Preview

以下是几类模板的实际预览。

Lupi Editorial

细读、逐记录、编辑感。精选 19 张编辑叙事型模板中的代表图型。

Glance

快读、聚合、结论先行。精选 20 张快速判断型模板中的代表图型。

动态预览:

更多动态预览:

Lupi Basics

常见图型与可数单位的结合。17 张模板覆盖柱、线、面积、环形、散点、矩形树图、直方图、箱线图、K 线等基础数据形状。

Interactive

用于网络、路径与高密度关系数据。

动态预览:

打开 Force Graph 模板体验拖拽与缩放

增加了彩色模式

图表可以根据数据结构和使用场景自动选择 Mono 或一套彩色预设,不要求用户先说“要彩色”。有序单序列可使用青瓷蓝,少量无序类目可使用椰林绿,需要一个受控视线落点时可使用编辑部红;适配关系不明确时回到 Mono。用户明确给出品牌色或色值时,可以建立一套 custom 色板。同一份 HTML 或同一组图只使用一种色彩系统;调整时需重新检查对比度、视觉主次和颜色所表达的数据含义。

Porcelain · 青瓷蓝

单色相明度阶,适合有序数据和单序列。

Palm · 椰林绿

低饱和绿黄色系,用色相区分少量无序类目。

Wire · 编辑部红

黑灰阶加一个荧光橙视线落点。

最新更新

增加了报告模式

现在可以在单张图表之外,直接从 12 套整页报告模板生成 HTML 报告。每套模板都提供中文版和英文版,覆盖调研报告、研究简报、业务数据报告、财报与金融经济分析、产品记录、dashboard、海报,以及运动、旅行和年度生活数据记录等从工作到个人的需求。模板名称代表版式性格,不是使用场景的限制;同一套模板可以根据数据结构迁移到不同类型的报告。

零门槛快速使用

推荐在 Moxt 中使用

Lieflat Charts 在 Moxt 中完成设计、测试和持续迭代。它的设计规则、模板结构与文件工作流,都是围绕 Moxt 的 Agent 协作方式反复打磨的。

Similar plugs

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…

Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.