live-panel — 配置驱动的架构图动画生成器（Claude Code Skill）

技能简介

live-panel 是一个面向 Claude Code、Codex 等 AI 编程 Agent 的 Skill，能把一份系统描述（一个 JSON 配置文件）渲染成一段始终在运行的动态架构图视频：固定版面、连线上的光点流动、日志滚动、计数器跳动、进度条跨阈值翻状态、侧栏触发点依次点亮。输出可直接发 X（Twitter）、小红书的 H.264 mp4，也可以是浏览器里实时播放的网页。Skill 形式遵循 SKILL.md 标准，安装到 ~/.claude/skills/live-panel/ 即被 Agent 自动调用。

整个引擎用 Python 标准库实现（不依赖 pip 包），需要系统里有 Chrome/Chromium 与 ffmpeg 即可运行；自带两个主题（terminal-dark 终端深色 + light-pastel 浅色粉彩）和三种画幅（4:5、3:4、1:1），覆盖推文、小红书与方形排版场景。

核心能力

• JSON 配置驱动：一份 JSON 描述画布、颜色、文本框、连线、动画包、计数器、日志、触发点，模板不需要修改；坐标是画布像素，可精确还原原图布局
• 双主题渲染：终端深色（monospace 字体，等宽文本框，复刻 @thedelost 经典动效）与浅色粉彩（圆角柔和，SVG 箭头，适合小红书科普长图）可一键切换
• 三重动效叠加：快节奏（连线上带光点的数据包、自旋 spinner、快计数器）+ 中节奏（日志滚动、最新行高亮、进度条过阈值翻色）+ 慢节奏（侧栏触发点依次亮起、箭头变色、配文逐字打出、累计计数）
• 多画幅预设：4:5（1200×1500，X 推文原版）、3:4（1080×1440，小红书）、1:1（1080×1080，方形），可任意叠加主题组合
• 完全确定性渲染：所有视觉都是时间 t 的纯函数，使用固定整数种子哈希，无 Math.random、无 CSS 动画；相同 JSON 输出逐帧字节级一致，方便自检
• 自带自检脚本：check_frames.py 会在 ~120 个时间点采样、测量文本溢出/重叠并导出 PNG，可加 --repeat 在 seek 往返后比较字节以证明确定性

安装配置

1. 克隆仓库：git clone https://github.com/ythx-101/live-panel-skill
2. 安装系统依赖：python3 --version（≥3.8）确认已就绪；brew install ffmpeg 或 apt install ffmpeg 装好 ffmpeg；保证 Chrome 或 Chromium 在 PATH 上
3. 放置 Skill 文件夹：把仓库目录放到 ~/.claude/skills/live-panel/，重启 Claude Code 即被 Agent 识别
4. 字体回退栈：终端主题默认走 JetBrains Mono → IBM Plex Mono → Noto Sans Mono CJK SC；浅色主题走 Noto Sans CJK SC / PingFang SC；安装 JetBrains Mono + Noto CJK 可还原示例截图视觉

使用步骤

1. 选定最接近的示例：从 examples/codex-agents/（终端深色，4:5，复刻 @thedelost 原图）、examples/airbnb/（中文终端风）、examples/agent-architecture/（浅色粉彩，3:4，复刻小红书 @林纾 的《AI Agent 的完整架构》）中复制最贴的一张 config.json
2. 填入你的系统内容：编辑 boxes（文本框与配色）、wires（连线）、packets（光点路径）、log（日志行）、counters（计数器）、triggers（侧栏触发点），并在 credit 字段写清原始作者与链接
3. 渲染 mp4：执行 python3 scripts/render.py --config my.json --out my.mp4；可用 --width / --height / --duration / --fps / --crf 微调，附 --html-out page.html 同时输出可在浏览器循环的网页版本
4. 抽帧自检：执行 python3 scripts/check_frames.py --config my.json --out-dir frames --repeat，查看导出的 PNG 是否存在文本溢出/重叠，exit 0 方可发布
5. 发布：mp4 已含 silent AAC 音轨避免被聊天软件识别为 GIF；按平台横竖比选好画幅即可发 X、小红书或内嵌网页

适用场景

• 系统/Agent 架构科普：把自家 AI Agent、Codex Agent Tree、Agent 调度系统的结构做成"监控面板感"的动图，比静态图点击率更高
• 小红书/X 信息流内容：浅色粉彩主题适合小红书科普长图，终端深色主题适合 X 上的"开发者氛围"传播
• 播客/Latent.Space 类访谈配套：把访谈里提到的数字（用户数、调用量、增长曲线）转成会动的计数器和仪表盘
• 课程/演讲开场动画：教学课件里的"系统此刻正在工作"演示、Codex / Claude Code 工作流讲解动图
• 品牌市场活动视觉：用统一 JSON 模板批量产出"产品架构 / 数据流 / 组织结构"主题的社媒短视频

适用人群

• AI 编程 Agent 重度用户（Claude Code / Codex / Cursor / opencode），想让 Agent 自动产出"活的"架构图
• 技术博主与小红书知识类博主，需要批量生产差异化、社媒友好的科普短视频
• 产品经理 / 解决方案架构师，给客户做产品演示时需要"系统工作原理"的可视化视频
• 开发者与开源维护者，希望在 README、博客、推文中嵌入"系统在工作"的 mp4 而非静态截图

工作原理

引擎核心是一个 HTML 模板（assets/template.html）+ 一个 Python 渲染脚本（scripts/render.py）。模板暴露 window.seek(t) 函数，所有视觉元素（盒子、连线、数据包、日志、计数器、触发器）都是时间 t 的纯函数。render.py 通过 Chrome DevTools Pipe 驱动 headless Chromium，按 i/fps 步长反复 seek 到不同 t、截屏、用 ffmpeg 合成 H.264 mp4。"随机"选择都基于固定整数种子哈希，因此同一份 JSON 在任何机器、任何时间跑出来的逐帧字节都完全一致。check_frames.py 利用这套确定性做"seek 往返再截屏"的字节对比，可在交付前发现文本溢出、布局重叠、字体回退引起的渲染漂移等真问题。

官方链接

• GitHub 仓库：
• 设计灵感：（@thedelost 原始 Codex agent tree 动图）
• 中文传播线索：（@slashui 引用转发）
• 浅色主题复刻对象：小红书 @林纾《AI Agent 的完整架构》（2025-09-04 发布）
• 数字示例来源：（Airbnb 高管 Latent.Space 访谈）

代码遵循 MIT 协议；examples/codex-agents/ 与 examples/agent-architecture/ 中的视觉设计分别归 @thedelost 与 @林纾 所有，使用时需保留 credit。