lieflat-charts

让 AI 直接把数据变成可交互 HTML 图表

lieflat-charts 是一个面向 AI Agent 的数据可视化技能包，核心目标是把原始数据快速转成精致、可交互的 HTML 图表，省去手写图表代码的环节。它通常以 Skill 形式接入 Claude Code、Codex 等支持 agent-skills 的智能体，让 AI 在对话或自动化流程中直接调用图表生成能力。项目输出的是独立 HTML 文件，内置 SVG 渲染与交互逻辑，不依赖重型前端框架，便于嵌入报告、看板或直接分享。技术栈以 HTML/SVG 为主，强调轻量、可移植、开箱即用，适合数据分析、运营汇报、自动化报告等场景。对非前端背景的用户来说，它把“选图表类型、调样式、写交互”这些繁琐步骤交给 Agent 完成，降低可视化门槛，也让 AI 工作流能直接产出可交付的图表成果。

开源 free 自动化工作流

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 5837

维护状态较活跃

是否开源是

定价模式 free

项目预览

项目数据

分类自动化工作流

开发团队larashero3-dotcom

所属国家

官网地址

GitHubhttps://github.com/larashero3-dotcom/lieflat-charts

定价模式free

价格说明开源免费使用

访问状态

是否开源是

开源协议NOASSERTION

主要语言HTML

技术栈/模型agent-skills,charts,claude-code,codex,data-visualization,html,moxt,svg

GitHub 星标★ 5837

30天Star增速

HF 下载量

上线时间2026-07-16 00:00:00

最近更新2026-09-30 00:00:00

维护状态较活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-10-01

浏览次数0

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

正在加载星标数据…

使用教程

难度：入门约 10 分钟部署方式：命令行工具 6 步

环境要求

能联网的终端环境（用于执行 npx 安装命令）
Node.js 与 npx（README 使用 npx skills add 安装）
一个支持 Agent Skills / SKILL.md 的 AI Agent（如 moxt、Claude Code、Codex）
使用 Codex 时需改用对应的 skills 安装目录

安装与启动步骤

1选择使用环境

README 推荐在 moxt.ai 中使用，Agent 可直接读取完整设计规范与模板；也可装到其他支持 SKILL.md 的 Agent。
2一条命令安装

在终端执行 npx 命令，把 lieflat-charts skill 安装到本地 Agent 的 skills 目录中。
```
npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts
```
3交给 Agent 安装

没有终端权限时，把这段话发给有 shell 权限的 Agent，它会克隆仓库到 skills 目录并自检文件。
```
git clone https://github.com/larashero3-dotcom/lieflat-charts ~/.claude/skills/lieflat-charts
```
4Codex 改用对应路径

使用 Codex 时，把安装路径换成 ~/.codex/skills/lieflat-charts，其余流程不变。
```
git clone https://github.com/larashero3-dotcom/lieflat-charts ~/.codex/skills/lieflat-charts
```
5更新已安装版本

进入已安装的 skill 目录执行 git pull，让 Agent 报告当前最新 commit。
```
cd ~/.claude/skills/lieflat-charts && git pull
```
6向 Agent 提需求

直接用自然语言描述数据和场景，Agent 会自动选择 Lupi、Glance、Basics 风格与色彩系统生成 HTML 图表。

关键配置

配置项	必填	说明	示例
`安装路径（Claude Code）`	是	skill 在 Claude Code 中的存放目录	`~/.claude/skills/lieflat-charts`
`安装路径（Codex）`	否	使用 Codex 时替换为该技能目录	`~/.codex/skills/lieflat-charts`
`色彩系统`	否	同一份 HTML 只用一种色彩系统，不确定时用 Mono	`Mono / 青瓷蓝 / 椰林绿 / 编辑部红`
`图表数量`	否	由独立结论决定，单页默认最多 6 张	`6`
`视觉风格`	否	按数据类型选择，候选不适配再降级使用	`Lupi Editorial / Lupi Basics / Glance`

如何确认成功

检查 ~/.claude/skills/lieflat-charts 下是否存在 SKILL.md、templates/、catalog.md 和 mono-tokens.js。

常见问题

Q：不装到 Claude Code 可以用吗？

A：可以。只要工具兼容 SKILL.md 格式的 Agent Skills，按对应目录安装即可；使用 Codex 时换成 ~/.codex/skills/lieflat-charts。

Q：怎么更新已安装的 skill？

A：进入安装目录执行 git pull，例如 cd ~/.claude/skills/lieflat-charts && git pull，然后确认最新 commit。

Q：生成什么格式的产物？

A：独立 HTML 文件，内置 SVG 渲染与交互逻辑，不依赖重型前端框架，可直接嵌入报告、看板或分享。

Q：怎么让图表符合公众号、汇报等场景？

A：在请求里说明用途与语言即可，例如「把调研数据做成适合公众号长文的 5 张中文版图表」，Agent 会据场景选风格。

Q：可以指定颜色吗？

A：可以。用户明确提供品牌色或色值时，可建立 custom 色板；同一份 HTML 或同一组图只使用一种色彩系统。

注意事项

README 推荐在 Moxt 中使用，这是原生制作环境，步骤更短、上下文可延续。
只有用户明确要求报告、年报、月报、白皮书、海报或 brief 时，才从 12 套整页模板生成 HTML 报告。
图数由独立结论决定：单问题约 1 张，两三个结论 2–3 张，完整文章或论文 4–6 张，不会为凑数重复同一结论。
生成后仍可继续调色，同时保持图型结构、比例、对比度和数据契约不变。

核心亮点

以 Skill 形式接入 AI Agent，无需手写图表代码即可生成成品
输出独立 HTML/SVG，轻量可移植，方便嵌入报告或直接分享
支持交互式图表，比静态截图更适合数据汇报与看板场景

不足之处

项目以 HTML 为主，复杂数据管线和后端集成能力有限
生态较新，图表类型与主题定制深度有待观察

适用场景

AI 对话中让 Agent 根据表格数据直接生成汇报图表
自动化工作流里批量产出可交互 HTML 数据报告
运营或分析人员不写前端代码快速制作可视化看板

替代项目

ECharts、Chart.js

项目介绍

lieflat-charts 是自动化工作流领域的开源项目，由 larashero3-dotcom 开发，是 2026 年新上线的项目。

在全站 13,465 个收录项目中，它的 GitHub 星标数（5,837）位列前 8%，在自动化工作流分类的 547 个项目里位列前 14%。

项目保持着较活跃的维护节奏，最近一次代码更新于 2026-09-30。开源免费使用。

它主要面向的使用场景是：AI对话中让Agent根据表格数据直接生成汇报图表。同类可对比的替代方案包括 ECharts、Chart.js。

上一篇：nx

下一篇：agent-messenger