Как я создал профессиональное моушн-дизайн видео с Claude Code + Remotion (Без монтажа)

AAndy Lo
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology

Transcript

00:00:00Посмотрите на это поясняющее видео, которое мы создали.
00:00:02Марс, красная планета — мир, который веками пленил человечество.
00:00:08Это четвертая планета от Солнца, расположенная в нашей солнечной системе сразу за Землей.
00:00:14Это видео не монтировалось в After Effects.
00:00:16Мы не трогали ключевые кадры и ничего не анимировали вручную.
00:00:21Claude, используя новый навык Remotion Agent, сам всё собрал и отрендерил для нас.
00:00:26Движение, тайминг, вообще всё сделано просто с помощью промптов.
00:00:30Но сначала — о навыках Claude.
00:00:33Если вы следите за ИИ в последнее время, то знаете, что навыки Claude сейчас — самая горячая тема.
00:00:38Все о них говорят, но вот что они представляют собой на самом деле.
00:00:43Это инструкции, которые учат Claude мастерски владеть конкретными инструментами и рабочими процессами.
00:00:49Это специализированные пакеты знаний, превращающие Claude из обычного помощника
00:00:54в эксперта в таких областях, как видеопроизводство, анализ данных или автоматизация.
00:01:00А когда вы объединяете навыки с Claude Code и инструментом программирования Anthropic,
00:01:05вы открываете нечто по-настоящему мощное.
00:01:07А теперь — Remotion.
00:01:09Это фреймворк, позволяющий создавать видео с помощью кода React —
00:01:13той же технологии, на которой работают современные веб-сайты.
00:01:15Но есть одна проблема.
00:01:16Remotion невероятно мощен, но при этом сложен.
00:01:20Нужно понимать React, библиотеки анимации, функции тайминга и рендеринг видео.
00:01:26Это инструмент для разработчиков, который был недоступен большинству людей.
00:01:30Вот почему навык Remotion Agent меняет правила игры.
00:01:33Он дает Claude глубокие знания обо всем фреймворке Remotion:
00:01:37как структурировать композиции, выстраивать хореографию анимации,
00:01:41управлять таймингом, работать с ассетами — абсолютно всё.
00:01:45Теперь Claude не гадает, как писать код для видео, а понимает фреймворк
00:01:50как экспертный разработчик Remotion.
00:01:53Это та же среда, которую разработчики уже используют для автогенерации видео.
00:01:58И к концу этого ролика
00:02:00вы сможете создавать профессиональную моушн-графику одними лишь промптами.
00:02:04Итак, приступим.
00:02:05Для начала нам нужно установить навык Remotion для Claude.
00:02:08Для этого мы введем вот эту команду.
00:02:11Эту команду можно найти на сайте Remotion.
00:02:14Выберем все модели из списка, нажав пробел, а затем Enter.
00:02:19Когда навык Claude будет установлен в проект,
00:02:22мы откроем терминал Claude Code и попросим его начать новый проект Remotion.
00:02:28Подождем, пока завершится настройка.
00:02:30Итак, настройка проекта и шаблона завершена.
00:02:38Просто следуйте этим указаниям, чтобы запустить Remotion Studio.
00:02:42Давайте посмотрим, как это выглядит. Отлично.
00:02:45Вот так выглядит интерфейс Remotion.
00:02:46Это похоже на приложение для видеомонтажа, но здесь вы программируете каждую сцену.
00:02:51Теперь, когда проект установлен и вы знаете, как выглядит Remotion,
00:02:56перейдем непосредственно к разработке.
00:02:59Наш процесс разработки состоит из девяти этапов.
00:03:02Этапы с 1 по 3 сформируют системы, в которых будет работать Claude.
00:03:07На этапах с 4 по 7 создаются ассеты и определяются компоненты.
00:03:13А этапы 8 и 9 — это сама реализация.
00:03:16Сказав это, давайте продолжим.
00:03:19Начнем, конечно же, с этапа 1.
00:03:21Раз мы уже всё установили,
00:03:25откроем руководство по сборке, которое мы составили специально для этого видео.
00:03:29Хотя это руководство предназначено для создания именно этого ролика,
00:03:35вы сможете адаптировать его и использовать для создания любых других видео,
00:03:39как только поймете принцип работы этих промптов.
00:03:42Если вам нужна копия этого промпта,
00:03:44загляните в наше бесплатное сообщество, куда мы выкладываем подобные гайды.
00:03:48Чтобы вы тоже могли строить с помощью ИИ.
00:03:51Копируем промпт для первого этапа и вставляем его в Claude Code.
00:03:56Затем нажимаем Enter.
00:03:57Этот промпт закладывает технический фундамент,
00:04:02которому Claude должен следовать на протяжении всей разработки.
00:04:06Представьте это как правила и паттерны, которых он должен придерживаться.
00:04:09Это очень важно, потому что большинство проектов проваливаются
00:04:13не из-за отсутствия визуального видения у авторов,
00:04:16а потому, что ИИ не дали четких правил, и он начинает творить что попало.
00:04:23Когда этап 1 завершится, это будет выглядеть вот так.
00:04:27Будет создан Markdown-файл разработки.
00:04:31Claude закончил закладывать фундамент.
00:04:34Теперь можно переходить к следующему шагу — этапу 2.
00:04:37Сейчас мы установим художественное направление и визуальную систему видео.
00:04:42Это критически важный шаг в рабочем процессе.
00:04:46До этого момента мы настраивали среду и убеждались, что Claude понимает Remotion.
00:04:52Здесь же мы учим Claude мыслить визуально еще до написания реального кода.
00:05:00Снова откройте руководство по сборке.
00:05:03Найдите раздел, помеченный как этап 2.
00:05:05Просто скопируйте весь промпт в точности, как он есть.
00:05:10И возвращайтесь в терминал Claude Code.
00:05:15Вставьте промпт и нажмите Enter.
00:05:17Дайте Claude немного времени.
00:05:21Я хочу сделать паузу и объяснить, почему этот промпт так важен.
00:05:25Потому что многие либо пропускают этот шаг, либо пытаются всё слишком контролировать.
00:05:30Этот промпт не просит Claude сразу собрать всё видео.
00:05:35Он внедряет системное мышление.
00:05:39Мы определяем законы мира, в котором Claude будет строить.
00:05:43Считайте это творческим руководством, а не просто набором инструкций.
00:05:46Мы задаем общий тон, визуальные ограничения,
00:05:52динамику движений и принципы принятия дизайн-решений там, где они не прописаны явно.
00:06:00Это важно, ведь мы никогда не сможем описать каждый пиксель видео, верно?
00:06:07Это было бы просто невозможно.
00:06:08Но при этом мы не хотим, чтобы Claude гадал наугад или создавал элементы, не подходящие нашему стилю.
00:06:15Этот промпт обеспечивает контроль без микроменеджмента.
00:06:19Он дает Claude рамки для работы.
00:06:22Вместо того чтобы гадать, что значит "чисто" или "современно", у него теперь есть общее с нами определение.
00:06:29Вместо галлюцинаций у него теперь есть и технические навыки,
00:06:33и творческие ориентиры для правильной работы.
00:06:36Нажимаем Enter и ждем, пока Claude всё обработает.
00:06:39Итак, Claude закончил и создал файл арт-дирекшена,
00:06:44где описано, как он должен рассуждать и принимать будущие решения.
00:06:48Когда перейдем к разработке, не бойтесь возвращаться к этому этапу и вносить правки,
00:06:55вам ведь нужно, чтобы проект выглядел именно так, как вы задумали.
00:06:58Возможно, придется попросить Claude что-то изменить или добавить.
00:07:02И вот так мы открыли следующий этап рабочего процесса.
00:07:07Теперь у вас с ИИ есть общий визуальный язык.
00:07:12Claude уже знает, как подходить к видео, прежде чем создана хоть одна композиция.
00:07:18И это огромный плюс.
00:07:19На данный момент мы успешно установили арт-дирекшен и визуальный контроль.
00:07:24Видео еще не собрано,
00:07:26но фундамент заложен, что делает сборку предсказуемой и профессиональной.
00:07:31Теперь, когда стиль зафиксирован, нужно проработать историю видео.
00:07:37Этот шаг завершает формирование системы.
00:07:40Мы переходим от того, как видео должно ощущаться, к тому, что в нем происходит секунда за секундой.
00:07:47Цель здесь проста:
00:07:49определить сцены, их последовательность и тайминг,
00:07:52чтобы видео имело смысл еще до начала анимации.
00:07:56Возвращаемся к руководству и находим промпт для этапа 3.
00:08:02Копируем его полностью.
00:08:03Затем снова идем в Claude Code.
00:08:08Вставляем промпт и жмем Enter.
00:08:10Ждем, пока Claude обработает запрос.
00:08:13Claude берет заданный ранее стиль и на его основе создает таймлайн.
00:08:18Он решает, сколько нужно сцен, за что отвечает каждая из них
00:08:23и как долго каждый момент должен оставаться на экране.
00:08:27Именно это позволяет нам создать 10-секундный или 60-секундный ролик,
00:08:32который выглядит продуманным, а не поспешным или хаотичным.
00:08:36Когда Claude закончит, вы увидите разбивку видео на сцены.
00:08:40У каждой сцены — четкая роль.
00:08:43Обычно это вступление-крючок, основной блок, дополняющие моменты и финал, верно?
00:08:52По сути, это раскадровка, только текстом.
00:08:56Да, это как раскадровка, описанная словами вместо картинок.
00:09:02На этом этапе вы можете попросить Claude что-то подправить.
00:09:05Если сцена не вписывается в вашу задумку — просто скажите об этом.
00:09:10Если хотите поменять разделы местами или вовсе удалить один — сейчас самое время.
00:09:15Здесь многие совершают ошибку, считая,
00:09:17что нужно соглашаться на самый первый вариант.
00:09:20На самом деле нет.
00:09:21Относитесь к этому как к совместному черновику.
00:09:25Вот и всё.
00:09:27В данном случае структура выглядит надежной.
00:09:30Темп выдержан, сцены логично сменяют друг друга и соответствуют нужной длительности.
00:09:37Поэтому вместо дальнейших правок мы даем Claude сигнал к действию.
00:09:41Просто скажите Claude продолжать
00:09:45и создать файл раскадровки на основе этой структуры.
00:09:48После этого Claude создаст отдельный файл,
00:09:52который представляет собой полный таймлайн видео.
00:09:55Этот файл станет единственным источником истины для того, что мы собираемся строить.
00:10:00И вот история видео зафиксирована.
00:10:04Мы знаем, что происходит, когда и почему.
00:10:08Анимации еще нет, но самые сложные творческие решения уже приняты.
00:10:13Теперь, когда раскадровка готова, переходим к этапу 4 —
00:10:18составлению инвентарного списка ассетов.
00:10:20Этот шаг может показаться необязательным,
00:10:24но на самом деле он критически важен для получения чистого и стабильного результата.
00:10:28Цель проста: определить, какие ассеты нам нужны
00:10:33и как они должны выглядеть, прежде чем мы попытаемся их анимировать или где-то разместить.
00:10:38Этот шаг важен, так как он разделяет дизайн-решения и логику сцен.
00:10:44Именно это разделение убережет нас от ошибок в будущем.
00:10:48И вот почему это важно.
00:10:50Если просить Claude одновременно и спроектировать ассет, и решить, как он выглядит,
00:10:54и придумать, где он должен быть в сцене —
00:10:59вы взваливаете на один шаг слишком много решений, и система дает сбой.
00:11:04Результат получается непоследовательным и плохим.
00:11:07Снова идем в руководство и копируем промпт для этапа 4.
00:11:11Вставляем его в терминал Claude и нажимаем Enter.
00:11:17Ждем обработки.
00:11:19Пока он работает, объясню, что происходит "под капотом".
00:11:24Он пока не создает графику.
00:11:25Он задает параметры дизайна для каждого необходимого ассета:
00:11:29объекты, использование цветов и так далее.
00:11:33Частая ошибка здесь — пропустить этот этап и позволить каждой сцене самой придумывать себе ассеты.
00:11:39Так и получаются видео, где сцены выглядят безжизненно и не сочетаются друг с другом.
00:11:45Когда Claude закончит, он создаст четко структурированный файл инвентаризации ассетов.
00:11:53У каждого ассета будет имя и заданные параметры.
00:11:57На этом этапе вряд ли придется что-то менять, если только что-то не забыто или лишнее.
00:12:04Если нужно что-то добавить или изменить — просто попросите Claude.
00:12:10И вуаля: у нас есть полный список ассетов и дизайн-система для них.
00:12:17Это значит, что когда Claude начнет генерировать компоненты Remotion,
00:12:22он не будет гадать, как они должны выглядеть.
00:12:25Он возьмет данные напрямую из этого списка.
00:12:28Теперь, когда спецификации готовы, переходим к этапу 5 —
00:12:33непосредственной генерации самих ассетов.
00:12:36Сейчас мы создадим реальные элементы, которые будут использоваться во всем видео.
00:12:42До этого момента мы намеренно разделяли задачи.
00:12:48Сначала система, потом стиль, раскадровка и спецификации ассетов.
00:12:56Теперь этот шаг превращает описания в реальные ассеты, не смешивая зоны ответственности.
00:13:04Это дает Claude Code очень четкие инструкции и контекст для разработки.
00:13:10Именно поэтому метод работает так надежно.
00:13:13Давайте пройдемся по шагам.
00:13:15Берем промпт для этапа 5 из руководства и вставляем его в терминал Claude.
00:13:20Но прежде чем нажать Enter, один важный момент.
00:13:23Если проект крупный и ассетов очень много в разных категориях,
00:13:29лучше генерировать их пачками по категориям.
00:13:33То есть добавить в промпт условие, чтобы Claude
00:13:37создавал одну категорию ассетов за раз.
00:13:40Это снижает вероятность "галлюцинаций" и того, что
00:13:45Claude нарушит стилистику в разных типах элементов.
00:13:49В нашем случае ассетов не так много.
00:13:53Поэтому мы сгенерируем всё за один проход.
00:13:57Просто знайте, что по мере роста ваших проектов пакетная генерация становится золотым стандартом.
00:14:03Обычно этот этап занимает некоторое время, так что наберитесь терпения.
00:14:08Как только процесс завершится, быстро просмотрите результат и проверьте наличие всех нужных ассетов.
00:14:15Как правило, вы найдете всё необходимое в папке SRC.
00:14:20И вот так у нас появился полный набор готовых к использованию ассетов.
00:14:25Теперь это не просто абстрактные идеи.
00:14:28Это реальные строительные блоки, которые будут повторно использоваться в разных сценах,
00:14:32что и обеспечит нашему видео ту самую визуальную целостность.
00:14:36Когда все ассеты готовы, следующий шаг — вдохнуть в них движение.
00:14:41Это шестая фаза, и наша цель здесь — определить поведение каждого ассета.
00:14:47Это еще не финальные сцены, а лишь базовые элементы движения для повсеместного использования.
00:14:53Их можно называть «примитивами движения».
00:14:56По сути, мы создаем единый язык анимации для всего видеоряда.
00:15:01Итак, возьмите промпт для шестой фазы из руководства и вставьте его в терминал Claude.
00:15:07А теперь важный момент касательно подхода.
00:15:10Нам не нужно здесь излишне углубляться в технические детали.
00:15:13Мы не прописываем каждый ключевой кадр и не описываем каждую анимацию в подробностях.
00:15:18И мы можем себе это позволить благодаря проделанной ранее работе.
00:15:23Ведь на первых этапах проекта мы уже задали логику мышления для Claude.
00:15:28Мы определили правила разработки, визуальные принципы, сторителлинг
00:15:33и дизайнерские ограничения с помощью всех тех Markdown-файлов.
00:15:37Это дает Claude четкое понимание стиля, темпа и тональности, к которым мы стремимся.
00:15:44Так что на данном этапе мы можем доверить нейросети общую оценку проекта
00:15:48и предложение логичных паттернов движения.
00:15:50После того как промпт вставлен, смело нажимайте Enter.
00:15:55Claude начнет анализировать ассеты и генерировать примитивы движения.
00:15:58Распространенная ошибка здесь — попытка чрезмерного контроля.
00:16:02Если вы начнете микроменеджить анимацию на этом шаге,
00:16:05то рискуете заложить в систему движения специфику конкретных сцен.
00:16:10А это усложнит их повторное использование в дальнейшем.
00:16:13Вместо этого мы стремимся к гибким, универсальным
00:16:17паттернам движения, которые будут смотреться гармонично во всем видео.
00:16:21Разумеется, это не значит, что Claude сразу сделает всё идеально.
00:16:25И это нормально.
00:16:26Наша задача не в том, чтобы получить безупречную анимацию с первого прохода.
00:16:31Наша цель — создать прочный фундамент.
00:16:34Мы обязательно вернемся к полировке отдельных моментов позже, когда увидим готовые сцены.
00:16:39Спустя некоторое время Claude завершает работу.
00:16:42И вот у нас готов набор примитивов движения для нашего проекта.
00:16:47Они универсальны, последовательны и полностью соответствуют визуальной
00:16:52и повествовательной системе, которую мы заложили ранее.
00:16:54Это важная веха.
00:16:57Теперь у нас есть и объекты, и их движение.
00:17:00Мы совсем близки к тому, чтобы превратить всё это в полноценное видео.
00:17:04Теперь переходим к фазам 7 и 8.
00:17:06На этих этапах мы, по сути, склеиваем всё воедино.
00:17:09Некоторые задачи, которые этот промпт поставит перед Claude,
00:17:12вероятно, уже были учтены на ранних стадиях.
00:17:17Тем не менее, важно выполнить их для создания необходимых компонентов
00:17:22и чтобы убедиться в отсутствии пробелов.
00:17:25Просто запустите их в терминале Claude Code,
00:17:28попросив Claude пропустить то, что уже было сделано.
00:17:31Итак, когда всё готово,
00:17:34мы наконец получаем «зеленый свет» на создание сцен и сборку видео.
00:17:40Это девятая фаза.
00:17:42Честно говоря, это самая простая часть всего рабочего процесса,
00:17:46потому что вся сложная интеллектуальная работа уже проделана за нас.
00:17:50Так что продолжаем в том же духе.
00:17:51На данный момент Claude уже не гадает.
00:17:54Нейросеть действует внутри системы, которую мы тщательно подготовили.
00:17:57Наша цель предельно проста.
00:17:59Сгенерировать код для каждой сцены.
00:18:02Посмотреть, как это выглядит.
00:18:05И затем собрать всё в одно отполированное финальное видео.
00:18:10Сначала скопируйте промпт девятой фазы из руководства,
00:18:13вставьте его в терминал Claude и нажмите Enter.
00:18:17Этот промпт дает Claude команду
00:18:21начать сборку реальных динамических сцен,
00:18:23используя всё, что мы создали до этого.
00:18:26Художественное направление, раскадровка, ассеты
00:18:29и примитивы движения — всё это сходится в одной точке.
00:18:32В идеале, особенно для крупных проектов,
00:18:35лучше генерировать сцены по одной.
00:18:38Именно поэтому мы составили промпт таким образом.
00:18:41Даже если ваше видео длится всего полторы минуты,
00:18:45освоение этой практики на ранних этапах избавит вас от многих проблем в будущем.
00:18:49Когда сцены создаются по отдельности,
00:18:52их гораздо проще отлаживать, дорабатывать
00:18:55и вносить точечные изменения, не ломая всё видео целиком.
00:18:59Как только первая сцена готова, мы переходим к генерации остальных.
00:19:04А по завершении мы захотим увидеть результат своих трудов.
00:19:08Вы можете попросить Claude запустить Remotion Studio,
00:19:10и нейросеть выдаст вам URL-адрес.
00:19:12Или же просто введите `npm start` в терминале.
00:19:16Теперь мы в Remotion Studio, давайте нажмем Play.
00:19:21Сразу видно, что художественное направление
00:19:24и визуальный стиль выдержаны в каждой сцене.
00:19:28И это отличный знак.
00:19:29Если видео кажется немного «плоским», это вполне ожидаемо.
00:19:34На данный момент мы только создали сцены, но еще
00:19:38не собрали видео полностью и не отшлифовали переходы.
00:19:42Поэтому мы возвращаемся в Claude Code,
00:19:45описываем замеченные недочеты и говорим Claude, что именно нужно улучшить.
00:19:50Например, уточняем параметры движения в сценах.
00:19:56Конкретный промпт, который мы здесь используем, не так важен.
00:19:58Результат в каждом разделе может отличаться — ваш от моего.
00:20:04Точный текст промпта здесь вторичен.
00:20:07Ваш результат на выходе может не совпадать с моим.
00:20:10И это тоже хорошо, потому что именно здесь вы начинаете
00:20:14оттачивать навык полировки и отладки собственной работы.
00:20:17Вы больше не просто следуете инструкциям.
00:20:20Вы принимаете окончательные творческие решения.
00:20:22Закончив с этим, проверяем видео снова.
00:20:25И вот теперь всё ощущается гораздо четче.
00:20:28Движения стали чище, переходы — плавнее,
00:20:31и видео наконец-то выглядит продуманным, а не механическим.
00:20:35Но мы на этом не останавливаемся.
00:20:37Финальный штрих — озвучка и фоновая музыка.
00:20:41Для этого мы воспользуемся SDK от ElevenLabs.
00:20:44Сделаем эту часть быстро.
00:20:46Просто зайдите в документацию ElevenLabs.
00:20:49Возьмите подходящую команду для вашей конфигурации.
00:20:52Поскольку мы работаем на Node.js, выберем соответствующий вариант.
00:20:56Затем попросите Claude выполнить команду и настроить интеграцию ElevenLabs для голоса и музыки.
00:21:03Claude создаст файл .env, куда вы сможете вставить свой API-ключ ElevenLabs.
00:21:09После этого можно попросить Claude написать сценарий для закадрового голоса,
00:21:13который будет соответствовать созданному вами видеоряду.
00:21:16Когда всё будет подключено и готово, давайте оценим результат.
00:21:20«Марс, красная планета — мир, который веками пленил человечество».
00:21:27«Это четвертая планета от Солнца, расположенная сразу за Землей в нашей системе».
00:21:31«В ближайшей точке Марс находится в 225 миллионах километров от Земли».
00:21:37«Для космического корабля это путешествие длиной в семь месяцев».
00:21:41«Запаситесь терпением».
00:21:42«Марс примерно вдвое меньше Земли — мир поменьше, но не менее захватывающий».
00:21:48«Сутки на Марсе длятся почти столько же, сколько на Земле: 24 часа 37 минут».
00:21:54«Но год? Он длится 687 земных суток — почти два наших года».
00:22:01«Атмосфера здесь тонкая, как бумага — всего 1% от земной».
00:22:05«Вам определенно понадобится скафандр».
00:22:07«Почему он такой красный?»
00:22:09«Оксид железа, или ржавчина, покрывает поверхность, придавая Марсу его фирменный цвет».
00:22:15«На Марсе находится Олимп — самый большой вулкан в Солнечной системе»,
00:22:19«который в три раза выше Эвереста».
00:22:21«Там есть вода: замороженная на полюсах и, возможно, скрытая под землей»,
00:22:27«что является ключом к будущим исследованиям».
00:22:29«Мы уже отправили пять роверов: Соджорнер, Спирит, Оппортьюнити, Кьюриосити и Персевиранс».
00:22:37«Однажды люди ступят на поверхность Марса»,
00:22:40«построят жилища, водрузят флаги и назовут его своим вторым домом».
00:22:45«Марс ждет!»
00:22:46Вот так теперь выглядит наш поясняющий ролик про Марс.
00:22:51Полностью готовое, отполированное, чистое и профессиональное видео.
00:22:56Созданное на основе системы, а не догадок.
00:22:59Повествование увлекает, картинка радует глаз, а каждый переход...
00:23:05...а каждый переход воспроизводится максимально плавно.
00:23:12Итак, давайте на секунду отстранимся и посмотрим, что мы только что сделали.
00:23:16Мы прошли путь от пустой папки до полностью отрендеренного профессионального видео.
00:23:22Без After Effects, без таймлайна и без ручной расстановки ключей.
00:23:26Мы использовали Claude Code, Remotion и Agent Skills как единую систему.
00:23:32Мы режиссировали результат, а не собирали каждую деталь вручную.
00:23:38Это реальный продукт, который можно публиковать, внедрять и использовать в работе уже сегодня.
00:23:44И в этом заключается главный вывод.
00:23:47Сила не только в том, что ИИ работает быстрее, а в том, как эти инструменты взаимодействуют.
00:23:52Когда Claude Code понимает Remotion, а Skills вовремя подгружают нужные знания,
00:23:59вы перестаете быть одиночкой и начинаете работать как целая команда.
00:24:05Это и есть переход от простого «использования ИИ» к «созиданию с помощью ИИ».
00:24:09С этого момента вы не просто делаете видео — вы создаете визуальные системы.
00:24:14Вы можете менять атмосферу, обновлять данные, генерировать новые версии и запускать их, никого не дожидаясь.
00:24:21Это не заменяет креативность, а, наоборот, усиливает ее.
00:24:26Освоив этот процесс, вы сможете применять его для демо-роликов продуктов,
00:24:30соцсетей, клиентских проектов или любых других задач.
00:24:34Если вы хотите погрузиться в тему глубже, именно этим мы и занимаемся в сообществе AnyNoCode.
00:24:40Мы разбираем подобные рабочие процессы, учим зарабатывать с помощью ИИ,
00:24:46и вы будете учиться вместе с профессиональными основателями и разработчиками.
00:24:50Кроме того, там доступен наш курс по ИИ-дизайну сайтов, который ускорит ваше обучение.
00:24:54Если вам понравилось это видео, ставьте лайк и подписывайтесь,
00:24:58чтобы не пропустить новые туториалы.
00:25:01Увидимся в следующем выпуске!

