ГлавнаяМатериалы из Reels/ShortsЧек-лист
Чек-лист
кодовое словоКоллаж

Скилл для Claude Code: ролики-коллажи в стиле Vox

Ставишь бесплатный скилл collage-skill в Claude Code, даёшь ему тему одной строкой - и получаешь ролик-нарезку в стиле Vox из настоящих архивных фото плюс проект, который можно поправить на таймлайне в HyperFrames.

Содержание5 глав
  1. 01Ссылка на скилл
  2. 02Что поставить до скилла
  3. 03Установка скилла в Claude Code
  4. 04Как открыть и поправить таймлайн в HyperFrames
  5. 05Проверь себя

Шаг 1

Ссылка на скилл

Скилл называется collage-skill, автор - Prakhar. Бесплатный, код под MIT, без платных сервисов и API-ключей. Работает на HyperFrames (открытый движок, который превращает HTML в видео), ffmpeg и фотографиях с Wikimedia Commons. На выходе - чёрно-белые вырезки фото с красной обводкой-стикером, рваная бумага, старые карты, бирки с подписями, обводка маркером и дёрганое стоп-моушен движение.

Открыть collage-skill на GitHub

Документация HyperFrames

Шаг 2

Что поставить до скилла

  • Поставь Claude Code и проверь, что он запускается командой claude в терминале
  • Поставь Node.js версии 20 или новее и проверь: node -v
  • Поставь ffmpeg и проверь: ffmpeg -version
  • Поставь Google Chrome - через него HyperFrames рендерит кадры
  • Проверь, что есть интернет: скилл качает фото, шрифты и анимации
brew install node ffmpeg

macOS: Node и ffmpeg одной командой через Homebrew

Лучше на Mac
Вырезка объекта из фото нормально работает только на macOS - там встроенное отделение объекта от фона. На Windows и Linux скилл берёт запасной вариант из HyperFrames: людей вырезает хорошо, предметы - хуже.

Шаг 3

Установка скилла в Claude Code

Самый простой путь - отдать установку самому Claude. Открой Claude Code в любой папке и вставь это сообщение:

https://github.com/prakhar2603/collage-skill install this skill

Сообщение в Claude Code

Если хочешь руками - три команды в терминале:

01
Склонируй скилл в папку скиллов
git clone https://github.com/prakhar2603/collage-skill ~/.claude/skills/collage
02
Поставь зависимости инструментов
cd ~/.claude/skills/collage/tools && npm install
03
Только на Mac: собери вырезалку фото
swiftc -O lift.swift -o lift - команда запускается в той же папке tools
04
Перезапусти Claude Code
Закрой сессию и открой заново - скилл подхватится, команда /collage станет доступна
git clone https://github.com/prakhar2603/collage-skill ~/.claude/skills/collage
cd ~/.claude/skills/collage/tools && npm install
swiftc -O lift.swift -o lift

Ручная установка целиком

Шаг 4

Создай пустую папку под проект, открой в ней Claude Code и дай тему. Пример из ролика - доставщики обедов в Мумбаи (даббавалы):

Промпт для первого ролика1 строка · 28 знаков
/collage Mumbai's dabbawalas

Промпт в Claude Code

01
Тема
Claude читает статью Википедии по теме, выбирает факты и раскладывает историю на 4-5 сцен
02
Архивные фото
Сам ищет свободные фотографии на Wikimedia Commons, скачивает и вырезает из них людей и предметы
03
Сборка
~15 минут на свежем Mac
Собирает сцены в HyperFrames, добавляет звуки бумаги и рендерит ролик
04
Готовый ролик
16:9, 12-20 секунд
В конце пишет, где лежит файл: папка collage-<тема>/renders/, финальный ролик со звуком - renders/<тема>.mp4
  • src/ - скачанные оригиналы фото
  • assets/img/ - вырезки, которые идут в ролик
  • FACTS.md - факты из Википедии с источниками
  • STORYBOARD.md - раскадровка на 4-5 сцен
  • CREDITS.txt - авторы фотографий
  • build.mjs - файл, который собирает проект HyperFrames
  • renders/ - готовые видео
Перед публикацией
Пробегись по FACTS.md - факты взяты из Википедии, лучше сверить. Многие фото с Commons требуют указать автора: вставь текст из CREDITS.txt в описание ролика. Музыки в ролике нет - только звуки бумаги, свой трек добавь сам.

Шаг 5

Как открыть и поправить таймлайн в HyperFrames

Ролик - это не просто mp4, а живой проект. Зайди в папку ролика и открой его в HyperFrames Studio:

npx -y hyperframes@0.8.33 preview .

Из папки collage-<тема>

01
Прокрути ролик
В Studio двигай ползунок по таймлайну - каждая вырезка фото лежит отдельным слоем
02
Поправь кадр
Кликни на элемент прямо на холсте и поменяй его - положение, текст бирки, тайминг слоя
03
Экспортируй
Выгрузи новый mp4 прямо из Studio

Крупные правки тайминга и содержания сцен - в build.mjs. После правки пересобери и отрендери заново (SKILL_DIR - папка скилла, обычно ~/.claude/skills/collage; <длительность> - длина ролика в секундах):

node build.mjs && npx -y hyperframes@0.8.33 lint .
npx -y hyperframes@0.8.33 render . --quality high --crf 14 -o renders/video.mp4
node ~/.claude/skills/collage/tools/mix.mjs renders/video.mp4 renders/<тема>.mp4 <длительность>

Пересборка после правки build.mjs

Проще
Не хочешь лезть в код - попроси Claude в той же папке: «сделай вторую сцену длиннее на секунду и перерендери». Он сам поправит build.mjs и прогонит команды.

Финал

Проверь себя

  • Node 20+, ffmpeg и Chrome стоят и отвечают в терминале
  • Скилл лежит в ~/.claude/skills/collage, в tools выполнен npm install
  • На Mac собран lift командой swiftc
  • Команда /collage <тема> запустилась в пустой папке
  • В renders/ лежит готовый mp4 со звуками бумаги
  • Факты в FACTS.md проверены, авторы из CREDITS.txt добавлены в описание
  • Проект открылся в HyperFrames Studio через preview, хотя бы один кадр поправлен и экспортирован
Скачать материал