live-panel

live-panel

将系统描述转化为持续运行的架构图：一个固定页面，看起来像是运行中系统的监控面板。每一帧都是完整、易读的图表；变化的是系统状态，而不是装饰元素。内置两种主题：terminal-dark（原版样式）和 light-pastel（白色背景、圆角柔和色彩框——适用于信息图，例如小红书）。画布预设：4:5（X，1200x1500）、3:4（小红书，1080x1440）、1:1（1080x1080）。适用于制作发布到 X 和小红书的帖文。

致谢。 视觉风格和动态构想源自 @thedelost 制作的一段架构图短片（Codex Agent 树面板，用 GPT 生成并录屏为网页）：https://x.com/thedelost/status/2105398038026195279 。该短片经 @slashui 转发引用后被许多人看到：https://x.com/slashui/status/2105850132365443528 。此技能独立重现了其方法（通过分析该短片学习动态语法）。examples/codex-agents/ 是对原图的复刻，保留原作者的设计。发布使用此技能的 Codex 示例制作的内容时，请保留这段致谢。

适用场景

• 用户需要一张架构图、Agent 树图、组织结构图或数据流图，并希望它有生命感（视频、类似 GIF 的循环动画或实时页面）。
• 用户有一段系统描述，其中包含几个框、它们之间的流转、一些“待命”侧边触发器、一段日志和一些数字。
• 不适用于：需要交互、真实遥测数据或分步说明的图表（请使用幻灯片或常规绘图工具）。

输入

单个 JSON 配置（模式：references/config-schema.md），包含所有内容：画布尺寸、颜色、带文本行的框、连线、数据包路径、侧边栏触发器、日志文案和数字。模板无需编辑。 从最接近的示例开始：examples/codex-agents/config.json（terminal-dark、4:5，复刻 @thedelost 的图片）、examples/airbnb/config.json（terminal-dark、中文内容，数字来自一次访谈），或 examples/agent-architecture/config.json（light-pastel、3:4，将静态小红书信息图改为动态效果，原作者为小红书 @林纾）。主题：theme.preset；画布：canvas.preset。位置是画布上的绝对像素坐标，因此其他宽高比需要单独配置。

选择视图（视图）

如果内容有明确的形状，请使用 {"type":"view"} 元素，而不是手动摆放框（约定：references/views.md；门槛：scripts/verify_view.py 必须通过全部 7 种组合）：

• 重复循环 → ring；逐阶段流失 → funnel（两者均已就绪，参见 examples/ring/、examples/funnel/）。
• 包含决策和回环的嵌套工作流（遇到“否”时重试、外层／内层循环、人工关卡）→ loop（已就绪，参见 examples/loop-poteto/）。
• 关系／集群 → nebula；随时间推进的工作／并行轨道 → timeline；层级结构 → tree；少量需监控的数字 → kpi（计划中，本版本尚未提供）。
• 需要持续变化的手绘 Excalidraw 风格图表（柔和色彩框、手写文字、循环）→ excalidraw（已就绪，参见 examples/excalidraw-aqua/、examples/excalidraw-gardener/；请运行一次 scripts/fetch_fonts.sh 获取 CJK 手写字体）。用户已有 .excalidraw 文件 → 先运行 python3 scripts/excalidraw_import.py file.excalidraw -o config.json（保留箭头绑定，并写入节点／边／步骤），然后添加备注并渲染。
• 包含任意框和连线的架构图 → 不使用视图，像原始示例一样使用自由排布元素。

固定流程

