# Скилл для Claude Code: ролики-коллажи в стиле Vox Ставишь бесплатный скилл collage-skill в Claude Code, даёшь ему тему одной строкой - и получаешь ролик-нарезку в стиле Vox из настоящих архивных фото плюс проект, который можно поправить на таймлайне в HyperFrames. // Шаг 1 ## Ссылка на скилл Скилл называется [collage-skill](https://github.com/prakhar2603/collage-skill), автор - Prakhar. Бесплатный, код под MIT, без платных сервисов и API-ключей. Работает на [HyperFrames](https://github.com/heygen-com/hyperframes) (открытый движок, который превращает HTML в видео), ffmpeg и фотографиях с Wikimedia Commons. На выходе - чёрно-белые вырезки фото с красной обводкой-стикером, рваная бумага, старые карты, бирки с подписями, обводка маркером и дёрганое стоп-моушен движение. [Открыть collage-skill на GitHub](https://github.com/prakhar2603/collage-skill) [Документация HyperFrames](https://hyperframes.heygen.com/introduction) // Шаг 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_ Если хочешь руками - три команды в терминале: - 1 «Склонируй скилл в папку скиллов» — git clone https://github.com/prakhar2603/collage-skill ~/.claude/skills/collage - 2 «Поставь зависимости инструментов» — cd ~/.claude/skills/collage/tools && npm install - 3 «Только на Mac: собери вырезалку фото» — swiftc -O lift.swift -o lift - команда запускается в той же папке tools - 4 «Перезапусти 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 и дай тему. Пример из ролика - доставщики обедов в Мумбаи (даббавалы): ``` /collage Mumbai's dabbawalas ``` _Промпт в Claude Code_ - 1 «Тема» — Claude читает статью Википедии по теме, выбирает факты и раскладывает историю на 4-5 сцен. - 2 «Архивные фото» — Сам ищет свободные фотографии на Wikimedia Commons, скачивает и вырезает из них людей и предметы. - 3 «Сборка» — метрика «~15 минут на свежем Mac» — Собирает сцены в HyperFrames, добавляет звуки бумаги и рендерит ролик. - 4 «Готовый ролик» — метрика «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-<тема>_ - 1 «Прокрути ролик» — В Studio двигай ползунок по таймлайну - каждая вырезка фото лежит отдельным слоем. - 2 «Поправь кадр» — Кликни на элемент прямо на холсте и поменяй его - положение, текст бирки, тайминг слоя. - 3 «Экспортируй» — Выгрузи новый 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, хотя бы один кадр поправлен и экспортирован --- Источник: https://localhost:3000/m/skill-dlya-claude-code-roliki-kollazhi-v-stile-vox