这两天，"会动的架构图"在社交平台传播得很火爆。实测后发现，live-panel 这个开源 Agent Skill 就可以制作。它吃一份 JSON，吐一个 H.264 mp4 和一个能直接在浏览器里动的网页。
它和市面上大多数"AI 画架构图"最大的差别不在画得好不好，而在成品是一个一直在自己运行的监控面板——版面从头到尾不动，动的是系统状态。
版面不动，是它最反常识的地方
按常识，"会动的架构图"应该镜头推进、方框逐个亮起、箭头一根根画出来。live-panel 反过来做：方框、标题、图例、解说文字从第 0 帧就全部在场，此后一个像素都不挪位置。30 秒里唯一在变的是系统状态——连线上有光点流过、日志区每秒推一行新的、进度条重新掷值。
换来一个实际好处——你从视频里随便截任何一帧，都是一张完整、能直接发出去的架构图，不需要挑帧。
它明确不做什么
- 不做交互：没有点击、没有场景切换、没有播放控制条
- 不接真实遥测：面板上的每个会动的数字都是动画自己的状态，不是从你的系统读来的
- 不做逐步讲解式动画：没有"先讲 A 再讲 B"的叙事编排
- 不是编辑器友好路线：改布局要回去重排坐标
安装只要一步
环境硬要求只有三条：机器上有 Chrome 或 Chromium、有 ffmpeg、Python 在 3.8 以上且不需要装任何第三方包。
安装本身没有命令，只有一句话：把整个文件夹放到你的 agent 会去加载技能的那个目录。官方给的例子是 Claude Code 的 ~/.claude/skills/live-panel/。
操作步骤
1、自然语言命令安装；2、调用 skill 运行需要 Chrome、ffmpeg、Python，大模型需要支持多模态的模型。
3、ffmpeg 渲染成 mp4 视频。
四条实测踩坑
坐标是绝对像素：官方 README 明确写"Positions are absolute canvas pixels"。换画幅比例等于重写坐标，不是加个参数就行。
装完不一定会被自动索引到：放进技能目录后，本次会话的可用技能清单里可能没有它。先确认技能目录路径和 SKILL.md 能不能读到。
重跑渲染会覆盖手改的 HTML：每次渲染都是重新生成整页。想在 HTML 上做后续加工，要么渲染后改并且别再重跑，要么改配置里的 meta。
中文字体要显式加：默认字体栈里的中文是 Noto Sans Mono CJK SC，Windows 上未必装了。在 theme.font 末尾补 Microsoft YaHei 才稳妥。
