98.8K+Скачать
Перейти к руководству
slideshowавтор HeyGen

Slideshow Skill.

Скилл Claude Code и Codex для создания презентаций PPT и слайдов: интерактивные слайд-шоу HyperFrames с фрагментами, ветвлением и режимом докладчика.

  • Presentations
  • HTML-слайды
Скачать OpenDesignИнструкция по использованию
heygen-com/hyperframes · skills/slideshow/SKILL.mdSKILL.md
--- name: slideshow description: Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes. --- ## Output — a navigable deck, not a linear MP4 ## Intent confirmation ## The two pieces ## Schema ## Slide writing rules ## Porting source pages
Метаданные и заголовки разделов из исходного файла от 14.09.2026 · 33 631 символ полностью

01 Что делает

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

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

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

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

Создаёт слайд-шоу HyperFrames — презентации, пич-деки или интерактивные деки с отдельными слайдами, поэтапным раскрытием фрагментов, ветвлением, навигацией по хотспотам и встроенным режимом презентатора с заметками докладчика. Также преобразует существующие страницы в деки. Результат — навигируемая дека, отдаваемая с hyperframes, а не отрендеренный MP4. Использует JSON island скрипт-блок для объявления слайдов и связей. Поддерживает фрагменты (точки удержания раскрытия внутри слайда), ветвление через хотспоты к автономным последовательностям и режим презентатора с редактируемыми заметками, синхронизируемыми через BroadcastChannel.

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

Что он выдаёт

  • Композиция HyperFrames со сценами, клипами, таймлайнами GSAP и манифестом JSON island
  • Навигируемая дека, отдаваемая с hyperframes, включая режим презентатора с заметками докладчика
Смотрите пример запроса ↗

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

  1. 01
    Подтвердите намерение

    Если пользователь явно просит слайд-шоу, продолжайте; в противном случае сделайте паузу и объясните, что означает слайд-шоу HyperFrames (запускаемая дека, навигация, режим презентатора), прежде чем запрашивать подтверждение.

  2. 02
    Объявите сцены с атрибутами тайминга

    Каждый слайд опирается на сцену. Объявляйте каждую с data-composition-id, data-start, data-duration и data-label.

  3. 03
    Добавьте JSON Island

    Добавьте в HTML композиции ровно один блок script с типом application/hyperframes-slideshow+json.

  4. 04
    Пишите слайды по строгим правилам

    Заголовки должны быть законченными утверждениями-предложениями. Одна идея плюс одна визуализация на слайд. Начинайте с главной мысли. Оценка объёма рынка — только методом «снизу вверх». Минимальный размер шрифта — эквивалент 30pt.

  5. 05
    Ищите в каталоге перед созданием визуалов

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

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

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

Используй скилл slideshow в Claude Code или Codex, когда задача — это PPT и слайд-презентации такого типа. Применимость и ограничения взяты из собственного файла скилла.

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

  • Презентации, пич-деки или интерактивные деки с отдельными слайдами
  • Деки с раскрытием фрагментов, ветвлением, hotspot-навигацией и режимом презентера
  • Преобразование существующей страницы в деку

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

  • Запросы, в которых намерение создать слайд-шоу неясно — нужно подтвердить перед созданием
  • Текст меньше 40px, который аудитория должна прочитать

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

  • URL источника Figma (опционально)Если содержимое или сториборд деки берётся с URL figma.com, сначала выполните /figma для экспорта ассетов, брендовых токенов и реконструкции сториборда перед созданием.

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

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

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

  1. Одна идея плюс одна визуализация на слайд

    Если вас тянет добавить второй кластер маркеров или вторую диаграмму — разделите слайд.

  2. Минимальный размер шрифта — эквивалент 30pt

    При разрешении 1920×1080 заголовок — 72–96px; основной текст — 48px. Никогда не опускайтесь ниже 40px для любого текста, который аудитория должна прочитать.

  3. Оценка объёма рынка только методом «снизу вверх»

    Никогда не пишите $50B TAM без показа расчёта. Стройте оценку снизу вверх: аккаунты × ACV, или транзакции × take-rate.

  4. Ищите в каталоге перед созданием вручную

    Для каждой именованной визуализации, нужной слайду, выполните npx hyperframes catalog --query и изучите верхние результаты перед созданием. Настоящий блок лучше упрощённой имитации.

  5. Не рендерьте слайд-шоу в MP4

    Дека создаётся как несколько композиций сцен верхнего уровня без master-root композиции, поэтому рендер обрабатывает только первую композицию и выдаёт незаметно обрезанный MP4.

  6. Время фрагментов — абсолютные позиции на composition-timeline

    Время фрагментов задаётся в той же системе координат, что и data-start, а не как смещение относительно начала сцены. Оно должно попадать в диапазон start, end слайда включительно.

  7. Сохранение точности исходной страницы при переносе

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

04 Применение

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

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

Добавь slideshow в Claude Code, Codex или свой агент

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

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill slideshow

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

