Использование Claude Code и Remotion для создания демонстрационных видео без навыков дизайна

Преодоление узкого места с демонстрационными видео
У разработчика был готовый к запуску рабочий продукт, но он столкнулся с распространённой проблемой: отсутствие демонстрационных видео, иллюстраций или моушн-графики. Обратившись к моушн-дизайнерам, он получил расценки в 300–1000 долларов за видео со сроками 6–10 недель и запросы на файлы Figma и бренд-гайды, которых не существовало. Это привело к месяцам промедления.
Техническое решение
За один уикенд разработчик реализовал совершенно другой подход:
- Remotion: Фреймворк для генерации видео на основе React, где «видео как код» означает отсутствие перемотки временной шкалы или меню экспорта — только JSX и математика.
- Claude Code: Использовался для написания и итерации компонентов видео, с конкретными навыками для переходов Remotion и фронтенд-дизайна.
- Claude Skills: В частности
remotion-transitionsдля смены сцен иfrontend-designдля иллюстраций.
Рабочий процесс и результаты
Разработчик следовал этому процессу:
- Иллюстрации функций: Claude Code использовал навык иллюстрации для генерации визуализаций продукта на основе SVG непосредственно в компонентах целевой страницы, сократив то, что заняло бы у дизайнера дни, до нескольких часов.
- Перестройка целевой страницы: Преобразовал скриншоты-заглушки в реальные анимированные разделы интерфейса с брендингом, используя тот же рабочий процесс.
- Создание рилов: Каждый рил в Remotion — это React-компонент. Claude Code создаёт каркас сцены, разработчик настраивает время и текст, затем экспортирует. Первый рил занял ~3 часа, второй ~90 минут, а теперь они занимают меньше часа на рил.
Результаты были мгновенными: тысячи просмотров рилов и личные сообщения с вопросами, запущен ли продукт. Разработчик отмечает, что он не дизайнер и не видеомонтажёр и почти не знал, что такое Remotion месяц назад, но инструменты позволили ему изучить свою кодовую базу, понять визуальный язык своего продукта и генерировать компоненты видео сцена за сценой с мгновенным предпросмотром.
Общая стоимость производства: 0 долларов (помимо подписки на Claude Code). Разработчик подчёркивает, что он не против моушн-дизайнеров, но не может достичь такой скорости итераций с рабочим процессом агентства.
📖 Read the full source: r/ClaudeAI
👀 Смотрите также

Агенты кода Claude ведут переговоры по API-контрактам без использования оркестрационного фреймворка
Два агента Claude Code провели переговоры по API-контрактам напрямую, используя только два инструмента обмена сообщениями и системные промпты, согласовав формы конечных точек, форматы ответов и заголовки CORS перед написанием кода. Реализация моста составляет около 190 строк TypeScript с WebSocket-брокером и каналами MCP.

Пользователь OpenClaw автоматизирует кросс-платформенное форматирование контента с помощью пользовательского навыка.
Разработчик создал навык OpenClaw, который автоматически форматирует черновые тексты для нескольких платформ, устраняя необходимость ручной корректировки разметки под требования каждого сайта.

Использование Opus 4.6 и GPT 5.4 для рецензирования дизайна стека памяти для OpenClaw.
Разработчик использовал Claude Opus 4.6 для проектирования трехслойного стека памяти для OpenClaw, а затем поручил GPT 5.4 провести экспертный обзор проекта. Стек включает Lossless Claw для сохранения сообщений, гибридный поиск SQLite для сопоставления ключевых слов и Mem0 Cloud для сохранения данных между сессиями.

Открытая клешня + Гермес: преимущества многогентного рабочего процесса с отдельным оркестратором и исполнителем
После трехнедельного теста один пользователь обнаружил, что совместная работа Open-Claw (оркестратор) и Hermes (специалист по выполнению) превосходит по производительности каждого из агентов по отдельности, улучшая пропускную способность и надежность за счет параллельной обработки задач и взаимной диагностики.