Перейти к руководству
Web Video Presentationавтор ConardLi

Web Video Presentation Skill.

Браузерная презентация с темпом видео: один озвученный фрагмент за раз.

  • Презентации
  • Анимация
  • Озвучка
Обзор источника · Web Video PresentationSKILL.md
Задача Презентации Результат • Кликабельная презентация 16:9 на React, разделённая на главы • Устный сценарий, план глав и подробности, взятые из источника • Дополнительные аудиофайлы для каждого шага для режима записи с автоматическим переходом Перед началом Используются Vite, React, TypeScript и инструменты Node. Дополнительный синтез речи (TTS) зависит от выбранного провайдера, учётных данных и адаптера; для итоговой записи нужны захват экрана в браузере или программа для записи.
Редакторское резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Web Video Presentation

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

Процесс на основе источникаНе тест выполнения

Принцип работы

Web Video Presentation превращает предоставленные материалы в веб-презентацию, которую можно записать. Результат — проект на Vite, React и TypeScript с фиксированной сценой 16:9, а не адаптивный маркетинговый сайт и не автоматически созданный видеофайл. Каждый клик переходит к следующему фрагменту озвучки и заменяет сцену сфокусированной полноэкранной композицией.

В процессе используются два источника содержания: устный сценарий задаёт последовательность и темп, а исходная статья даёт подробности для обогащения визуала. Файл narrations.ts главы служит эталоном количества и текста шагов, а также дополнительного аудио. Первая глава завершается и проверяется до того, как остальные главы расширят визуальный язык. Синтез речи — отдельное решение после готовности веб-версии.

Ожидаемые результаты

  • Кликабельная презентация 16:9 на React, разделённая на главы
  • Устный сценарий, план глав и подробности, взятые из источника
  • Дополнительные аудиофайлы для каждого шага для режима записи с автоматическим переходом
Смотреть пример задания

От задания до проверки

  1. 01
    Подготовьте сценарий и план

    Сохраните предоставленную статью, адаптируйте устный сценарий на исходном языке и спланируйте границы глав и содержание экранов. План задаёт ритм подачи информации, не предписывая каждую анимацию.

  2. 02
    Согласуйте план

    Совместно подтвердите сценарий, план, тему, материалы и режим разработки, чтобы у первой главы было определённое содержательное и визуальное задание.

  3. 03
    Проверьте полную главу

    Основной агент создаёт завершённую первую главу с реальным содержанием и задуманной анимацией, выполняет предписанную проверку и исправления, затем останавливается для обязательного одобрения пользователем до начала следующих глав. Используйте этот образец, чтобы устранить проблемы с темпом и несоответствия дизайн-токенов.

  4. 04
    Выберите звук и запись

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

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

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

Используются Vite, React, TypeScript и инструменты Node. Дополнительный синтез речи (TTS) зависит от выбранного провайдера, учётных данных и адаптера; для итоговой записи нужны захват экрана в браузере или программа для записи.

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

  • Технические объясненияПолезно, когда концепцию нужно раскрывать по одной связи за раз, сохраняя при этом подробности из источника, не озвучиваемые вслух.
  • Записанные доклады о продуктеПодходит для обучающих материалов и презентаций продукта, которые записываются из браузера и требуют точного контроля над тем, что видно в каждом фрагменте.

Ограничения для проверки

  • Не адаптивный сайтФиксированная сцена масштабируется под доступную область просмотра. Это приём для презентаций, а не макет для обычного чтения на мобильных устройствах.
  • Звук необязателен и внешнийДля речи нужен настроенный провайдер или другой путь TTS. Готовый веб-проект не доказывает, что синтез голоса или итоговая видеозапись выполнены.

Что подготовить

  • Статья или сценарийПредоставьте исходный материал или содержательный план. Навык не заменяет решение о том, что должен говорить докладчик.
  • Тема и материалыВыберите визуальное настроение и определите доступные снимки продукта, диаграммы или утверждённые заглушки для запланированных глав.
  • Совместная работа и звукРешите, нужна ли отдельная проверка последующих глав или их можно завершить вместе, и отдельно разрешите любой бэкенд генерации речи.

03 Важные решения

Важные решения

  1. Единая запись озвучки

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

  2. Анимация, определяемая содержанием

    План оставляет решения об анимации для реализации: так раскрытие определяется объясняемой связью, а не произвольными эффектами, назначенными слишком рано.

04 Пример задания

Попробуйте целевое задание

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

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

Сохраните полный пакет навыка из репозитория, включая заготовку проекта, справочники глав, темы и дополнительные аудиоскрипты.

Исходный файл в апстриме
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md

Используются Vite, React, TypeScript и инструменты Node. Дополнительный синтез речи (TTS) зависит от выбранного провайдера, учётных данных и адаптера; для итоговой записи нужны захват экрана в браузере или программа для записи.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Используй Web Video Presentation, чтобы превратить приложенную статью об отрисовке в браузере в пятиминутный пояснительный ролик на английском. Сохрани исходную статью, создай устный сценарий и план и предложи сдержанную техническую тему. Пусть первая глава демонстрирует разницу между layout и paint, а не состоит из текстовых слайдов. Остановись для её проверки до создания следующих глав. Не синтезируй речь, пока я не выберу аудиопровайдера.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Число видимых шагов каждой главы совпадает с числом записей озвучки.
  • Первая глава передаёт свою концепцию визуальной демонстрацией, а не только абзацами текста.
  • Аудиофайлы и автоматическое воспроизведение заявлены только если эти необязательные этапы действительно выполнены.

OpenDesign предоставляет локальное дизайн-пространство для кодирующих агентов. Это размещение не означает, что навык поставляется в комплекте или что внешние инструменты, учётные данные и программные зависимости включены.

05 Источник и лицензия

Источник и лицензия

На этой странице описана зафиксированная версия источника по ссылке ниже. Поведение и требования апстрима могут измениться.

Владелец источника
ConardLi
Репозиторий
ConardLi/garden-skills
Лицензия
MIT
Проверенный снимок
2026-10-07 · aaf9a82f5efd
Редакторское резюме источника
Процесс презентации по фрагментам озвучки: фиксированная сцена, проверенная первая глава, записи озвучки для каждой главы и дополнительная запись с поддержкой аудио.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не число использований навыка и не оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Результат — это MP4?

Основной результат — браузерный проект. Запись и постобработка превращают его в видео; дополнительные файлы речи могут помочь автоматизировать воспроизведение во время записи.

Можно ли использовать собственного провайдера речи?

В источнике описан не зависящий от провайдера скрипт запуска со встроенными маршрутами и адаптерами. Рабочий аккаунт или локальный инструмент всё равно нужно настроить.

Зачем хранить статью после написания сценария?

Сценарий определяет ритм речи, но статья остаётся источником примеров, чисел и подробностей, которые могут поддержать экран, не перегружая озвучку.

OpenDesign

Освободите место для следующей итерации дизайна.

Храните задание, исходные материалы и дизайнерскую работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Исходный файл в апстриме
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md