1. 收集内容，并注明每个数字的来源。 列出各个方框、谁与谁对话、哪些事项是「触发时调用」的触发条件，以及日志会显示什么。在每个数字旁标注来源（链接或「模拟」）。如果某个数字没有真实来源，它就是模拟的：在屏幕上明确说明（用页脚行，或在计数器旁标注「仅供示例」）。绝不要编造数据并将其当作真实数据呈现。
2. 编写配置——先搭框架，再迭代。 对于按行排列的方框（Agent 树、流水线、扇出／合并、监控面板，无论是否带有「触发时调用」侧栏），先写一份简短规格说明——每个方框显示什么、各行从上到下的顺序，以及可选的 lane（运行中／已完成）、gauge（超过阈值时翻转的条形）、rail、counters、log、note、credit；运行 python3 scripts/scaffold.py --example 可打印一份示例，然后运行 python3 scripts/scaffold.py --spec spec.json --out out/config.json。它会处理像素布局、连线、数据包、侧栏箭头、日志列和文本换行，生成的配置通常首次运行 check_frames.py 就能通过；然后小步修改输出（或规格说明）。对于它无法表达的布局（中心方框带卫星节点、曲线箭头、用自身几何结构重现图片），用 shell 命令将最接近的示例复制到输出路径（cp examples/<closest>/config.json out/config.json），或编写一个简短的 Python 脚本来构建字典并输出 JSON；然后逐步小幅修改。绝不要在一条消息或一次工具调用中输入完整配置：一次性写入 20-40 KB 的 JSON，是 Agent 运行在保存任何内容前就失败的最常见原因。最迟在第 5 次工具调用时，确保磁盘上已有可运行的草稿，然后循环迭代：修改一到三个方框，运行 check_frames.py，读取其中的 PROBLEM 行，修复，再重复。不要在推理过程中规划坐标或计算文本宽度：如果你发现自己连续多行都在计算像素，就停下来直接编写修改——在脑中长时间规划布局，是运行在保存任何内容前就失败的另一种原因。将方框放在像素网格上（画布像素中的 x、y、w、h）；文本行以固定行高在方框内流动。将署名／来源行放在顶层 credit 键中（"credit": {"text": "...", "y": ...}）；底部的普通文本元素不会被识别为署名。选择机器和周期前，先快速浏览 references/motion-grammar.md；references/config-schema.md 列出了所有键，因此你通常无需阅读 assets/template.html。
3. 渲染。 python3 scripts/render.py --config my.json --out my.mp4（需要在 PATH 中找到 Chrome/Chromium 和 ffmpeg，或使用 --chrome / --ffmpeg；在 macOS 上，浏览器也会在 /Applications/*.app 下查找）。仅支持 Linux 和 macOS——在 Windows 上，请在 WSL 内运行脚本。--html-out page.html 还会保留一个独立页面，可在任意浏览器中实时运行。
4. 检查帧，而不是盲目信任。 python3 scripts/check_frames.py --config my.json --out-dir frames --repeat 会采样约 120 个时间点，根据 DOM 测量文本溢出和重叠、导出 PNG，并验证重放的确定性。打开 PNG 查看：检查器能发现几何问题，而无法判断审美。修复配置并重复检查，直到退出状态为 0。对于 text overflows its box，采用成本最低的修复方式——缩短文本、将字号调小一级，或加宽相应方框——而不是重新设计布局；时间耗尽时，一个已经通过检查的配置，胜过一个仍在规划中的更好方案。

一屏了解动效规则

（完整内容和原理：references/motion-grammar.md。）

• 布局永不移动。 不移动镜头，不逐步展示。第 0 帧已经是一张完整的图表。
• 三种节奏同时进行：快速（每条连线上都有带轨迹的分组、旋转指示器、快速变化的计数器）、中速（日志滚动，最新一行高亮，旧行变灰；条形图重新滚动，并在超过阈值后切换颜色和标签）、慢速（侧边栏中的触发项按顺序逐个亮起，对应箭头改变颜色并传递一个分组，建议逐字显示，累计总数）。
• 所有位置的信息都一致。 日志中的数字就是条形图上的数字；侧边栏中亮起的触发项就是日志提到的触发项；状态栏中的计数器与框中的计数器相等。在这个引擎中，这种一致性由设计保证：日志行由与框相同的状态机生成。
• 没有真实数据？请标注“示意”。 固定事实保持不变；只有动画自身的计数器会变化，并且会明确标注。

确定性（为何每次渲染结果都相同）

页面公开了 window.seek(t)。每个视觉元素都是 t（以及少数“随机”选择所用的固定整数种子）的纯函数：不使用墙上时钟、Math.random 或 CSS 动画。渲染器会调用 seek(i/fps) 并截取屏幕；check_frames.py --repeat 会先跳转到别处再返回，并比较字节。在普通浏览器中打开（不带 ?manual）时，则由 requestAnimationFrame 驱动同一函数并循环播放。

文件

• assets/template.html - 通用页面。scripts/scaffold.py - 将简短规格转换为完整配置（布局由它代劳）。scripts/render.py - 生成 mp4。scripts/check_frames.py - 检查并生成 PNG。scripts/livepanel.py - 共享辅助工具（通过 DevTools 管道控制 Chrome，仅使用标准库）。
• references/motion-grammar.md、references/config-schema.md。
• examples/codex-agents/、examples/airbnb/、examples/agent-architecture/ - 配置、mp4 和动画 preview.webp。examples/ring/、examples/funnel/、examples/funnel-karpathy/（对数刻度、单色调色板）、examples/loop-poteto/（带决策的分组循环）- 查看示例。
• assets/views/<kind>.js - 每种视图对应一个文件；references/views.md、references/view-rules.md、references/verify-view.md；scripts/verify_view.py。

浅色主题说明

对于信息图，保留原有颜色和结构；动效则更轻柔：小型分组沿每个箭头缓慢移动；与状态绑定的箭头变为强调色并传递两个分组；活动框周围出现光晕；列表（步骤、工具）从共享的 cycle 状态机读取状态，每次点亮一行，确保屏幕上的所有内容都指向同一步骤。对于包含其他框的框，请使用 container:true，避免检查器将嵌套框判定为重叠；对于放置在框上的图标文字，请使用 inside:true。

署名规则

凡是对图片进行动态复刻或重制，都必须在视频页脚（credit）和帖子中注明原作者及链接：作者账号 以及用户提供的完整 URL，必须原样保留（例如：原图：小红书 @作者《标题》 https://... · 动态复刻，非原作者作品）。只写账号不附链接，或只附链接不写账号，都不够。如果用户提供的是真实人物相关来源（如报告、采访），也要在 credit 中注明该来源。若人物为模拟生成，须明确说明。