Как сделать презентацию в sli.dev с помощью AI-агента

От нуля до готовых слайдов за одну сессию

Что ты получишь

Готовую презентацию в sli.dev: слайды с текстом, стилем, анимациями и сгенерированными картинками, которые выглядят как кадры одного фильма. Не шаблон из интернета — а твою собственную историю в твоём собственном визуальном стиле.

Что тебе нужно

AI-агент (Claude, ChatGPT или любой другой)
Node.js 18+ и пакетный менеджер (npm идёт в комплекте)
Генератор картинок (Midjourney, Nano Banana 2 / Gemini, DALL-E)
Терминал и текстовый редактор
2–4 часа времени

Установка Node.js

Если Node.js ещё не установлен, проверь:

node --version

Если команда не найдена или версия ниже 18 — установи:

Платформа	Способ
Все платформы	Скачать установщик с nodejs.org (LTS-версия)
macOS	`brew install node`
Ubuntu/Debian	`curl -fsSL https://deb.nodesource.com/setup_22.x \\| sudo bash - && sudo apt install -y nodejs`
Windows	Установщик с nodejs.org или `winget install OpenJS.NodeJS.LTS` или `choco install nodejs-lts`

После установки убедись, что всё работает:

node --version   # >= 18
npm --version    # идёт вместе с node

ШАГ 1: Braindump — вывали всё агенту

Не открывай редактор. Не открывай PowerPoint. Открой чат с агентом.

Напиши ему всё что знаешь о своём выступлении. Не структурируй — просто говори:

Я хочу сделать презентацию про [тема].
Аудитория: [кто будет слушать].
Я хочу донести: [основная мысль].
Контекст: [почему это важно, что произошло, какая проблема].
У меня есть: [факты, цифры, истории, примеры].
Длительность: [сколько минут].

Агент задаст уточняющие вопросы и поможет вытащить суть. Не торопись — это самый важный этап. 60% работы над хорошей презентацией — думание, а не рисование.

ШАГ 2: Выбери формат нарратива

Презентация — это история, а не набор слайдов. Выбери формат, который подходит твоей теме:

Формат	Структура	Когда использовать
Пьеса	Акт 1 → конфликт → кульминация → развязка	Кейсы, истории трансформации, «было → стало»
Суд	Обвинение (проблемы) → защита (решения) → вердикт	Когда нужно сначала показать боль, потом лечение
Расследование	Улики → гипотезы → разгадка	Постмортемы, анализ инцидентов, security
Путешествие героя	Вызов → ментор → испытания → возврат	Личные истории, карьерные доклады
Рецепт	Ингредиенты → шаги → результат → вариации	How-to, туториалы, практикумы
Хроника	Таймлайн с датами и маркерами	Ретроспективы, история проекта
Манифест	Серия тезисов-ударов	Keynote, вдохновляющие выступления

Скажи агенту:

Мой формат: [выбранный формат].
Разбей мой braindump на слайды в этом формате.

ШАГ 3: Придумай визуальную метафору

Визуальная метафора — это сквозной образ, который проходит через ВСЮ презентацию. Каждый слайд — новая сцена с тем же героем/объектом.

Почему это важно: зритель запоминает образ, а не текст. Связанные картинки создают ощущение фильма. Разрозненные — ощущение фотоальбома.

Примеры: - Тема «миграция стека» → механическая лошадь: старый ржавый двигатель → новый - Тема «как делать презентации» → кузнец и меч: руда → ковка → острый клинок - Тема «запуск продукта» → ракета: сборка → топливо → запуск → орбита - Тема «рефакторинг» → реставрация здания: трещины → леса → новый фасад

Скажи агенту:

Моя визуальная метафора: [образ].
Вот как она мапится на слайды: [описание маппинга].
Перепиши структуру слайдов с учётом метафоры.

ШАГ 4: Определи эмоциональные координаты и стиль

Не «какой стиль хочу», а «какое ощущение». Ответь себе:

Моя презентация: дерзкая? строгая? тёплая? холодная? драматичная?
Какой фильм передаёт это ощущение?

