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
细读、逐记录、编辑感。精选 20 张编辑叙事型模板中的代表图型。
Glance
快读、聚合、结论先行。精选 22 张快速判断型模板中的代表图型。
动态预览：
更多动态预览：
Lupi Basics
常见图型与可数单位的结合。17 张模板覆盖柱、线、面积、环形、散点、矩形树图、直方图、箱线图、K 线等基础数据形状。
Interactive
用于网络、路径与高密度关系数据。
动态预览：
增加了彩色模式
图表可以根据数据结构和使用场景自动选择 Mono 或一套彩色预设，不要求用户先说“要彩色”。有序单序列可使用青瓷蓝，少量无序类目可使用椰林绿，需要一个受控视线落点时可使用编辑部红；适配关系不明确时回到 Mono。用户明确给出品牌色或色值时，可以建立一套 custom 色板。同一份 HTML 或同一组图只使用一种色彩系统；调整时需重新检查对比度、视觉主次和颜色所表达的数据含义。
Porcelain · 青瓷蓝
单色相明度阶，适合有序数据和单序列。
Palm · 椰林绿
低饱和绿黄色系，用色相区分少量无序类目。
Wire · 编辑部红
黑灰阶加一个荧光橙视线落点。
最新更新
增加了报告模式
现在可以在单张图表之外，直接从 12 套整页报告模板生成 HTML 报告。每套模板都提供中文版和英文版，覆盖调研报告、研究简报、业务数据报告、财报与金融经济分析、产品记录、dashboard、海报，以及运动、旅行和年度生活数据记录等从工作到个人的需求。模板名称代表版式性格，不是使用场景的限制；同一套模板可以根据数据结构迁移到不同类型的报告。
零门槛快速使用
推荐在 Moxt 中使用
Lieflat Charts 在 Moxt 中完成设计、测试和持续迭代。它的设计规则、模板结构与文件工作流，都是围绕 Moxt 的 Agent 协作方式反复打磨的。
因此，在 Moxt 中使用时，Agent 能更顺畅地读取完整的设计规范、理解 Lieflat Charts 的视觉语言、调用对应模板，并在同一个工作区中持续预览和修改结果，更稳定地执行这套设计。
Lieflat Charts 的工作环节 普通的一问一答方式 在 Moxt 中
理解设计语言 需要从 Skill 文件重新建立理解 Skill 已在相同的 Agent 工作环境中完成设计和验证
读取规则、模板和数据 通常需要反复上传文件或提供路径 规则、模板、数据和成品可以保留在同一个工作区
多轮选择和修改图表 更换对话后可能需要重新说明背景 Agent 可以沿用工作区中的文件和上下文继续修改
生成最终结果 结果可能停留在对话或临时目录中 HTML 成品可以和数据、模板一起留在工作区继续完善
Lieflat Charts 仍然可以安装到其他支持 Agent Skills 的工具中；Moxt 是它的原生制作环境，也是目前更完整、步骤更短的推荐使用方式。
安装到其他 Agent
一条命令安装：
npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts
也可以直接把这段话发给有 shell 权限的 AI Agent：
帮我安装 lieflat-charts。请把 https://github.com/larashero3-dotcom/lieflat-charts
克隆到 ~/.claude/skills/lieflat-charts，安装完成后检查 SKILL.md、templates/、
catalog.md 和 mono-tokens.js 是否存在。
使用 Codex 时，将安装路径换成 ~/.codex/skills/lieflat-charts。
已经安装过的话，用这段话更新：
帮我更新 lieflat-charts。请进入 ~/.claude/skills/lieflat-charts 执行 git pull，
然后告诉我当前最新 commit。
安装后直接对 Agent 说：
把这份调研数据做成适合公众号长文的 5 张中文版图表。
默认先比较 Lupi Editorial 和 Lupi Basics 候选；两组都不适配时，再使用 Glance。
也可以试这些请求：
帮我用 lieflat charts 给这些数据做个彩色风格的图表。
读这篇论文，找出最值得讲的几个数据结论，做成一页完整的 HTML 图表。
这是一份周报数据，要求 10 秒内看懂排名、变化和异常。
把这个 CSV 做成一张适合放进汇报里的 Glance 图表。
用 Lupi 风格重新设计这组数据，保留每条真实记录，并加入必要的旁注。
用青瓷蓝预设重做这张图，用明度深浅表示数值大小，不改变原图的结构。
图数由独立结论决定：单个问题通常 1 张，两个到三个结论 2–3 张，完整文章或论文 4–6 张，单页默认最多 6 张。用户明确指定数量时会遵守，但不会为了凑数重复表达同一个结论。
Templates
类型 数量 适合什么 实现
Lupi Editorial 15 年报、论文、公众号、海报、作品集；读者愿意停下来细看 手写 SVG
Lupi Basics 13 柱、折线、面积、环形、散点、瀑布、热力、进度、矩形树图等基础数据形状 手写 SVG / ECharts
Glance 18 周报、dashboard、监控、汇报；需要快速排序和比较 Chart.js / ECharts
Interactive 3 网络、路径、多段流向和高密度关系数据 ECharts / SVG
Color Presets 3 套 / 15 个样张 需要颜色区分数据维度，或为 Mono 加一个受控视线落点 基于原模板换肤
Report Templates 12 套 / 中英双版 调研、年报、月报、仪表盘、海报、简报和个人记录等完整整页报告 单文件 HTML
Lupi Editorial
把一个点、一根线或一条旁注尽量对应到真实数据单位。它不急着把数据聚合成一个结论，而是把原材料摊开，让读者看到结构、分布和例外。视觉上使用发丝线、留白、账本式导轨、旁注和低对比灰阶，阅读时间通常在 30 秒以上。