Как сделать презентацию с ИИ

Мне всегда было неудобно править презентации, в которых всё держится на ручном выравнивании. Поменял формулировку — текст вылез. Добавил шаг в объяснение — нужно переделывать несколько слайдов. А когда просишь ИИ собрать презентацию, часто получаешь красивую оболочку, в которую ещё предстоит вложить мысль.

Я сделал every-slide-is-code, или deck-kit, потому что хотел работать со слайдами так же удобно, как с кодом: задавать структуру, видеть изменения и быстро уточнять конкретный фрагмент. Мне нравится, когда диаграмма помогает объяснить идею, а анимация показывает ход рассуждения.

В этом гайде покажу свой маршрут: от короткого брифа до HTML-презентации, которую можно открыть в браузере и передать в PDF или PowerPoint. Для первого результата хватит трёх слайдов.

1. Начните с задачи

Я начинаю с ответа на вопрос: что человек должен понять или сделать после выступления? Запишите аудиторию, цель и длительность. Добавьте факты, которые можно использовать. Если цифр пока нет, попросите явно пометить примеры — не заменять отсутствующие данные правдоподобными числами.

Например: «Объяснить коллегам, почему мы меняем процесс ревью. Шесть слайдов, пять минут. В конце слушатель должен понять новый порядок и следующий шаг».

2. Подключите deck-kit

Самый понятный первый запуск — скачать kit в рабочую папку:

git clone https://github.com/kiselas/every-slide-is-code deck-kit

Откройте эту папку в среде своего кодинг-агента. Я прошу сначала прочитать 00-agent-brief.md, инструкции по задаче и стартовый template/deck.html. Так агент получает рабочие правила и runtime для сборки.

Kit можно подключить и как skill. Варианты установки для разных клиентов приведены в README every-slide-is-code. Для прохождения этого гайда достаточно папки с файлами.

3. Дайте агенту конкретный бриф

Создай HTML-презентацию по правилам deck-kit.
Сначала прочитай deck-kit/00-agent-brief.md и нужные инструкции kit.
Аудитория: разработчики нашей команды. Цель: объяснить новый процесс ревью.
6 слайдов, 5 минут. Используй только приложенные факты.
Сначала предложи заголовки и основной тезис каждого слайда.
После согласования собери deck-kit/my-deck.html из шаблона kit.
Сохрани runtime презентации внутри итогового HTML.
Смысл диаграмм должен читаться и без анимации.
Запусти check и собери контактный лист. Исправь найденные проблемы.

Перед сборкой я проверяю логику: каждый слайд должен продвигать мысль. «Процесс ревью» — название темы. «Маленькие изменения быстрее проходят ревью» — тезис, который можно объяснить и подкрепить.

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

Что даёт презентация как код

Я могу попросить: «На четвёртом слайде покажи путь заявки по шагам», «Замени пример на наши числа», «Увеличь подписи в диаграмме». Результат сохраняется в файле; изменения можно посмотреть через Git и при необходимости откатить.

HTML-версия поддерживает пошаговое объяснение, диаграммы и режим докладчика. Мне важно, что перед выступлением можно пройти именно тот рассказ, который увидит аудитория. Для знакомства с возможностями откройте живой пример deck-kit.

4. Проверьте презентацию

Откройте deck-kit/my-deck.html в браузере и пройдите все слайды и шаги. Проверки и экспорт требуют Node.js и Google Chrome. Из исходной рабочей папки выполните:

cd deck-kit/export
npm install
node deck.mjs check ../my-deck.html
node deck.mjs check ../my-deck.html --timeline --no-webfonts
node deck.mjs sheet ../my-deck.html sheet.png

Здесь предполагается, что агент сохранил my-deck.html в корне kit, как в брифе. Если путь другой, замените его в командах. Возможности проверки описаны в инструкции экспорта и QA.

Я всегда смотрю контактный лист — картинку со всеми слайдами. На ней сразу заметны повторяющиеся композиции, скачки плотности и слишком мелкие подписи. Затем отдельно прохожу переходы в браузере: хороший итоговый кадр ещё не гарантирует, что всё читается во время движения.

Пример точечной правки:

На третьем слайде подписи диаграммы слишком мелкие.
Увеличь их и убери второстепенные детали.
Сохрани тезис и остальные слайды.
После изменения повтори проверку и обнови контактный лист.

5. Выберите формат для передачи

HTML сохраняет интерактивность и анимации. Для статического документа или привычного слайдового файла доступны команды:

node deck.mjs pdf ../my-deck.html deck.pdf
node deck.mjs pptx ../my-deck.html deck.pptx

PDF и PowerPoint в этом workflow статические: проверяйте, что конечное состояние слайда понятно без движения. Я открываю именно экспортированный файл перед отправкой. Это простая привычка, которая избавляет от неприятных сюрпризов у получателя.

Для автономной передачи HTML с включёнными шрифтами и CDN-зависимостями есть отдельная команда:

node deck.mjs bundle ../my-deck.html offline.html

Проверьте offline.html без доступа к сети перед выступлением. Презентацию стоит проверять в том формате и окружении, в которых её будут смотреть.

Практика

Сделайте три слайда: проблема, предлагаемый процесс, следующий шаг. Проверьте, что факты не придуманы, заголовки передают вывод, а текст читается на экране слушателя. Затем измените одну цифру или цвет через код и повторите проверку. Экспортируйте PDF и убедитесь, что рассказ остаётся понятным.

Я считаю every-slide-is-code одним из самых приятных способов собирать презентации с ИИ: можно сочетать авторский рассказ, выразительный дизайн и привычный процесс разработки. Исходники и примеры открыты в репозитории инструмента.

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