# Presentation Engineering
> Инженерия историй: создание мироизменяющих презентаций. Не генератор слайдов — а система превращения идей в истории, которые вдохновляют действовать. Сочетает нарративную инженерию, визуальный язык и перформанс-дизайн.
- Skill: `bestdeejay-design/presentation-engineering` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add bestdeejay-design/presentation-engineering`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bestdeejay-design/presentation-engineering/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: bestdeejay-design (https://skillmd.com/u/bestdeejay-design)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bestdeejay-design/presentation-engineering
---
# 🌍 Presentation Engineering
## Философия
**Презентация — это не документ. Это акт.**
Мiro изменил мир не потому что у него были красивые слайды. Он изменил мир потому что у него была **история**, которую люди хотели рассказать дальше.
Этот скилл создаёт не презентации. Он создаёт **моменты**, после которых мир становится немного другим.
---
## Три опоры мироизменяющей презентации
### 📖 OPORA 1: STORY ENGINE
**Не «напиши текст». А «спроектируй историю».**
Каждая презентация — это путешествие аудитории из точки A в точку B:
```
ГДЕ МЫ СЕЙЧАС → ПОЧЕМУ ЭТО ПРОБЛЕМА → КУДА МЫ ИДЁМ → КАК ТУДА ПОПАСТЬ → ЧТО ДЕЛАТЬ СЕЙЧАС
```
#### Шаг 1.1: Audience Archaeology
**Не «для кого презентация». А «что держит эту аудиторию ночью».**
```markdown
## Карта аудитории
Полная карта аудитории (кто они / что болит / что хотят / что мешает) вынесена в [`references/audience-map.md`](references/audience-map.md) — заполните её на стадии STORY DESIGN.
### 🎨 OPORA 2: VISUAL LANGUAGE
**Не «примени токены». А «создай язык, на котором говорит эта презентация».**
#### Шаг 2.1: Design Soul
**7 слоёв визуальной идентичности презентации:**
```
1. COLOR — палитра, которая говорит
└── Не «синий + белый». А «доверие + чистота + технологичность»
2. TYPOGRAPHY — иерархия, которая ведёт
└── Не «заголовок 36pt». А « главная мысль = 48pt bold, подпись = 14pt light»
3. SPACING — ритм, который дышит
└── Не «отступы 24px». А «воздух между идеями = время для осмысления»
4. SHAPE — форма, которая характеризует
└── Не «скруглённые углы». А «мягкие формы = человечность, острые = точность»
5. DEPTH — слои, которые создают мир
└── Не «тень». А «передний план = действие, фон = контекст»
6. COMPONENTS — элементы, которые повторяются
└── Не «кнопки и карточки». А «согласованная система, которую мозг считывает мгновенно»
7. MOTION — движение, которое рассказывает
└── Не «анимация появления». А «появление = рождение идеи, исчезновение = завершение мысли»
```
#### Шаг 2.1.1: Иконки — SVG из популярных наборов
**Никогда не используй emoji как иконки.** Вместо этого:
**Рекомендуемые наборы иконок:**
- **Lucide Icons** (https://lucide.dev/) — MIT, 1400+ иконок, line style
- **Heroicons** (https://heroicons.com/) — MIT, 300+ иконок, Tailwind стиль
- **Phosphor Icons** (https://phosphoricons.com/) — MIT, 9000+ иконок, 6 весов
- **Tabler Icons** (https://tabler.io/icons) — MIT, 5000+ иконок
**Формат: Inline SVG**
```html
📊
```
**Стилизация через CSS:**
```css
.icon {
width: 48px;
height: 48px;
color: var(--color-primary);
}
.icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
```
**Почему inline SVG лучше:**
- Полный контроль над strokeWidth и размерами
- Стилизация через CSS (currentColor)
- Не зависят от шрифтов
- Лучшая доступность (aria-label)
- Работают везде (браузеры, email, PDF)
#### Шаг 2.2: Composition Grammar
**Не «bullets» и «table». А 16+ типов слайдов:**
```
НАРРАТИВНЫЕ:
├── Hero Slide — главная мысль, один элемент
├── Statement Slide — утверждение во всю ширину
├── Quote Slide — цитата с атрибуцией
└── Chapter Slide — заголовок новой главы
ДАННЫЕ:
├── Metrics Slide — 3-4 ключевых числа
├── Chart Slide — один график, один вывод
├── Comparison Slide — ДО / ПОСЛЕ или ВARIANTS
└── Timeline Slide — путь или процесс
КОНТЕНТ:
├── Split Slide — текст + визуал
├── Full-Bleed Slide — изображение на весь экран
├── List Slide — 3-5 пунктов с иконками
└── Detail Slide — глубокое погружение в один элемент
ВЗАИМОДЕЙСТВИЕ:
├── Reveal Slide — пошаговое раскрытие
├── Branch Slide — выбор пути
└── Q&A Slide — пауза для вопросов
```
#### Шаг 2.3: Typography Hierarchy
**7 уровней, каждый = своя роль:**
```
LEVEL 1: Presentation Title — 48-64pt, Bold/Black
Роль: Захватить. Это название фильма.
LEVEL 2: Chapter Title — 36-48pt, Bold
Роль: Напомнить, где мы. Это название акта.
LEVEL 3: Slide Title (Action) — 28-36pt, Semibold
Роль: Главная мысль слайда. Это приговор.
LEVEL 4: Key Stat / Metric — 48-72pt, Bold/Black
Роль: Шокировать числом. Это кульминация.
LEVEL 5: Body Text — 18-24pt, Regular
Роль: Объяснить. Не перегрузить.
LEVEL 6: Caption / Label — 14-16pt, Light
Роль: Уточнить. Для тех, кто хочет подробностей.
LEVEL 7: Footnote / Source — 10-12pt, Light
Роль: Дать ссылку. Для тех, кто проверяет.
```
#### Шаг 2.4: Uniqueness Gate
**Проверка: это не AI-дефолт?**
```
Проверь каждый слайд:
□ Есть ли здесь что-то, чего НЕ было бы в типичной AI-презентации?
□ Если убрать логотип, будет ли понятно, ЧЬЯ это презентация?
□ Есть ли здесь «момент для скриншота» — слайд, который захотят сохранить?
□ Если бы этот слайд показали без контекста, вызовет ли он эмоцию?
□ Соответствует ли этот слайд Design Soul или выглядит как шаблон?
Если хотя бы один ответ «нет» — переработай слайд.
```
---
### 🎭 OPORA 3: PERFORMANCE DESIGN
**Не «экспортируй в PDF». А «спроектируй момент».**
#### Шаг 3.1: The One More Thing
**Финал, который запоминается.**
```
Структура «One More Thing»:
[Всё казалось завершённым] → [Пауза] → [Но есть кое-что ещё...] → [УДАР]
Примеры:
- «Мы говорили о проблеме. Но мы не просто нашли решение. Мы его уже запустили.»
- «Это может показаться амбициозным. Но через 6 месяцев это будет реальностью. Вот доказательство.»
- «Вы думали, что это презентация о технологиях. Но это презентация о людях. О вас.»
```
#### Шаг 3.2: Timed Reveals
**Не «появление текста». А «рождение мысли».**
```
Принцип тайминга:
Идея появляется → Пауза 1-2 сек → Доказательство появляется → Пауза 3 сек → Вывод
Не:
- Весь текст одновременно (нет драматургии)
- Слово за словом (раздражает)
- Быстро-быстро (нет времени осмыслить)
Да:
- Один блок за раз
- Пауза = время для осмысления
- Ключевое число = отдельный момент
```
#### Шаг 3.3: Speaker Notes as Script
**Не «заметки для спикера». А «сценарий спектакля».**
```
Формат speaker notes:
[СЛАЙД: Hero Slide — Главная мысль]
ГОВОРИТЬ:
«Представьте, что вы просыпаетесь утром и знаете: ваши дети будут жить в мире без
голода. Не через 100 лет. Через 10. Это не фантазия. Это план.»
ДЕЛАТЬ:
- Встать. Посмотреть в зал.
- Пауза 3 секунды после «без голода».
- Продолжить сидя.
ЧУВСТВОВАТЬ:
- Уверенность. Не энтузиазм. Уверенность.
ТАЙМИНГ:
- 30 секунд на слайд
- Не торопиться
```
#### Шаг 3.4: Export as Experience
**Не «формат файла». А «формат переживания».**
```
Форматы экспорта:
HTML (Performance) — для живой презентации
├── Animate.css / GSAP — тайминг
├── Спикер-ноты — встроены
├── Таймер — встроен
└── Формат: [name].html
PDF (Fallback) — для отправки
├── Без анимаций
├── Полные спикер-ноты
└── Формат: [name].pdf
PPTX (Draft) — для редактирования
├── Базовая структура
├── Текст и расположение
└── Формат: [name].pptx
```
---
## Пошаговый процесс создания
### Фаза 1: STORY DESIGN (15-20 минут)
```
1. Audience Archaeology → Карта аудитории
2. Narrative Strategy → Выбор стратегии
3. The Hook → Первые 30 секунд
4. Time-Budget Architecture → Архитектура времени
5. One Big Idea → Одна главная мысль
```
**Результат**: story-brief.md
### Фаза 2: CONTENT ENGINEERING (20-30 минут)
```
6. Slide Outline → Каркас слайдов
7. Action Titles → Заголовки-приговоры
8. Evidence Map → Доказательства к каждому слайду
9. Visual Triggers → Что показать, а не что сказать
10. Speaker Script → Сценарий спикакля
```
**Результат**: outline.md
### Фаза 3: VISUAL LANGUAGE (15-20 минут)
```
11. Design Soul → 7 слоёв визуальной идентичности
12. Composition Grammar → Типы слайдов
13. Typography Hierarchy → 7 уровней
14. Uniqueness Gate → Проверка на AI-дефолт
```
**Результат**: design-system.md
### Фаза 4: BUILD (30-40 минут)
```
15. HTML/CSS/JS → Код презентации
16. Animations → Тайминг и движение
17. Speaker Notes → Встроенные заметки
18. Timer → Встроенный таймер
```
**Результат**: presentation.html
### Фаза 5: POLISH & QA (10-15 минут)
```
19. Narrative Review → Проверка истории
20. Visual Review → Проверка дизайна
21. Delivery Review → Проверка подачи
22. Export → Финальные форматы
```
**Результат**: Финальная презентация
---
## Критерии мироизменяющей презентации
### Story Criteria
- [ ] Аудитория чувствует боль/страх/надежду (не просто понимает)
- [ ] Есть чёткий хук в первые 30 секунд
- [ ] Каждый слайд = одна мысль (не «и ещё вот это»)
- [ ] Финал = «One More Thing» (не «спасибо за внимание»)
- [ ] После презентации аудитория хочет ЧТО-ТО СДЕЛАТЬ
### Visual Criteria
- [ ] Если убрать логотип — понятно, ЧЬЯ это презентация
- [ ] Есть хотя бы один «момент для скриншота»
- [ ] Типографская иерархия ведёт глаз
- [ ] Нет AI-дефолтов ( generic charts, placeholder images )
- [ ] Design Soul согласован через все слайды
### Performance Criteria
- [ ] Время на слайд = время на осмысление
- [ ] Speaker notes = сценарий, а не конспект
- [ ] Анимации = рождение мысли, а не украшение
- [ ] Финал запоминается (не «вопросы?»)
- [ ] Есть план B (PDF на случай проблем)
---
## Пример: от идеи к мироизменяющей презентации
### Идея
«Мы сделали платформу для онлайн-образования»
### Story Design
- **Аудитория**: инвесторы, которые видели 100 таких платформ
- **Боль**: «ещё один edtech, который не выживет»
- **Стратегия**: Detective (Clue → Clue → REVELATION)
- **Hook**: «90% онлайн-курсов бросают после первой недели. Мы изменили эту статистику. Не лучше контентом. Лучше дизайном.»
- **One Big Idea**: «Образование должно быть как Netflix — ты не можешь остановиться.»
### Visual Language
- **Design Soul**: Чистота (белый + тёмно-синий) + Движение (плавные переходы) + Люди (реальные фото студентов)
- **Composition**: Hero Slide → Metrics (90% → 23%) → Split (до/после) → Quote (студент) → Reveal (как это работает) → One More Thing (запуск через 2 недели)
### Performance
- **Хук**: 60 секунд, встать, посмотреть в зал
- **Метрики**: появляются по одной, пауза 3 сек на каждую
- **Quote**: голос студента (аудио) на фоне
- **One More Thing**: «Мы запускаем через 2 недели. Вот как стать первым пользователем.»
---
## Контрольный лист перед финалом
```
□ История: Аудитория ЧУВСТВУЕТ, а не просто ПОНИМАЕТ
□ Время: Каждый слайд = время на осмысление
□ Дизайн: Есть «момент для скриншота»
□ Подача: Speaker notes = сценарий, а не конспект
□ Финал: «One More Thing», а не «вопросы?»
□ Экспорт: HTML (performance) + PDF (fallback)
□ Проверка: Uniqueness Gate пройден
```
---
## Философия (напоминание)
**Каждая презентация — это шанс изменить мир.**
Не потому что слайды красивые.
Не потому что данные убедительные.
А потому что **история заставляет людей действовать**.
Мы создаём не презентации.
Мы создаём **моменты**, после которых мир становится немного другим.