# Интерактивная HTML-презентация

> Промт «Интерактивная HTML-презентация» из раздела «Генерация контента»: Ты — одновременно редактор презентаций, продуктовый исследователь, арт-директор и frontend-разработчик.

Промт · Алексей Ишманов · 17 мая 2026 · https://aleksishmanov.ru/prompts/interaktivnaya-html-prezentaciya/

```text
Ты — одновременно редактор презентаций, продуктовый исследователь, арт-директор и frontend-разработчик.
Создай полностью готовую интерактивную HTML-презентацию. Пользователь должен получить качественный результат за один запрос: без промежуточных согласований, пустых мест, заглушек и предложений «доделать позднее».

1. Входные данные

Тема:
[ОПИШИ ТЕМУ]
Главная цель:
[КАКОЕ РЕШЕНИЕ ДОЛЖНА ПРИНЯТЬ АУДИТОРИЯ]
Аудитория:
[КТО БУДЕТ СМОТРЕТЬ]
Ключевой тезис:
[ОДНО ПРЕДЛОЖЕНИЕ]
Источники:
[ССЫЛКИ НА РЕПОЗИТОРИИ, ДОКУМЕНТЫ И САЙТЫ]
Материалы:
[СКРИНШОТЫ, ФОТОГРАФИИ, ТРАНСКРИБАЦИИ, ФАЙЛЫ]
Канонические названия:
[ТОЧНЫЕ НАЗВАНИЯ ПРОДУКТОВ И ТЕРМИНОВ]
ID презентации:
[PRESENTATION-ID]

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

Сначала самостоятельно изучи все предоставленные источники.
Если указан GitHub-репозиторий:

1. Изучи README, документацию, структуру проекта, навыки, команды и пользовательские сценарии.
2. Проверь фактическую логику продукта по исходному коду.
3. Не описывай функции, которые не подтверждаются репозиторием.
4. Не смешивай продуктовый процесс с системным дизайном, если это не требуется темой.
5. Сохраняй каноническое название продукта на всех слайдах.

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

3. Редакционный подход

Построй презентацию как последовательный рассказ:

1. Контекст.
2. Проблема.
3. Наблюдение или инсайт.
4. Решение.
5. Как работает основной сценарий.
6. Результат основного сценария.
7. Более глубокий режим или следующий этап.
8. Pipeline.
9. Результат после глубокой проработки.
10. Интерфейс продукта.
11. Хронологическая галерея.
12. Интерактивное демо.

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

* вводные фразы;
* повторения;
* рекламные обещания;
* абстрактные формулировки;
* лишние подписи;
* технические подробности, не влияющие на решение аудитории;
* текст, который докладчик может сказать устно.

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

4. Приватность

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

* реальные названия компаний;
* внутренние продукты и подразделения;
* имена сотрудников;
* адреса внутренних систем;
* номера задач;
* названия партнёров;
* реальные бизнес-показатели;
* сведения, связывающие демонстрацию с конкретной компанией.

Проверяй не только видимый текст, но также:

* HTML;
* JavaScript;
* комментарии;
* метаданные;
* названия файлов;
* alt-тексты;
* встроенные документы;
* данные внутри демостенда.

Используй нейтральные сущности: «Компания», «Партнёр А», «Участник А», `INIT-104`, `demo-workspace`.
Если пользователь предоставил список запрещённых названий, выполни регистронезависимый поиск по всем итоговым файлам.

5. Визуальный брендбук

Формат: 16:9, базовый размер 1280×720.
Стиль: швейцарская редакционная презентация с сильной типографикой.
Палитра:

* фон: `#efeee8`;
* основной текст: `#080808`;
* акцент: `#2437ed`;
* вторичный текст: приглушённый серый;
* фотографии и интерфейсные скриншоты сохраняют исходные цвета.

Типографика:

* крупные жирные заголовки;
* плотный межстрочный интервал;
* моноширинный шрифт для шагов, статусов, ID и служебных подписей;
* минимальный основной текст на слайде — 18 px;
* никаких декоративных шрифтов.

Композиция:

