live-panel
live-panel
Turn a description of a system into an always-running architecture diagram: one fixed page that looks like a monitoring panel of a running system. Every frame is a complete, readable diagram; what moves is system state, not decoration. Two built-in themes: terminal-dark (the original look) and light-pastel (white background, rounded pastel boxes - for infographics, e.g. Xiaohongshu). Canvas presets: 4:5 (X, 1200x1500), 3:4 (Xiaohongshu, 1080x1440), 1:1 (1080x1080). Intended as the base for posts on X and Xiaohongshu.
Credit. The look and the motion idea come from an architecture-diagram clip by @thedelost (a Codex agent-tree panel, generated with GPT and screen-recorded as a web page): https://x.com/thedelost/status/2105398038026195279 . It reached many people through a quote-post by @slashui: https://x.com/slashui/status/2105850132365443528 . This skill is an independent re-implementation of the method (the motion grammar was learned by analysing that clip).
examples/codex-agents/is a recreation of the original picture and stays the original author's design. Keep this credit when you publish output made with the skill's Codex example.
When to use
- The user asks for an architecture / agent-tree / org-chart / data-flow diagram that should feel alive (video, GIF-like loop, or live page).
- The user has a description of a system with a few boxes, a flow between them, a few "on call" side triggers, a log and some numbers.
- Not for: diagrams that need interaction, real telemetry, or step-by-step explanations (use a slide or a normal diagram tool).
Input
A single JSON config (schema: references/config-schema.md). It holds everything: canvas size, colours, boxes with lines of text, wires, packet paths, side-rail triggers, log wording, numbers. The template never needs editing. Start from the closest example: examples/codex-agents/config.json (terminal-dark, 4:5, recreation of @thedelost's picture), examples/airbnb/config.json (terminal-dark, Chinese content, figures from an interview) or examples/agent-architecture/config.json (light-pastel, 3:4, a static Xiaohongshu infographic made to move, original by 小红书 @林纾). Theme: theme.preset; canvas: canvas.preset. Positions are absolute canvas pixels, so another aspect ratio needs its own config.