Анимированные схемы архитектуры из одного JSON: установка и разбор скилла live-panel-skill для Claude
Скилл работает без внешних библиотек и API-ключей на Python, Chromium и ffmpeg, а результат сохраняет в MP4 или интерактивную страницу.
Как устроен live-panel-skill и чем он отличается от видеоредакторов
Для демонстрации архитектуры агентов, распределенных систем и пайплайнов обычно используют статические диаграммы в Mermaid или Excalidraw, либо собирают анимацию вручную в видеоредакторах и коде вроде Remotion. Проект live-panel-skill разработчика ythx-101 предлагает другой подход: вся динамика описывается в одном конфигурационном JSON-файле без необходимости монтировать видео по ключевым кадрам.
Инструмент генерирует схему в виде терминальной панели мониторинга или светлой инфографики. Геометрия блоков остается неподвижной с нулевого кадра, а работа системы передается через непрерывное движение: по соединительным линиям перемещаются пакеты данных с хвостами свечения, циклически прокручиваются логи событий, обновляются счетчики запросов и переключаются индикаторы статуса.
Воспроизведение построено на детерминированной функции времени window.seek(t). В коде рендеринга отсутствуют вызовы Math.random(), привязка к системным часам и стандартные CSS-анимации. Любые псевдослучайные вариации рассчитываются через целочисленный хеш с фиксированным сидом, поэтому два последовательных запуска рендеринга выдают попиксельно идентичные кадры.
Системные требования и подключение скилла к Claude Code
Для работы генератора не требуются видеокарты, облачные API и внешние Python-библиотеки из pip. Вся логика опирается исключительно на стандартную библиотеку Python 3.8+, локальный браузер Chrome или Chromium для снятия снимков экрана через DevTools-протокол и утилиту ffmpeg для сборки видеоряда. На Linux и macOS скрипты работают нативно, а на Windows запуск выполняется через окружение WSL.
Скилл подключается к Claude Code размещением репозитория в каталоге пользовательских расширений:
Файл SKILL.md внутри репозитория содержит инструкции для языковой модели: правила подбора параметров холста, синтаксис конечных автоматов и регламент обязательной проверки разметки перед отправкой готового файла.
Структура конфигурации: холст, темы и динамические машины
Конфигурация схемы состоит из четырех ключевых секций:
- canvas. Задает пропорции кадра, частоту и длительность. Пресет 4:5 (1200×1500) рассчитан на публикации в X, пресет 3:4 (1080×1440) оптимизирован под мобильные экраны, а 1:1 (1080×1080) предназначен для квадратных видеороликов.
- theme. Переключает визуальный стиль. Пресет terminal-dark оформляет схему как темное консольное окно с моноширинным шрифтом JetBrains Mono, а light-pastel создает светлую инфографику с мягкими пастельными оттенками и скругленными плашками.
- machines. Описывает переменные состояния, зависящие от времени: счетчики counter, циклические переключатели cycle, шкалы gauge и триггеры triggers.
- elements. Фиксирует координаты блоков box, соединительных траекторий path, направлений движения пакетов flow и строк консольного вывода log.
Генерация разметки через scaffold и проверка геометрии
Ручное составление JSON-конфигурации объемом 20–40 КБ приводит к ошибкам в расчете абсолютных координат. В состав репозитория включен вспомогательный генератор scripts/scaffold.py. Он принимает краткую текстовую спецификацию цепочки компонентов и автоматически рассчитывает сетку расположения блоков, точки привязки проводов и перенос строк:
Для контроля наложения элементов и выхода текста за границы контейнеров применяется скрипт scripts/check_frames.py. Утилита выборочно проверяет около 120 временных точек анимации через объектную модель браузера и подтверждает детерминированность перерисовки:
Импорт схем из Excalidraw и готовые пресеты представлений
Для типовых архитектурных структур в движке предусмотрены готовые шаблоны представлений: циклический процесс ring, воронка с потерями на этапах funnel и разветвленный рабочий процесс с проверками условий loop.
Если проектная схема уже нарисована в популярном редакторе Excalidraw, ее не требуется воссоздавать с нуля. Скрипт excalidraw_import.py конвертирует файл .excalidraw в формат конфигурации live-panel с сохранением соединений между фигурами:
Рендеринг в MP4 и создание автономной веб-страницы
Финальная компиляция видео выполняется скриптом scripts/render.py. Флаг --html-out позволяет одновременно экспортировать автономный HTML-документ со встроенными стилями и скриптами, который открывается в любом браузере и непрерывно воспроизводит схему без внешних серверов:
Ограничения инструмента и правила маркировки данных
Поскольку координаты всех элементов задаются в абсолютных пикселях конкретного холста, адаптивное масштабирование отсутствует: при изменении соотношения сторон блоки необходимо расставлять заново. Встроенный шрифт 得意黑 Smiley Sans оптимизирован под заголовки, а для корректного отображения иконок и азиатских глифов требуется наличие системных шрифтов JetBrains Mono и Noto CJK.
По регламенту репозитория любые числовые показатели в анимации, не подкрепленные внешними источниками, помечаются маркером illustrative в подвале диаграммы. Репозиторий опубликован под лицензией MIT и на 5 ноября 2026 года набрал 841 звезду на GitHub.
Всё самое интересное — в нашем Telegram-канале «Claude без воды».