Выбери цветовую схему:

Схема	Фон	Акцент	Ощущение
Terminal	`#0A0A0C`	`#39FF14` зелёный	Хакерский, raw, CLI
Cyberpunk	`#0a0a0f`	`#00f0ff` cyan + `#ff00aa` magenta	Дерзкий, неоновый
Noir	`#0d0d0d`	`#ffffff` белый + `#ff3333` красный	Контраст, тени, драма
Blueprint	`#0a1628`	`#4fc3f7` голубой	Инженерный, точный
Amber	`#0a0800`	`#ffaa00` янтарный	Ретро, тёплый, 80-е
Clean Dark	`#1a1a2e`	`#6c63ff` фиолетовый	Корпоративный минимал

Скажи агенту:

Эмоциональные координаты: [ощущение].
Цветовая схема: [название].
Сгенерируй CSS custom properties для sli.dev на основе этой схемы.

ШАГ 5: Создай стилевой якорь для картинок

Стилевой якорь — это текстовый блок, который ты добавляешь в конец КАЖДОГО промпта для генерации картинок. Он удерживает единый стиль на всех 15–25 слайдах.

Скажи агенту:

На основе моих эмоциональных координат и цветовой схемы,
напиши стилевой якорь — суффикс для промптов генерации картинок.
Формат: 2-3 предложения на английском, описание стиля, палитры, текстур, настроения.
В конце: "Cinematic composition, 16:9."

Пример результата:

