ythx-101/live-panel-skill

选用指南

AI 根据 README 整理 · 2026/10/16 20:21:53

使用方式

通过命令行使用，运行 render.py 渲染视频或网页，check_frames.py 检查布局问题。

查看 README 依据

{"type": "flow", "path": [[540, 440], [540, 520]], "period": 2, "offsets": [0.3], "color": "gr"}, {"type": "log", "x": 40, "y": 700, "w": 1000, "rows": 4, "padTop": 16, "padBottom": 30, "padLeft": 20, "title": "log", "titleX": 36, "titleW": 80, "cols": [{"key": "time", "x": 0}, {"key": "who", "x": 130}, {"key": "m", "x": 260}, {"key": "g", "x": 860}]} ] } ``` ```bash git clone https://github.com/ythx-101/live-panel-skill && cd live-panel-skill python3 scripts/render.py --config examples/minimal/config.json --out minimal.mp4 --html-out minimal.html

python3 scripts/check_frames.py --config examples/minimal/config.json --out-dir frames --repeat # exit 0 = no overflow/overlap, replay identical ```  > ## Credits - please read

部署要求

需要 Python 3.8+（仅标准库）、Chrome 或 Chromium、ffmpeg；无需 API 密钥、网络或 pip 包。

查看 README 依据

- **Use it for:** agent architecture diagrams, multi-agent / agent-tree panels, system and data-flow diagrams, "monitoring dashboard" style posts. - **For AI agents:** `SKILL.md` makes it a skill for Claude Code, Codex and other agents that read SKILL.md; the agent writes the JSON, renders and checks frames itself. - **Credit:** the look and motion idea come from a clip by [@thedelost](https://x.com/thedelost); see *Credits* below. - **Requirements:** Python 3.8+ (standard library only), Chrome or Chromium, ffmpeg. No API key, no network, no pip packages. MIT licensed code.

已知限制

Windows 原生不支持，需在 WSL 中运行；坐标基于画布像素，换画幅需重新配置。

查看 README 依据

Platforms: Linux and macOS. On macOS the browser is found automatically under `/Applications` (Google Chrome, Chromium, Edge, Brave); pass `--chrome` to override. Windows is not supported natively because Chrome is driven over a DevTools pipe on POSIX file descriptors 3/4 (`pass_fds`), which Windows lacks; run the scripts unchanged inside WSL instead (`apt install chromium ffmpeg`, then render from `/mnt/c/...`). ```bash python3 scripts/render.py --config examples/codex-agents/config.json --out out.mp4

Positions in a config are absolute canvas pixels, so a config is authored for one canvas; `render.py --width/--height` only rescales (letterboxes) it. For another ratio, copy the config and re-place the boxes. | `theme.preset` | look | | --- | --- | | `terminal-dark` | dark window, monospace, segmented text-mode boxes (the original clip's style) | | `light-pastel` | white background, rounded pastel boxes, SVG arrows with rounded corners, soft glow on active items |