83.3K+Скачать
Перейти к руководству
remotionавтор Google Labs

Remotion Skill.

Навык для Claude Code и Codex в области моушн-дизайна и видео: создаёт видео-презентации из проектов Stitch с переходами и зумами на Remotion.

  • Анимация и видео
  • Video
Скачать OpenDesignИнструкция по использованию
google-labs-code/stitch-skills · plugins/stitch-build/skills/remotion/SKILL.mdSKILL.md
--- name: remotion description: Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays --- ## Prerequisites ## Retrieval and Networking ## Video Composition Strategy ## Execution Steps ## Advanced Features ## File Structure
Метаданные и заголовки разделов прочитаны из исходного файла 14 сентября 2026 г. · 12 764 символа полностью

01 Что делает

Что делает skill remotion в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Превращает существующий проект Stitch в видео-обзор. Агент получает список проектов и экранов Stitch, скачивает screenshot.downloadUrl каждого экрана в assets/screens/, записывает ширину, высоту, заголовок и описание в манифест screens.json, затем строит композицию Remotion на основе ScreenSlide.tsx и WalkthroughComposition.tsx с переходами fade, slide и zoom на пружинной анимации, а также текстовыми накладками.

Он предназначен для дизайнеров и разработчиков, у которых уже есть спроектированные экраны в Stitch и которые уверенно работают с Node.js и React, поскольку Remotion рендерит React-компоненты. Кадры по умолчанию — 30 fps, экраны — 3-5 секунд, а результат предварительно просматривается в Remotion Studio перед рендерингом в MP4.

Что он выдаёт

  • Манифест screens.json, содержащий название проекта, идентификаторы экранов, заголовки, описания, пути к изображениям, размеры и длительность для каждого экрана
  • Файлы компонентов Remotion, сгенерированные для видео-обзора
  • Обновлённая конфигурация проекта Remotion
Смотрите пример запроса ↗

Как это работает

  1. 01
    Найдите MCP-серверы

    Запустите list_tools и определите префиксы серверов Stitch и Remotion, чтобы последующие вызовы адресовались правильно.

  2. 02
    Получите экраны из Stitch

    Найдите проект, получите список его экранов, затем запросите метаданные каждого экрана, чтобы получить URL скриншота, размеры и описание.

  3. 03
    Подготовьте скриншоты

    Скачайте каждый скриншот с помощью web_fetch или curl в промежуточную директорию, в том порядке, в котором должен идти видео-обзор.

  4. 04
    Создайте проект Remotion

    Если уже есть проект Remotion, используйте его; в противном случае создайте пустой TypeScript-проект в директории video/.

  5. 05
    Постройте композицию

    Напишите ScreenSlide.tsx для анимации каждого экрана, WalkthroughComposition.tsx для последовательности и переходов, а также config.ts для fps и размеров.

  6. 06
    Просмотрите, затем отрендерите

    Итерируйте в Remotion Studio по таймингу и значениям пружинной анимации, затем отрендерите финальный файл через CLI или инструмент рендеринга Remotion.

02 Определите своё применение

Когда использовать skill remotion

Используйте скилл remotion в Claude Code или Codex, когда задача — моушн и видео такого рода. Назначение и ограничения взяты из собственного файла скилла.

Хорошо подходит

  • У вас уже есть проект Stitch со спроектированными экранами для видео-обзора
  • Вы хотите выделить конкретные элементы интерфейса анимированными указателями и кольцами-хотспотами
  • Вы создаёте видео с пошаговым путём пользователя, а не обычную демонстрацию слайдов
  • Вы уже знакомы с возможностями Remotion по работе с видео и хотите, чтобы его подходы соблюдались

Знайте границы

  • У вас нет доступа к Stitch MCP Server, а это обязательное условие
  • Никто в команде не знает React, так как Remotion собирает компоненты React
  • Скриншоты не удаётся получить в полном разрешении, и файл называет это причиной размытого результата

Что предоставить

  • Идентификатор проекта StitchЛибо уже известный ID проекта, либо название, по которому агент может найти его, если ID не указан.
  • Какие экраны должны войти в видеоСписок экранов проекта проверяется, чтобы все экраны для прохождения были определены до загрузки.
  • Размеры экрановШирина и высота каждого экрана нужны, чтобы композиция корректно масштабировала скриншот.
  • Заголовки и описанияЗаголовки и описания экранов становятся контекстным текстом, показанным над каждым кадром.
  • Предполагаемый порядок прохожденияМатериалы упорядочены так, как их должен увидеть зритель, а не в том порядке, в котором их возвращает Stitch.

03 Внутри скилла