Key Takeaway

Видео демонстрирует революционный подход к видеопроизводству, где связка Claude Code и Remotion позволяет создавать профессиональную моушн-графику исключительно с помощью текстовых инструкций, минуя традиционные этапы ручного монтажа.

Highlights

Использование Claude Code и навыка Remotion Agent для полной автоматизации создания моушн-дизайна через промпты.

Концепция «навыков» (Skills) Claude как специализированных пакетов знаний для экспертного владения конкретными инструментами.

Методология разработки из 9 этапов, разделяющая системное мышление, визуальный стиль и непосредственную реализацию кода.

Важность создания «примитивов движения» и инвентаризации ассетов для обеспечения визуальной целостности видео.

Интеграция с ElevenLabs SDK для автоматической генерации закадрового голоса и звукового сопровождения прямо в проекте.

Переход от ручного манипулирования ключевыми кадрами к режиссированию визуальных систем с помощью ИИ.

Timeline

Введение в экосистему Claude и Remotion

Автор представляет впечатляющий ролик о Марсе, полностью созданный без использования After Effects или ручной анимации ключевых кадров. Основное внимание уделяется новым «навыкам» Claude, которые превращают ИИ из общего помощника в узкоспециализированного эксперта по Remotion. Remotion описывается как мощный фреймворк для создания видео с помощью React-кода, который ранее был сложен для освоения обычными пользователями. Благодаря Remotion Agent, Claude теперь понимает структуру композиций и хореографию анимации на уровне опытного разработчика. Это вступление задает контекст того, как синергия ИИ и программного кода открывает доступ к профессиональному видеопроизводству для широкого круга людей.

