LiveCanvas — скилл
Скилл делает из темы короткую анимированную карточку с фактами из найденных источников и ресурсами для Live Photo на iPhone
- 539 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Агент ищет в интернете и выполняет код: ставит зависимости npm и запускает рендер
- Скрипты Python и FFmpeg пишут файлы в каталог задачи
- Данные из найденных страниц попадают в готовую карточку и требуют сверки с источниками
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/livecanvasОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент ищет в интернете и выполняет код: ставит зависимости npm и запускает рендер
- Скрипты Python и FFmpeg пишут файлы в каталог задачи
- Данные из найденных страниц попадают в готовую карточку и требуют сверки с источниками
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
LiveCanvas превращает одну фразу в информационную карточку: обложку и короткую анимацию, которая объясняет тему. Скилл сначала ищет факты в сети и сохраняет исходные данные и источники, и только потом пишет заголовки и подписи. Если подходящего временного ряда нет, он делает карточку из фактов, процесса или сцены и не выдумывает данные ради графика. Дальше агент составляет краткий план: главная мысль набора, вывод каждой карточки, раскадровка и список материалов. В кадр попадают предметы темы (продукт, чашка кофе, поезд, медаль, городской пейзаж), эмодзи, временная шкала и при необходимости график. Анимация собирается в Remotion. По умолчанию кадр 1080×1440, 30 кадров в секунду, длина около трех секунд, звука нет. Все эти значения можно менять. На выходе вы получаете обложку, MP4, список источников данных и редактируемый проект Remotion. Если на машине есть Python 3.10 или новее, Pillow и FFmpeg, добавляется пакет `.pvt` с парой фото и видео для Live Photo. Скилл поддерживает старое имя LiveChart: вызов `$livechart` перенаправляется на LiveCanvas, если положить папку livechart рядом.
Для кого. Для контент-менеджеров, маркетологов и редакторов, которые делают короткие информационные карточки и хотят, чтобы агент сам проверил цифры и собрал анимацию.
Подходит, если
- Нужна анимированная карточка с динамикой показателя, например годовой температурой двух городов
- Надо объяснить новость или релиз продукта короткой сценой с цифрами и ссылками на источники
- Требуется сравнение двух продуктов или показателей в виде обложки и трехсекундного ролика
- Нужны ресурсы Live Photo, чтобы поставить анимацию на экран iPhone
- Хочется получить редактируемый проект Remotion, чтобы доработать анимацию вручную
Не подходит, если
- Нужны ролики длиннее нескольких секунд или со звуком: инструмент рассчитан на беззвучные карточки
- У агента нет интернета и запуска кода: скилл ищет факты в сети и рендерит анимацию командами
- Не установлены Node.js, Python и FFmpeg: без них анимацию не собрать
- Нужно готовое видео для монтажа на длинной временной шкале: здесь короткие самостоятельные карточки
Пример запроса к агенту
Сделай через LiveCanvas карточку про изменение температуры в Москве и Сочи за последний полный год: обложка, анимация на три секунды и список источниковОграничения
Для анимации нужны Node.js с npm, Python 3, FFmpeg и подходящие шрифты, а зависимости проекта ставятся командой `npm ci`. Для Live Photo на Linux, Windows и macOS нужны Python 3.10 или новее, Pillow и FFmpeg, а на macOS есть и путь через Swift с проверкой PhotoKit. Сейчас скилл делает беззвучное видео H.264 и фото JPEG.
Пакет `.pvt` содержит фото, видео и метаданные, но «Файлы» на iPhone не всегда показывают его превью. Анимации в описании проекта показаны GIF-файлами, которые не являются настоящим Live Photo. Скилл не импортирует результат в альбом сам.
Шаблон основан на Remotion 4.0.530. Remotion выпускается под собственной лицензией, отличной от MIT, поэтому перед коммерческим использованием прочтите ее условия на сайте Remotion. Примеры данных в шаблоне синтетические и годятся только для проверки, а перед публикацией факты нужно сверить с источниками. Скилл ищет данные в интернете, поэтому качество карточки зависит от найденных источников.
Как отключить. Удалите папку livecanvas, а при наличии и livechart, из каталога скиллов агента, например из `~/.codex/skills/`. Результаты работы лежат в каталоге задачи, их удаляют вручную.
Частые вопросы
Как поставить LiveCanvas в Claude Code или Codex?
Выполните `npx skills add pengchujin/livecanvas --skill livecanvas -g` и выберите своего ассистента. Только для Codex добавьте флаг `-a codex`. Вручную папку `livecanvas/` кладут в `~/.codex/skills/` целиком, одного SKILL.md мало.
Что такое файл .pvt и как поставить анимацию на iPhone?
Это пакет с парой фото и видео и метаданными для Live Photo. Скилл создает его, если на машине есть нужные Python, Pillow и FFmpeg. Превью пакета в приложении «Файлы» на iPhone может не появиться.
Откуда LiveCanvas берет цифры для карточки?
Скилл ищет их в интернете и сохраняет исходные данные и источники до того, как напишет заголовки. Для временных рядов есть скрипт `validate_data.py`, который проверяет даты, ссылки на источники и охват. Совпадение с реальными источниками он не гарантирует.
Чем LiveCanvas отличается от LiveChart?
Это тот же проект после переименования: LiveChart делал графики, а LiveCanvas дополнительно работает с изображениями, эмодзи, сценами и процессами. Старый вызов `$livechart` сохраняется, если положить папку livechart рядом.
Сколько длится анимация и какого она размера?
По умолчанию 1080×1440 пикселей, 30 кадров в секунду и около трех секунд без звука. Это стартовые значения, их можно менять под содержание карточки.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл Claude Code для коротких анимационных роликов, нарисованных кодом: семь стилей, согласование сюжета и раскадровки, озвучка и рендер в MP4
Скилл превращает китайский текст истории или набор упорядоченных картинок в вертикальную рисованную анимацию, немой видеоряд в стиле дневникового комикса
Скилл для Claude Code и Codex: делает кинематографичные продуктовые видео на Remotion из карточек-рецептов кадров, готового шаблона и аудиоресурсов
Скилл для Codex перерисовывает ваше фото в акварельную иллюстрацию на белой бумаге с большими полями и короткой подписью
Скилл и конвейер на Remotion: агент изучает ваш продукт и собирает демо-ролик кодом на React, без записи экрана
Скилл собирает из темы озвученное видео в 4K: исследование, сценарий, локальный TTS, монтаж на Remotion и сведение в FFmpeg
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| LiveCanvas (эта запись) | нет | 539 | |
| Claude Remotion Skill | нет | 696 | учит агента делать видео на Remotion вообще, без поиска фактов и пакета Live Photo |
| Animate | нет | 1 066 | рисует короткие ролики кодом в нескольких стилях, без проверки данных и ресурсов для iPhone |
Коротко о README
Пятнадцать примеров анимаций в GIF со ссылками на MP4 и пакеты Live Photo, затем установка, пример запроса, требования к окружению и состав результата. Код лежит под лицензией MIT, а у медиафайлов примеров свои условия.
Бейдж для README
Исходный SKILL.md
--- name: livecanvas description: 将主题或材料经搜索核实制成苹果 Live Photo 信息动效卡。用 Remotion 编排图片、PNG、emoji、场景、时间线和可选图表，适用于知识解释、产品比较、变化过程及数据故事；制作可预览动效与配对实况资源，说明接收端兼容性。 --- # LiveCanvas · 实况画布 把用户的一句话变成有证据、静态可读、动态能讲清内容的实况动效卡。原名 LiveChart，现名 LiveCanvas（实况画布），覆盖图表、图片与场景叙事；默认主动设计与主题相关的图片/图标和场景动作，图表只是可选表达。默认中文、Remotion、1080×1440、30 fps、约 3 秒、无声。这些是起点，允许按内容调整；3 秒不是声称的苹果格式限制。 ## 先定内容，再定动效 1. 从请求提取主体、指标、时间范围、比较关系、用途；给定文章或报告时先读完整材料，再提取关键事件、变化、能力、对比与场景。按内容重要性分配篇幅，不只挑价格或易展示的数字。具体需求优先，不把用户给的例子当成固定模板。 2. 搜索并核实数据，读 [数据与口径](references/data.md)。先保存原始证据、事实或结构化数据，再写标题、数字与注释。无时间序列的主题可以用事实卡、过程或场景解释；不能为了画图虚构数据。 3. 写简短制作说明：整套内容主线、每张的主体与结论、事实/数据口径、封面信息层级、分镜时间表及素材计划。张数依用户要求和内容决定，不固定为某个数量或主题组合。选出适合该主题的表达，不默认折线图加数字。直接做设计判断；仅当缺失信息会实质改变答案时提问。 4. 按 [封面与动效](references/design.md) 制作。吸收 Emil Kowalski animate 的有目的、克制、连续、节奏清晰原则；用户已指定 Remotion，不执行上游的工具替换步骤，也不把交互组件时长限制机械套到解释性视频。 ## 文案：直接写事实与数据 - 标题优先写“主体 + 数字/变化/明确结论”，例如“输出上限 1M tokens”“首发任务成本低 39%”“Text Arena 暂列第一”。没有必要的数字时，直接写产品名、版本或具体事件，不硬凑数据。 - 用简短、直观的陈述，删掉空泛宣传、设问、比喻、对仗和装饰性英文标签。不要用“重新定义”“读懂三个变化”“让收益落到真实场景”等句子代替事实。正文与配图描述也遵循同一标准；来源写清机构名，如 Artificial Analysis，不只写 AA。写法示例与限定条件见 [封面与动效](references/design.md#标题与配图文案)。 - 用户说“AI 味太浓”“直接上数据”“不要花里胡哨”时，优先精简文案与无关装饰；保留原有主题、信息、必要素材和已选设计方向，不擅自删除主体封面、合并主题或把整套改成同一数据模板。 - 修改时保留已确认的主题、信息与视觉要求。用户改变张数或重点时重新分配内容，并说明合并、替换与复用关系；不靠机械拆页或重复主题凑数。按图编号核对改版前后内容，总包按不同内容去重。 ## 视觉表达 - 封面以产品名、版本号或核心对象建立视觉主次。“登场感”“冲击力”等是效果描述，不直接当成画面文字；具体做法见 [封面与动效](references/design.md)。 - 整套统一配色、字体和图形语言，按内容选择构图。用图形解释事实与关系，避免堆文字、大数字、装饰卡片或机械复用同一模板。 - 默认让主题中的对象出现在画面中：产品 PNG、咖啡杯、汽车、列车、奖牌、城市照片、天气 emoji 等；挑选与内容有关的一组统一风格素材，不是给图表角落贴装饰。 - 设计对象的入场、运动、排列、替换或状态变化来解释内容。例如列车驶过年份节点、咖啡杯带出门店卡片、城市画面随季节切换。 - 按主题组合场景、图片对比、图标阵列、时间线、过程演示、重点文字和必要图表。纯图表只在确实最清楚或用户指定时采用。 - 使用图片或 emoji 时读 [图片与图标](references/visual-assets.md)，负责找素材、检查可用性并加入工程；无需让用户先提供素材才开始。 ## 搜索默认值 - “最近 3 年”：截至最新可靠已完成观测日的滚动三年，注明首尾实际日期，不默认成三个年末值。月度图用已完成月末观测；最新未完成月只能单独注明。 - “全年温度”未给年份：采用最近一个完整自然年，默认月平均气温；在结果开头说明选择。若意图明显是常年气候，使用有明确基准期的气候平均值。 - 跨公司比较对齐观测日期、指标、币种，或明确使用同基期指数，保留原始绝对值。 - 允许涨、跌、持平、季节循环。不要因用户说“增长曲线”而把下降画成增长。 - 日期按用户时区解析，不用机器日期硬编码“今年”。 ## 制作与封装 读 [运行与交付](references/production.md) 和 [直接交付](references/direct-delivery.md)。资源路径相对于本 skill 目录；称该绝对路径为 `SKILL_DIR`。