【免费下载链接】live-panel-skillConfig-driven animated architecture diagrams: turn one JSON file into a terminal-style, always-running diagram or a light-theme infographic that moves. Outputs H.264 mp4 or a live web page; also a Claude Code style skill (SKILL.md).项目地址https://gitcode.com/gh_mirrors/li/live-panel-skill点击查看免费下载live-panel-skill是一个把 JSON 配置变成动态架构图的开源渲染器终端监控面板风格的 agent 架构动图、会动的浅色信息图输出 H.264 mp4 视频或可在浏览器里循环播放的网页。更关键的是它自带一份 SKILL.md可以直接接入 Claude Code、Codex 等 AI 编程助手——你只需用自然语言描述系统AI 就会替你写配置、渲染视频、逐帧自查全程不用手写任何动画代码。live-panel-skill 是什么一个 JSON 生成会动的架构图 传统架构图Mermaid、Excalidraw画出来就是一张死的静态图。live-panel-skill 的思路完全不同把图当作一个正在运行的系统的监控面板——版面永远固定不动但连线上的数据包在流动、日志在滚动、计数器在跳动、进度条会翻转状态、侧栏触发点依次点亮。随便截其中一帧都是一张完整可读的架构图。它的输入输出非常克制输入只有一个 JSON 文件方框、连线、数据包路径、日志文案、计数器HTML 模板 assets/template.html 永远不需要动输出H.264 mp4 视频30 fps和/或一个自包含的 HTML 页面--html-out参数两套主题terminal-dark终端暗色监控面板和light-pastel白底粉彩信息图适合小红书画幅预设4:51200x1500适配 X、3:41080x1440适配小红书、1:11080x1080。下面是最小示例的动画预览user → agent → tools三级面板数据包沿连线流动底部日志滚动数字全部标注示意。SKILL.md让 Claude Code 和 Codex 学会画图技能 SKILL.md是 Agent Skill 的标准约定任何会加载技能的 AI 助手Claude Code、Codex 等读到它就掌握了一项新能力。这份文件的开头是标准的 frontmatter 元信息name: live-panel加上description用中英文写清了什么时候该用这个技能当用户要做活的架构图、agent 树或系统监控面板风格的动画mp4 视频或循环网页时使用——固定布局、线上流动的数据包、滚动日志、翻转的计数器和状态条。正文部分则给 AI 定了一套固定工作流让它不会自由发挥翻车收集内容并标注每个数字的来源——没有真实来源的数字必须标注示意 / illustrative绝不伪造用脚手架生成配置再小步迭代——AI 不手写 20~40 KB 的大 JSON而是先写一份几行的简短 spec用 scripts/scaffold.py 自动完成像素布局、连线、数据包、日志列和文字换行之后每次只改 1~3 个方框渲染——用 scripts/render.py 出 mp4按帧检查不靠感觉——用 scripts/check_frames.py 采样约 120 个时间点从 DOM 里测量文字溢出与元素重叠导出 PNG 让你肉眼确认并验证回放确定性同一配置每次渲染逐帧一致。这套流程的核心参考还包括 references/motion-grammar.md快、中、慢三档节奏的运动语法和 references/config-schema.md每个 JSON 字段的完整说明。AI 照着执行新手照着看也能明白它是怎么工作的。快速上手三步完成 SKILL.md 技能安装 第一步克隆仓库git clone https://gitcode.com/gh_mirrors/li/live-panel-skill第二步放到 AI 助手加载技能的目录以 Claude Code 为例把整个文件夹放到或软链到~/.claude/skills/live-panel/Codex 等其他读取 SKILL.md 的 agent 同理放进它们的 skills 目录即可。第三步确认本地环境依赖说明Python 3.8只用标准库无需 pip 安装任何包Chrome / Chromium无头模式驱动渲染macOS 下会自动在/Applications里找到ffmpeg合成 mp4不需要 API Key不需要联网Windows 用户可在 WSL 里原样运行。环境就绪后对 AI 说一句话就行。实战一句话让 AI 生成 agent 架构动图 ✍️在 Claude Code 里直接描述你想要的画面例如画一个我们多 agent 系统的动态架构图主 agent 下面有 worker、explorer、researcher 三个子 agent左侧放三个 on-call 触发器要有滚动日志和 token 计数器暗色主题4:5 画幅发 X。AI 按 SKILL.md 的流程执行背后的实际动作是这几条命令了解即可通常不用你敲# 1. 简短 spec 生成完整配置布局、连线、日志列自动完成 python3 scripts/scaffold.py --spec spec.json --out out/config.json # 2. 渲染 mp4--html-out 额外保留可循环网页版 python3 scripts/render.py --config out/config.json --out out.mp4 --html-out out.html # 3. 逐帧自查溢出、重叠、回放确定性退出码 0 才算过 python3 scripts/check_frames.py --config out/config.json --out-dir frames --repeat如果 AI 没按套路走你也可以直接给它指条路先抄 examples/codex-agents/config.json 改不要从零写——仓库里的每个示例都是一份标准答案AI 从最接近的示例出发迭代成功率远高于从头规划坐标。输出效果动态架构图与动图预览 以下是仓库自带的示例每个示例目录下都有完整 mp4 和 config.json可对照学习① Codex agent 树terminal-dark4:5——子 agent 分发、侧栏触发器逐个点亮、session log 滚动、calls / tokens read计数累加是最经典的监控面板观感配置见 examples/codex-agents/② AI Agent 完整架构light-pastel3:4——同一套运动语法套在浅色信息图上步骤列表逐行点亮、工具与 MCP 面板同步高亮、箭头变色并携带数据包专为小红书 3:4 画幅设计③ ring 视图循环流程——规划→执行→验证→反思这类循环结构不用手摆坐标一个{type:view,kind:ring}元素自动环形排布中心计数器记录迭代轮次④ loop 视图带分支回环的工作流——判定菱形、虚线回环、人工闸门分组框适合表达发现不了就回工单这类嵌套循环更多示例funnel 漏斗图、中文内容的 Airbnb 面板、手绘风 excalidraw 视图等都在 examples/ 目录每个文件夹都附 config.json、mp4 与动画预览。新手常见问题需要 API Key 吗能出 GIF 吗❓为什么同一配置每次渲染结果都一样页面上每个视觉元素都是时间t的纯函数不读系统时钟、不用Math.random()、不用 CSS 动画随机选择用固定种子哈希。渲染器对每一帧调用window.seek(i/fps)截图check_frames.py --repeat还会跳走再跳回来比对字节保证确定性。输出可以当 GIF 用吗推荐先用 mp4聊天软件和 X 对 mp4 更友好。要 GIF 用 ffmpeg 一转即可ffmpeg -i my.mp4 -vf fps15,scale600:-1:flagslanczos my.gif放 README 的话动画 WebP 体积约为 GIF 的 1/4 且发光效果更平滑仓库里的预览图就是这么做的。支持哪些图型除了自由摆放方框连线还有自动排版的视图元素ring循环、funnel漏斗转化、loop嵌套工作流决策回环、excalidraw手绘风契约见 references/views.md验收命令是 scripts/verify_view.py3 种画幅 × 2 种主题共 7 组组合全 PASS 才算完成。nebula、tree、kpi等已在规划中。画面上的数字是真的吗只有你给了来源的才算真的——来源写在配置顶层的credit行所有只因动画而跳动的计数器画面上一律标注 (illustrative)。复刻别人的图时credit和发帖文案里都要写原作者这是 SKILL.md 的硬性署名规则。小结把会动的架构图变成一句话的事 live-panel-skill 把画一张会动的架构图拆成了三件事描述系统 → 生成 JSON → 渲染自查而 SKILL.md 让 Claude Code、Codex 这些 AI 助手完整接管了后两步。你只需要提供系统描述和数字来源剩下的布局、运动节奏、逐帧检查都由技能流程保证。技能入口SKILL.md完整文档与 FAQREADME.md配置文件字段全集references/config-schema.md运动语法快中慢三档节奏references/motion-grammar.md示例配置库examples/把仓库放进你的 skills 目录然后试着对 AI 说帮我把我的系统画成一张会动的架构图——剩下的交给 live-panel-skill。赞分享【免费下载链接】live-panel-skillConfig-driven animated architecture diagrams: turn one JSON file into a terminal-style, always-running diagram or a light-theme infographic that moves. Outputs H.264 mp4 or a live web page; also a Claude Code style skill (SKILL.md).项目地址https://gitcode.com/gh_mirrors/li/live-panel-skill点击查看免费下载相关推荐让Codex/Claude Code自动读你的会议纪要Muesli Agent Skill接入实战教程让Codex/Claude Code自动读你的会议纪要Muesli Agent Skill接入实战教程 Muesli 是一款面向 macOS 的本地会议转写与让Claude Code替你管相册TrailSnap MCP协议、CLI与SKILL接入实战指南让Claude Code替你管相册TrailSnap MCP协议、CLI与SKILL接入实战指南 TrailSnap行影集是一个 AI 赋能的开源相册工具让 AI 替你装饰仓库shieldcn Agent Skill 接入 Claude Code 与 Cursor 完整指南让 AI 替你装饰仓库shieldcn Agent Skill 接入 Claude Code 与 Cursor 完整指南 shieldcn 是一个 shiel上一篇BoringNotch终极指南免费将MacBook凹口变成智能控制中心的完整教程下一篇开源刺绣设计免费替代方案用Ink/Stitch打造专业级刺绣作品创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