Настройка среды и технический фундамент

На этом этапе демонстрируется процесс установки навыка Remotion в проект Claude с помощью специальных команд терминала. Автор подчеркивает важность Первого этапа разработки — закладывания технического фундамента через специализированный промпт. Этот промпт создает Markdown-файл, который служит набором правил и паттернов, предотвращающих хаотичную работу ИИ в будущем. Большинство ИИ-проектов терпят неудачу именно из-за отсутствия четких рамок, поэтому данный шаг критически важен для стабильности. В результате формируется структурированная среда, готовая к осмысленному проектированию визуального контента.

Арт-дирекшен и визуальное планирование

Второй этап посвящен установке художественного направления и визуальной системы видеоряда. Вместо того чтобы сразу просить код, автор внедряет в Claude «системное мышление», определяя законы дизайна, динамику движений и визуальные ограничения. Этот подход позволяет избежать микроменеджмента, так как у ИИ появляется общее с автором определение таких понятий, как «чистота» или «современность» стиля. Созданный файл арт-дирекшена становится творческим руководством для всех последующих графических элементов. Это гарантирует, что каждый пиксель видео будет соответствовать задуманной эстетике без необходимости описывать каждую мелочь вручную.

Сторителлинг и создание раскадровки

Третий этап переводит фокус с визуального стиля на структуру повествования и тайминг каждой сцены. Автор использует промпт для определения последовательности блоков: от вступления-крючка до финального призыва к действию. Claude анализирует заданный стиль и создает текстовую раскадровку, которая служит единственным источником истины для будущего хронометража. На этом шаге пользователь может активно вносить правки, меняя сцены местами или корректируя их длительность, пока структура не станет идеальной. В итоге получается четкий план, гарантирующий, что видео будет выглядеть продуманным и логичным, а не хаотичным набором кадров.

