这是什么
Lieflat Charts 是一套遵循 Agent Skills 格式的数据可视化与报告生成技能，专为 AI Agent 设计，可将数据快速转化为精致、可交互的 HTML 图表。它由 larashero3-dotcom 开发，在 moxt.ai 平台制作，支持 moxt、Claude Code、Codex 及其他兼容 SKILL.md 的 AI Agent。
该技能以统一的字体、留白、线条和动效建立自己的视觉语法，提供多种视觉风格，并支持从 12 套中英文整页模板生成可发布的 HTML 报告。
适合谁
- 内容创作者：需要将数据转化为公众号长文、海报、作品集等视觉内容。
- 数据分析师：快速生成周报、年报、调研报告等数据可视化。
- 产品经理与运营：制作 dashboard、业务数据报告、监控摘要。
- 开发者：集成到 AI Agent 工作流中，自动化生成图表。
能做什么
多种视觉风格
Lupi（编辑叙事型）：用细线、点阵、逐条记录和大量留白展开数据，强调真实单位、细节和旁注，适合论文、长文、年报与需要慢慢阅读的数据故事。
Glance（快速判断型）：用粗柱、大数字、色块和清晰排序提前聚合信息，让读者几秒内看懂高低、变化和异常，适合周报、汇报与 dashboard。
Basics（基础编辑型）：保留柱状图、折线图、环形图等熟悉轮廓，再用可数刻度、发丝线和编辑排版增加质感，适合结构简单或数据量较少的内容。
Interactive：用于网络、路径和多段流向等独立交互大图，支持拖拽、缩放等操作。
彩色模式
支持 Mono 黑白灰保底方案，以及青瓷蓝、椰林绿、编辑部红三种彩色色系。Agent 会根据数据结构和使用场景自动选择，用户也可提供品牌色建立 custom 色板。
报告生成
可从 12 套整页报告模板生成 HTML 报告，每套提供中英文双版，覆盖调研报告、业务数据报告、财报、dashboard、海报、个人数据记录等场景。
使用前准备
- 安装支持
SKILL.md的 AI Agent（如 Claude Code、Codex、Moxt）。 - 部分模板（如 Glance、Circular、Force 及报告模板 R11/R12）通过 CDN 加载 Chart.js 或 ECharts，需要联网才能完整显示。
- 准备数据文件（如 CSV、JSON）或文本数据。
安装方法
推荐在 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。
使用示例
安装后直接对 Agent 说：
把这份调研数据做成适合公众号长文的 5 张中文版图表。默认先比较 Lupi Editorial 和 Lupi Basics 候选；两组都不适配时，再使用 Glance。也可以尝试这些请求：
- “帮我用 lieflat charts 给这些数据做个彩色风格的图表。”
- “读这篇论文，找出最值得讲的几个数据结论，做成一页完整的 HTML 图表。”
- “这是一份周报数据，要求 10 秒内看懂排名、变化和异常。”
- “把这个 CSV 做成一张适合放进汇报里的 Glance 图表。”
- “用 Lupi 风格重新设计这组数据，保留每条真实记录，并加入必要的旁注。”
- “用青瓷蓝预设重做这张图，用明度深浅表示数值大小，不改变原图的结构。”
风险与注意事项
- 许可证：本项目使用 PolyForm Noncommercial License 1.0.0，允许学习、修改、分享和非商业使用；商业使用需要另行取得许可。
- 网络依赖：部分模板依赖 CDN 加载 Chart.js 或 ECharts，离线环境下可能无法完整显示。
- 数据准确性：生成的图表基于输入数据，请确保数据来源可靠。
- 视觉一致性：同一份 HTML 或同一组图只使用一种色彩系统，调整时需重新检查对比度和数据含义。