live-panel

English | 中文说明

把一份系统描述（一个 JSON 文件）变成终端风格、一直在运行的动态架构图，或一张会动的柔和浅色信息图：固定版面，光点沿连线流动，日志滚动，计数器跳动，进度条过阈值翻状态，侧栏触发点依次点亮。输出为 H.264 mp4（适合发 X / 小红书）或实时网页。它同时也是一个 Claude Code 风格的 skill（SKILL.md）。

致谢——请阅读
创意、外观与动法来自 @thedelost 的一个架构图视频（一个 Codex agent 分工面板，用 GPT 生成，以网页形式录屏）：https://x.com/thedelost/status/2105398038026195279。该视频经 @slashui 引用转发传播：https://x.com/slashui/status/2105850132365443528。
examples/codex-agents/ 是对该原图的复刻（布局、内容与三档节奏动效，均依据视频截帧重绘）。设计归 @thedelost 所有。方法（动法、配置驱动模板）在此重新实现，并非其代码。
examples/agent-architecture/ 将小红书 @林纾的静态信息图**《AI Agent 的完整架构》**（9 月 4 日发布）做成动态版。布局、文字与配色沿用原作；设计归原作者所有。视频底部已注明。
examples/airbnb/ 可视化了 Airbnb 高层在 Latent.Space 访谈 https://www.latent.space/p/airbnb 中陈述的数据。数字为 Airbnb 自述；动画计数为示意。

效果展示

terminal-dark，4:5 - 复刻 @thedelost 的 Codex agent 分工图	light-pastel，3:4 - 林纾的 AI Agent 架构图

Airbnb 示例（terminal-dark，中文内容，数字出自访谈）：

airbnb

视频：examples/codex-agents/codex-agents.mp4、examples/agent-architecture/agent-architecture.mp4、examples/airbnb/airbnb.mp4（每段约 28-30 秒，30 fps，含静音 AAC 音轨，以免聊天软件把它们当成 GIF）。

安装与使用

要求：Python 3.8+（仅标准库）、Chrome 或 Chromium、ffmpeg。无需 pip 包。

python3 scripts/render.py --config examples/codex-agents/config.json --out out.mp4
python3 scripts/check_frames.py --config examples/codex-agents/config.json --out-dir frames --repeat

render.py 选项：--width --height --duration --fps（默认值来自配置）、--chrome --ffmpeg（默认：从 PATH 查找）、--html-out page.html（保留自包含的实时页面）、--keep-frames DIR、--audio none、--crf。
check_frames.py 采样约 120 个时间点，从 DOM 测量文字溢出 / 重叠，输出若干 PNG，并在 --repeat 模式下对每个导出帧先 seek 离开再重渲染，证明结果一致。发现任何问题即以退出码 1 结束。
若作为 skill 使用，请把本目录放到你的 agent 加载 skills 的位置（Claude Code 为 ~/.claude/skills/live-panel/）。

自己做一张

复制一个示例配置。2. 修改文字、数字、颜色、位置。3. 渲染，运行 check_frames.py，查看 PNG。assets/template.html 无需改动。

主题与画布

"canvas": { "preset": "3:4", "duration": 28, "fps": 30, "preroll": 0 },   // 或直接指定 width/height
"theme":  { "preset": "light-pastel", "colors": { "pk": "#f0575f" } }      // preset + 覆盖项

`canvas.preset`	尺寸	典型用途
`4:5`	1200x1500	X（原视频格式）
`3:4`	1080x1440	小红书
`1:1`	1080x1080	正方形

配置中的坐标是绝对画布像素，因此一份配置对应一个画布；render.py --width/--height 只做缩放（letterbox）。要换比例，请复制配置并重新摆放各框。

`theme.preset`	外观
`terminal-dark`	深色窗口、等宽字体、分段文本模式框（原视频风格）
`light-pastel`	白色背景、圆角粉彩框、带圆角的 SVG 箭头、活动项柔光

主题控制：字体与字号、行高、颜色表（colors，名字随意）、框模式（segmented 或 solid）、圆角半径、边框宽度、连线宽度、光点大小与辉光、背景。可在模板启动代码顶部的 THEME_PRESETS 中新增自己的 preset，或在配置里覆盖。

配置参考（简版）

完整表格见 references/config-schema.md。