Инвентаризация и генерация графических ассетов

Этапы 4 и 5 посвящены созданию «строительных блоков» видео — графических ассетов и их спецификаций. Автор разделяет проектирование внешнего вида ассетов и логику их анимации, чтобы не перегружать ИИ слишком большим количеством одновременных решений. Сначала создается детальный список инвентаря с параметрами цветов и форм, а затем Claude генерирует реальные компоненты в папке проекта. Для крупных проектов рекомендуется «пакетная генерация» по категориям, что значительно снижает вероятность стилистических ошибок или «галлюцинаций» нейросети. В результате у разработчика появляется полный набор готовых к использованию элементов, обеспечивающих визуальную целостность всего ролика.

Создание примитивов движения и анимация

Шестая фаза вдыхает жизнь в статичные ассеты через определение универсальных «примитивов движения». Автор объясняет, что не нужно прописывать каждый ключевой кадр, так как Claude уже понимает общую стилистику из предыдущих Markdown-файлов. Цель состоит в создании гибких паттернов анимации, которые будут гармонично смотреться в любой сцене видеоряда. Важно избегать чрезмерного контроля на этом этапе, позволяя системе выработать единый язык движений для всего проекта. Хотя результат может потребовать полировки, этот шаг закладывает прочный фундамент для финальной сборки динамического контента.

Финальная сборка, отладка и озвучка

На заключительных этапах происходит магическое объединение всех систем в финальный видеопродукт. Автор запускает Remotion Studio для предварительного просмотра и использует итеративный процесс отладки, прося Claude исправить замеченные «плоские» моменты или резкие переходы. Особое внимание уделяется интеграции с ElevenLabs для создания профессиональной озвучки и музыки, что делает видео полностью автономным продуктом. Демонстрируется итоговый ролик о Марсе, который выглядит как работа целой студии дизайна, хотя был создан одним человеком с помощью промптов. Это доказывает эффективность методики, где сложные творческие решения принимаются на этапе проектирования системы, а не ручного труда.

Заключение: Созидание с помощью систем ИИ

В финале автор подводит итог проделанной работе, подчеркивая переход от простого использования ИИ к проектированию визуальных систем. Главная ценность заключается не в скорости генерации, а в том, как инструменты (Claude Code, Remotion, ElevenLabs) бесшовно взаимодействуют друг с другом. Такой подход позволяет пользователю выступать в роли режиссера и архитектора, делегируя техническую реализацию искусственному интеллекту. Автор призывает зрителей внедрять эти методы в свои проекты, от демо-роликов до клиентских заказов, и приглашает в сообщество AnyNoCode для глубокого обучения. Видео заканчивается вдохновляющим посылом о том, что технологии теперь усиливают креативность, а не заменяют её.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video