Style: film noir, strictly black and white with selective neon green (#39FF14)
as the only color. High contrast, deep dramatic shadows, film grain texture.
Sin City meets The Matrix aesthetic. Cinematic composition, 16:9.

ШАГ 6: Агент генерирует slides.md

Теперь у тебя есть всё: - Braindump (содержание) - Формат (структура) - Метафора (сквозной образ) - Стиль (CSS + якорь для картинок)

Скажи агенту:

Сгенерируй полный файл slides.md для sli.dev.
Включи:
- frontmatter с конфигурацией
- CSS custom properties в <style> блоке
- Все слайды с текстом и разметкой
- Placeholder'ы для картинок в формате /images/XX-name.png
- <v-click> анимации для ключевых элементов
- Чередование раскладок: image-left / image-right / full-bleed

ШАГ 7: Агент генерирует промпты для картинок

Скажи агенту:

Для каждого слайда напиши промпт для генерации картинки на английском.
Требования:
- В конце каждого промпта — стилевой якорь
- Чередуй масштаб (ритм планов): wide → close-up → medium → detail
- Каждый промпт = одна сцена из нашей визуальной метафоры
- Укажи имя файла для каждой картинки

ШАГ 8: Инициализируй проект sli.dev

macOS / Linux:

mkdir my-presentation && cd my-presentation
npm init -y
npm install -D @slidev/cli @slidev/theme-default
mkdir -p public/images

Windows (PowerShell):

mkdir my-presentation; cd my-presentation
npm init -y
npm install -D @slidev/cli @slidev/theme-default
mkdir -Force public\images

Windows (cmd):

mkdir my-presentation && cd my-presentation
npm init -y
npm install -D @slidev/cli @slidev/theme-default
mkdir public\images

Добавь в package.json:

{
  "scripts": {
    "dev": "slidev",
    "build": "slidev build",
    "export": "slidev export"
  }
}

Скопируй slides.md от агента в корень проекта.

Запусти:

npm run dev

Открой http://localhost:3030 — увидишь свою презентацию (пока без картинок).

ШАГ 9: Сгенерируй картинки

Вариант A: Midjourney

Сгенерируй первую картинку (якорь) без --sref
Выбери лучший вариант, скачай
Для всех остальных: прикрепляй якорь как --sref URL + добавляй стилевой якорь текстом
Всегда ссылайся на картинку 01, а не на предыдущую (предотвращает дрейф стиля)

/imagine [промпт слайда] + [стилевой якорь] --sref [URL якоря] --sw 100 --ar 16:9 --v 7

Вариант B: Nano Banana 2 (бесплатный, в Gemini)

Сгенерируй первую картинку только по промпту
Скачай лучший вариант
Для всех остальных: прикрепляй картинку 01 к каждому запросу + промпт + стилевой якорь

Вариант C: DALL-E / другие

Аналогично — используй первую картинку как style reference если инструмент поддерживает.

Чеклист для каждой картинки:

[ ] Стиль совпадает с якорем
[ ] Цвета не уехали
[ ] Масштаб сцены правильный (wide/medium/close/detail)
[ ] Читается на тёмном фоне
[ ] Нет артефактов

Скачанные картинки сохраняй в public/images/ с именами из промптов.

ШАГ 10: Заточка — финальное ревью

Когда всё собрано — попроси агента проверить:

Вот мой slides.md. Проверь:
1. Есть ли «маршрутка до конечной» — слайды где всё перечислено, но ничего не чувствуется?
2. Выдержан ли ритм: не стоят ли два одинаковых типа слайда подряд?
3. Есть ли крючки — моменты которые заставляют хотеть увидеть следующий слайд?
4. Не слишком ли много текста на каком-то слайде?
5. Уничтожь мой текст как зритель, который заплатил деньги за билет.

Также сгенерируй speaker notes:

Для каждого слайда напиши speaker notes — что я говорю голосом,
пока зритель смотрит на слайд. Помни: я не читаю со слайда.
Speaker notes = то, чего НЕТ на слайде.

ШАГ 11: Экспорт

# PDF
npx playwright install chromium   # один раз
npm run export

# Статический сайт (для хостинга)
npm run build
# Результат в dist/

Структура готового проекта

my-presentation/
├── package.json
├── slides.md              ← вся презентация
├── public/
│   └── images/
│       ├── 01-scene-name.png
│       ├── 02-scene-name.png
│       ├── ...
│       └── 20-scene-name.png
└── dist/                  ← после npm run build

Чеклист перед выступлением

[ ] Все картинки на месте и загружаются
[ ] Шрифты подгружаются (проверь в режиме presenter)
[ ] анимации работают
[ ] Текст читается на фоне картинок (достаточный контраст)
[ ] Speaker notes видны в presenter mode (нажми P в sli.dev)
[ ] Проверил на проекторе / внешнем мониторе (цвета могут отличаться)
[ ] Есть PDF-экспорт как backup

Типичные ошибки

Начинать с дизайна, а не с истории. Сначала braindump и формат, потом стиль.
Генерировать картинки без якоря. Каждая будет в своём стиле — рассыпется.
Использовать предыдущую картинку как референс для следующей. Дрейф стиля. Только якорь (01).
Один масштаб на всех слайдах. Чередуй: wide → close → medium → detail.
Слишком много текста на слайде. Если можешь сказать голосом — не пиши.
Скачать шаблон из интернета. Чужая структура навяжет чужое мышление.
Пропустить ревью. Агент-ревьюер найдёт то, что ты не видишь.

Промпт-шаблон для старта

Скопируй и вставь в чат с агентом:

Я хочу создать презентацию в sli.dev с помощью AI-агента.

Тема: [ТЕМА]
Аудитория: [КТО БУДЕТ СЛУШАТЬ]
Основная мысль: [ЧТО ДОЛЖНЫ ЗАПОМНИТЬ]
Контекст: [ПРЕДЫСТОРИЯ, ПРОБЛЕМА, СИТУАЦИЯ]
Длительность: [МИНУТ]

Помоги мне пройти по шагам:
1. Структурируй мой braindump
2. Предложи формат нарратива (пьеса, суд, расследование, рецепт, путешествие героя, хроника, манифест)
3. Предложи визуальную метафору — сквозной образ для всей презентации
4. Определи эмоциональные координаты и цветовую схему
5. Напиши стилевой якорь для промптов генерации картинок
6. Сгенерируй полный slides.md для sli.dev
7. Напиши промпты для генерации картинок к каждому слайду