Дайте skill первую задачу с PPT и слайд-деками

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
Build a HyperFrames slideshow for a Series A pitch deck. Start with a hook slide showing SMBs lose $40B/year to manual scheduling. Add a problem slide with three pain points that reveal as fragments: no-shows cost 23% of revenue, manual reminders take 4h/week per staff, and rescheduling friction drives 40% churn. Include a hotspot on the $40B figure that branches to a market-sizing slide showing the bottom-up math: 2.3M SMBs × $17k ACV. End with a solution slide: [product name] automates scheduling for service SMBs, cutting no-shows by 80% in 90 days. Include speaker notes for each slide.

Источник: составлено по SKILL.md в терминах самого skill.

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

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

  • Исправьте файл и запускайте повторно, пока lint не сообщит 0 error(s), а валидация — об отсутствии ошибок выполнения
  • Проверьте, что каждый slide.sceneId разрешается в существующую сцену по data-composition-id
  • Проверьте, что каждый hotspot.target ссылается на определённый id slideSequence
  • Проверьте, что время фрагментов попадает в диапазон start, end каждого слайда

В OpenDesign импортируйте slideshow по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

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

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

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

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

Author
HeyGen
Repository
github.com/heygen-com/hyperframes Ветка main
Файл skill
skills/slideshow/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 558c11b
License
Apache-2.0 Из LICENSE.
Звёзды репозитория
49 761 Снимок GitHub сделан 2026-09-14 для всего репозитория heygen-com/hyperframes, который содержит 9 скиллов в этом каталоге. Это не рейтинг и не счётчик использования для slideshow.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. Контракт создания slideshowSlideshow HyperFrames — это обычная композиция плюс JSON-остров, декларирующий слайды и связи
  2. Результат — навигируемая презентация, а не линейный MP4Публикуйте с сохранением hyperframes; не рендерите в MP4, так как это обрезает результат до первой композиции
  3. Подтверждение намеренияПодтверждайте перед созданием, если пользователь явно не запросил slideshow; направленное намерение считается уже подтверждённым
  4. Два компонентаСцены, объявленные через data-composition-id и тайминг; JSON-остров с массивами slides и slideSequences
  5. СхемаОпределения и требования полей SlideshowManifest, SlideRef, SlideHotspot и SlideSequence
  6. Правила написания слайдовЗаголовки в виде полных предложений, одна идея на слайд, размер снизу вверх, минимум 30pt, сначала поиск по каталогу
  7. Перенос исходных страницСохраняйте исходный дизайн, анимацию, взаимодействия, медиа; переводите движение страницы в переходы слайдов; связывайте медиа-события
  8. Фрагменты: точки удержания раскрытия внутри слайдаАбсолютное время таймлайна в диапазоне слайда; контроллер переходит к каждому фрагменту по Next; между ними воспроизведения нет
  9. Ветвление: hotspot'ы и последовательности слайдовВетвящиеся слайды исключены из основной линии; клик по hotspot добавляет запись в стек навигации; кнопка «назад» возвращает к родителю
  10. Разобранный пример: презентация из 3 слайдов с фрагментами и ветвлениемПолный HTML-скелет со сценами, JSON-островом, таймлайном GSAP и веткой последовательности
  11. Оборачивающий компонентОборачивайте в hyperframes-slideshow; предоставляет навигацию, клавиатуру, тач, hotspot'ы; Present открывает вкладку для аудитории; глобальное отключение звука
  12. Автономный запуск slideshow (временное решение)Автономные демонстрации требуют обходных решений до выхода предпросмотра, встроенного в движок; см. references/standalone-harness.md
Собственное описание skill
«Создание слайд-шоу HyperFrames — презентации, питч-дека или интерактивного дека с отдельными слайдами, пошаговыми фрагментами, ветвлением, навигацией по точкам и встроенным режимом докладчика с заметками; также преобразует существующую страницу в дек. Результат — навигируемый дек, а не отрендеренный MP4. Если пользователь явно не запросил слайд-шоу, подтвердите перед созданием. Неясно → /hyperframes.»

Описание из front-matter SKILL.md. Полный файл содержит около 33 631 символа. Прочитай полный файл на GitHub.

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

Вопросы о skill slideshow

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

Что такое фрагменты и как они работают?

Фрагмент — это абсолютное время таймлайна композиции в секундах внутри диапазона start, end слайда, в котором контроллер удерживает состояние раскрытия.

Плеер входит в слайд с фрагментами на fragments[0], затем переходит к каждому следующему фрагменту по Next. После последнего фрагмента Next переводит к следующему слайду. Навигация управляется переходами (seek), а не воспроизведением.

Slideshow

Запустите slideshow на реальной задаче по созданию PPT и слайд-деков.

Скачайте OpenDesign, импортируйте slideshow по ссылке на SKILL.md, вставьте промпт выше и ознакомьтесь с планом перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/heygen-com/hyperframes --skill slideshow

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows