面向 Agent 的数据可视化 Skill：先读数据结构，再选图型，输出可在浏览器打开的单文件 HTML。默认做有编辑感的图表；只有明确要求年报、月报、白皮书、海报或 brief 时，才走 12 套中英整页报告模板。

制作环境是 [Moxt](https://moxt.ai)，也兼容 Claude Code、Codex、Cursor 等能加载 SKILL.md 的 Agent。作者账号「躺在废墟里」。

做什么

不把「选一个图表库模板」当第一步。Agent 会先判断数据契约（单位、序列、类目、关系），再决定阅读速度和图型：

  • Lupi（编辑叙事）：细线、点阵、旁注和大量留白，尽量保留真实单位与例外。适合论文、长文、年报和需要慢慢读的数据故事。
  • Glance（快速判断）：粗柱、大数字、排序和异常前置，几秒内看懂高低与变化。适合周报、汇报和 dashboard。
  • Basics（基础编辑）：柱、线、面积、环形、散点、树图等熟悉轮廓，加上可数刻度和发丝线。适合结构简单或数据量不大的内容。
  • Interactive：网络、路径、多段流向等高密度关系图，交互只服务真实记录。
  • 报告模式：12 套整页 HTML（中英双版），覆盖调研、复盘、经营报告、简报、海报和个人数据记录；版式性格可迁移，不绑死场景名称。

配色默认 Mono 黑白灰。也可以按数据自动落到三套彩色预设：青瓷蓝（有序单序列）、椰林绿（少量无序类目）、编辑部红（一个受控视线落点）。同一份 HTML 只用一套色彩系统；给了品牌色时可以建 custom 色板。

图数跟独立结论走：一个问题通常 1 张，两三个结论 2–3 张，完整文章 4–6 张，单页默认不超过 6 张。

怎么装

推荐一条命令（通用 Agent Skills CLI）：

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

或让有 shell 权限的 Agent 克隆到对应目录，并确认 SKILL.md、templates/、catalog.md、mono-tokens.js 存在：

  • Claude Code：~/.claude/skills/lieflat-charts
  • Codex：~/.codex/skills/lieflat-charts
  • Cursor：~/.cursor/skills/lieflat-charts 或项目内 .cursor/skills/lieflat-charts

更新已安装副本：进入该目录 git pull。

装好后直接丢数据，例如：「把这份调研做成适合公众号长文的 5 张中文图，先比 Lupi Editorial 和 Lupi Basics，都不适配再用 Glance。」

何时用

  • 周报、汇报、公众号长文需要「看起来像编辑过」而不是默认 Excel / ECharts 皮肤
  • 论文或年报要把原始记录、单位和旁注摊开，而不是只给一个汇总数字
  • 需要网络 / 路径类关系图，或一页完整的中英报告 / 海报
  • 已有 CSV、表格或论文结论，希望 Agent 按契约选图而不是随意堆字段

部分 Glance、交互图和报告模板会通过 CDN 加载 Chart.js 或 ECharts，完整预览需要联网。