elements：text、box（填充、边框颜色、圆角、虚线、container、逐行 items/bar/runs）、line、path（带圆角的折线、箭头、虚线、when/then 变色、内嵌光点）、glyph、rule、flow（沿折线流动的光点，可选 when）、tarrow（触发箭头）、log。
machines（所有会变化的东西，均为时间的纯函数）：counter、cycle、gauge、any_low、lane、triggers。
when / then 可用于框、路径、flow、线与 runs：根据 machine 变量高亮（{"var":"seq.i","in":[0,1,2]}；条件列表表示 AND）。
动法规则：references/motion-grammar.md。

回放原理（确定性）

页面暴露 window.seek(t)。所有视觉都是 t 的纯函数；少数"随机"选取使用固定种子的整数哈希；不用墙钟、不用 Math.random、不用 CSS 动画。渲染器调用 seek(i/fps) 并截图。在普通浏览器中（无 ?manual），同一函数由 requestAnimationFrame 驱动。

字体

不捆绑字体文件。字体栈在已安装字体间回退：terminal 主题依次为 JetBrains Mono (OFL) -> IBM Plex Mono (OFL) -> DejaVu Sans Mono -> Noto Sans Mono CJK SC (OFL) -> 任意等宽；light-pastel 依次为 Noto Sans CJK SC (OFL) / PingFang SC / Microsoft YaHei -> Helvetica/Arial，大标题用 Noto Serif CJK SC。想要与示例完全一致的效果，请安装 JetBrains Mono 与 Noto CJK；emoji 图标需要彩色 emoji 字体（如 Noto Color Emoji）。不同字体会轻微改变字形宽度，更换字体后请重新运行 check_frames.py。

自测结果（本仓库，Chrome 154，ffmpeg 7.1）

三个示例均用 scripts/render.py 渲染；check_frames.py 在各自约 120 个采样时间点上报告 0 问题。（它确实能抓到真实问题：最初的 Airbnb 布局中日志时间列与下一列重叠，被标记出来。）
确定性：Codex 示例渲染两次，900 帧解码帧逐字节相同（ffmpeg -f framemd5 哈希一致）；agent-architecture 示例同理；check_frames.py --repeat 在 seek 离开后重新截图并逐字节比较。
Codex 复刻版与原视频截帧的还原度（同一时刻并排对比）：框的位置与尺寸误差在几个像素内；四色配色一致；三档节奏行为一致（每条线上都有光点、触发点轮转并打出建议文字、calls/tokens 累积、gauge 在 sharp/split 间翻转且图例随之切换、spinner 与完成状态、最新一行高亮的 4 行日志、约 16/s 的 forks 计数、prompt 光标）。差异：原视频字体是类粗衬线（slab）等宽，本仓库用 JetBrains Mono；原视频触发箭头为细实线，本仓库为虚线；bar 纹理、光点辉光与拖尾接近但不完全相同；原视频的 gauge 数值、日志文字与时间是从 2 fps 截帧目测读出的，因此序列有差异；第三条建议文字（before done）在截帧中无法辨认，是本仓库自行撰写的占位文字；日志时间以假定的 3 倍速运行。

许可证

代码采用 MIT（见 LICENSE）。examples/codex-agents/ 复刻的视觉设计归 @thedelost 所有，examples/agent-architecture/ 重制的小红书信息图归 @林纾所有；这两个示例是注明出处的复刻，不在 MIT 授权范围内。Airbnb 数据来自公开访谈中 Airbnb 自己的陈述。

中文说明

把一份系统描述（一个 JSON）变成终端风格、一直在运行的动态架构图，或者一张会动的浅色粉彩信息图：版面不动，连线上有光点流动，日志滚动，计数跳动，进度条过阈值翻状态，侧栏触发点依次点亮。产出 H.264 mp4（适合发 X 和小红书）或可直接打开的网页。

出处：动法和样式学自 @thedelost 的 Codex agent 分工动态图（https://x.com/thedelost/status/2105398038026195279），经 @slashui 引用转发（https://x.com/slashui/status/2105850132365443528）。examples/codex-agents/ 是对原图的复刻，设计归原作者；examples/agent-architecture/ 把小红书 @林纾的《AI Agent 的完整架构》静态图做成动态版，原图设计归林纾，画面底部有出处；examples/airbnb/ 的数字出自 Latent.Space 访谈，为 Airbnb 自述，画面里跳动的计数为示意。

用法：python3 scripts/render.py --config <配置> --out out.mp4；自查：python3 scripts/check_frames.py --config <配置> --out-dir frames --repeat。主题用 theme.preset（terminal-dark / light-pastel），画幅用 canvas.preset（4:5 1200x1500、3:4 1080x1440、1:1 1080x1080）。坐标是画布像素，换画幅需要另存一份配置重排。