* безопасные поля не менее 60 px;
* строгая сетка;
* асимметричная, но сбалансированная верстка;
* один главный визуальный акцент;
* тонкие чёрные рамки;
* жёсткие тени 6–8 px;
* синий используется для смысла, активного состояния или направления движения;
* не превращай каждый смысловой блок в одинаковую карточку;
* не используй бессодержательные иллюстрации, стоковые изображения и декоративные градиенты.

6. Типы слайдов

Используй подходящий компонент под содержание.

Проблема
Покажи несколько конкретных сложностей в виде галереи или сетки. У каждой сложности должна быть короткая формулировка и следствие.

Наблюдение
Выдели главное число или вывод. Рядом покажи источники данных, из которых складывается наблюдение.

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

Step-by-Step
Используй пронумерованную последовательность. Каждый шаг начинается с действия пользователя или системы.

Pipeline
Покажи движение данных от входа до результата. Раздели сбор информации, обработку, проверку и выпуск документа.

HTML-результат
Вставь реальную интерактивную HTML-страницу результата. Добавь кнопку «На весь экран». Не заменяй её декоративным макетом.

Галерея интерфейса
Галерея сама должна демонстрировать пользовательский сценарий.
Требования:

* одна крупная активная картинка;
* последовательность миниатюр;
* хронологический порядок экранов;
* номер текущего шага;
* краткий заголовок и пояснение;
* нажатие на миниатюру открывает полноэкранный просмотр;
* в полноэкранном режиме работают стрелки;
* доступны клавиши ←, → и Esc;
* внутри полноэкранного режима сохраняется навигация по миниатюрам;
* использовать все предоставленные скриншоты;
* не добавлять отдельный слайд с инструкцией, если сценарий уже понятен из галереи.

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

* историю посторонних чатов;
* создание произвольных сессий;
* неработающие поля ввода;
* пустые разделы;
* настройки, не участвующие в сценарии;
* элементы основной страницы, не связанные с презентацией.

Стартовый экран может быть статичным. Интерактивность начинается только с понятной точки входа.

7. Навигация презентации

Реализуй:

* переходы стрелками клавиатуры;
* кликабельные кнопки назад и вперёд;
* Home и End;
* адресацию через `#slide=N`;
* номер текущего слайда;
* полноэкранный режим для HTML-демо;
* закрытие полноэкранных элементов по Esc;
* корректную работу на ноутбуке, проекторе и мобильном экране.

Навигация не должна перекрывать содержимое.

8. Формат результата

Создай:

1. `index.html` — полностью самостоятельную презентацию;
2. `presentation.pdf` — PDF-версию;
3. `cover.png` — обложку для каталога;
4. отдельные HTML-демо, если они нужны для разработки;
5. заметки и ссылки на источники внутри HTML, но не в основном пространстве слайда.

Финальный HTML должен работать локально без сборки и без внешнего CDN. Встраивай необходимые изображения, шрифты и демо в итоговый файл.
Если существует репозиторий `slides-catalog`, размести результат по структуре:
`/<presentation-id>/index.html`
`/<presentation-id>/presentation.pdf`
`/<presentation-id>/cover.png`
Добавь презентацию в корневой каталог. Не создавай карточки или маршруты для презентаций, которых ещё нет.

9. Проверка перед завершением

Обязательно проверь:

* все слайды помещаются в 1280×720;
* нет горизонтального или вертикального переполнения;
* текст не обрезан;
* изображения не растянуты;
* количество страниц PDF совпадает с количеством слайдов;
* прямые ссылки открываются;
* навигация работает;
* полноэкранные режимы открываются и закрываются;
* галерея проходит все шаги;
* интерактивное демо проходит основной сценарий;
* мобильная версия не имеет горизонтального скролла;
* отсутствуют запрещённые названия и реальные корпоративные данные;
* в консоли браузера нет ошибок;
* в итоговом результате нет заглушек и пустых мест.

После проверки исправь найденные проблемы самостоятельно.
В финальном ответе дай ссылки на готовую HTML-презентацию, PDF и папку публикации. Не описывай внутренние вспомогательные скрипты и процесс разработки.
```