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
所属国家
官网地址
定价模式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. 1选择使用环境

    README 推荐在 moxt.ai 中使用,Agent 可直接读取完整设计规范与模板;也可装到其他支持 SKILL.md 的 Agent。

  2. 2一条命令安装

    在终端执行 npx 命令,把 lieflat-charts skill 安装到本地 Agent 的 skills 目录中。

    npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts
  3. 3交给 Agent 安装

    没有终端权限时,把这段话发给有 shell 权限的 Agent,它会克隆仓库到 skills 目录并自检文件。

    git clone https://github.com/larashero3-dotcom/lieflat-charts ~/.claude/skills/lieflat-charts
  4. 4Codex 改用对应路径

    使用 Codex 时,把安装路径换成 ~/.codex/skills/lieflat-charts,其余流程不变。

    git clone https://github.com/larashero3-dotcom/lieflat-charts ~/.codex/skills/lieflat-charts
  5. 5更新已安装版本

    进入已安装的 skill 目录执行 git pull,让 Agent 报告当前最新 commit。

    cd ~/.claude/skills/lieflat-charts && git pull
  6. 6向 Agent 提需求

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

关键配置

配置项必填说明示例
安装路径(Claude Code)是skill 在 Claude Code 中的存放目录~/.claude/skills/lieflat-charts
安装路径(Codex)否使用 Codex 时替换为该技能目录~/.codex/skills/lieflat-charts
色彩系统否同一份 HTML 只用一种色彩系统,不确定时用 MonoMono / 青瓷蓝 / 椰林绿 / 编辑部红
图表数量否由独立结论决定,单页默认最多 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

同类项目推荐

n8n 开源

拖拽搭建自动化流程,轻松接入 AI 与 400+ 应用,搞定重复工作。

Fair-code workflow automation platform with native AI capabilities. Combine visual b···

★ 206288 2026-08-10
feishu-docx 开源

让 AI 代理轻松读写飞书文档,双向转换 Markdown

Feishu/Lark Docs、Sheet、Bitable <-> Markdown | AI Agent-friendly knowledge base exp···

★ 263 2026-08-09
EasyCLIProxyAPI 开源

图形界面一键配好 AI 代理,省去手写配置文件

A desktop GUI for CLIProxyAPI and a tool for automatically configuring popular AI ag···

★ 2517 2026-09-22
robotcode 开源

让 Robot Framework 拥有现代 IDE 体验,调试、补全、运行一气呵成。

Open Source Toolkit for Robot Framework, providing Language Server Protocol support,···

★ 302 2026-08-10