Правила, которые skill remotion задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

  1. По умолчанию экраны длятся 3–5 секунд

    Каждый экран удерживается заданное время, по умолчанию — 3–5 секунд на экран.

  2. Компоновка на 30 fps

    config.ts задаёт частоту кадров, по умолчанию — 30 fps.

  3. Переходите на 60 fps, если движение прерывистое

    Если анимация выглядит рваной, повысьте частоту кадров до 60 fps и настройте демпфирование пружины, а не меняйте дизайн.

  4. Масштабирование через spring()

    Эффекты масштабирования должны управляться пружинными анимациями, применёнными к важным элементам UI, на которых нужно сделать акцент.

  5. Сохраняйте исходное соотношение сторон

    Используйте реальные размеры экранов Stitch или масштабируйте их пропорционально — никогда не растягивайте макет.

  6. Ведите сборку по манифесту

    Данные экранов хранятся в файле-манифесте, чтобы порядок, заголовки и длительность можно было обновлять без изменения кода компонентов.

  7. Держите тайминг стабильным

    Продолжительность показа экрана остаётся одинаковой на всём протяжении walkthrough, если конкретный экран не выделяется отдельно.

  8. Начните с плавных переходов

    Начните с базовых fade-переходов и добавляйте сложную анимацию только после того, как простой монтаж работает.

04 Применение

Установить remotion в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте remotion в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion

Общая форма CLI skills для plugins/stitch-build/skills/remotion/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по motion и видео

Адаптируйте этот промт с вашим содержимым и ограничениями, затем запустите его в Claude Code или Codex.

Example prompt
Look up the screens in my Stitch project "Calculator App" and build a remotion video that shows a walkthrough of the screens.

Источник: пример SKILL.md (буквально).

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Просмотрите композицию в Remotion Studio, прежде чем переходить к рендеру
  • Пройдите по встроенному чек-листу завершения
  • Проверьте, что текстовые оверлеи появляются в нужный момент на каждом экране
  • Убедитесь, что размеры экрана совпадают с размером композиции, и переразместите текст относительно реального размера экрана
  • Убедитесь, что текст оверлея остаётся читаемым всё время, а не только на первом кадре
  • Если движение выглядит рваным, протестируйте вариант на 60fps с изменённым spring damping

В OpenDesign remotion уже встроен: Plugins → Skills, выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Ветка main
Файл skill
plugins/stitch-build/skills/remotion/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 0337446
License
Apache-2.0 Из LICENSE.
Звёзды репозитория
8 304 Снимок GitHub сделан 14.09.2026 для всего репозитория google-labs-code/stitch-skills, который содержит 12 скиллов в этом каталоге. Это не рейтинг и не счётчик использования для remotion.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. ОбзорЧто в итоге создаёт рабочий процесс walkthrough Stitch плюс Remotion
  2. ТребованияНеобходимые MCP-серверы, Node.js, npm и проект Stitch с экранами
  3. Получение данных и работа с сетьюОпределение MCP-префиксов, поиск проектов и экранов, загрузка ассетов
  4. Стратегия построения видеокомпозицииАрхитектура ScreenSlide, WalkthroughComposition и конфигурации, а также переходы и оверлеи
  5. Этапы выполненияСбор ассетов, создание манифеста, генерация компонентов, предпросмотр, рендер
  6. Дополнительные возможностиИнтерактивные горячие точки, интеграция озвучки и автоматическое извлечение текста из HTML Stitch
  7. Структура файловОжидаемая структура каталогов видеопроекта и манифеста
  8. Интеграция со skills RemotionУстановка собственных агентских skills Remotion для анимации и рекомендаций по производительности
  9. Типовые шаблоныТри рецепта: простой слайд-шоу, показ функции и пользовательский флоу
  10. Решение проблемИсправления для размытых скриншотов, смещённого текста, рваной анимации, ошибок сборки, тайминга
  11. Лучшие практикиСоотношение сторон, единообразный тайминг, читаемый текст, плавные переходы, предпросмотр, оптимизация ассетов
  12. Советы для успехаНачинайте просто, повторно используйте шаблоны Remotion, используйте манифесты, чаще делайте предпросмотр, учитывайте доступность, размеры под платформу
Собственное описание skill
«Создавайте видео-туры из проектов Stitch с помощью Remotion — с плавными переходами, зумом и текстовыми оверлеями»

Описание из фронт-материи SKILL.md. Полный файл — около 12 764 символов. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill remotion

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Что нужно установить перед запуском?

Доступ к Stitch MCP Server и либо Remotion MCP Server, либо Remotion CLI, а также Node.js и npm, и проект Stitch, в котором уже есть спроектированные экраны. Знакомство с Remotion и компонентами React желательно, но не обязательно.

Обязательно ли использовать Remotion MCP server, или достаточно CLI?

CLI достаточно. После предварительного просмотра в Remotion Studio можно выполнить рендер командой npx remotion render WalkthroughComposition output.mp4, либо вызвать инструмент рендера Remotion с данными композиции, если этот сервер доступен.

Сколько времени каждый экран отображается на видео?

По умолчанию от трёх до пяти секунд на экран; длительность хранится для каждого экрана в манифесте, чтобы вы могли настраивать отдельные экраны. Длительность задаётся в манифесте и просматривается в Remotion Studio.

Remotion

Запустите remotion на реальной задаче моушн и видео.

Скилл remotion входит в состав OpenDesign. Скачайте приложение, выберите скилл в Plugins → Skills, вставьте промпт выше и прочтите план перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion