раздел 06

Шпаргалка

Всё главное про презентации в HTML коротко.

Что
Один html-файл: стили, слайды-секции, скрипт навигации, масштаб холста 1920x1080 под окно. Открывается в любом браузере.
Зачем
Агент собирает слайды из тезисов за минуты, правки одной фразой, схемы кодом, версии в git. Без PowerPoint и без сервиса.
Как
Тезисы в md-файл, ТЗ по шаблону, сначала план слайдов текстом, потом сборка, правки по номерам, проверка в браузере после каждой.

Чек-лист ТЗ агенту

  • Цель и аудитория одной строкой.
  • Длительность и число слайдов.
  • Структура: список слайдов с заголовками.
  • Тон и стиль: палитра в hex, один шрифт, тёмная или светлая схема.
  • Один файл, всё внутри, без внешних библиотек и шрифтов из сети.
  • 16:9, холст 1920x1080, масштабирование под окно.
  • Навигация: стрелки, пробел, клик, свайп, Home и End, счётчик.
  • Картинки только inline-SVG или data-URI, схемы рисовать SVG, без эмодзи.
  • Шрифт не меньше 24px, не больше 6 строк на слайде.
  • Цвета и шрифт в переменных CSS.
  • Режим печати: слайд на страницу.
  • Сначала план текстом, код после подтверждения.
  • Имя файла и папка.

Чек-лист проверки перед показом

  • Открыл файл на том компьютере, с которого показываю.
  • Пролистал до последнего слайда, счётчик совпадает с планом.
  • Сузил окно до половины: холст уменьшился целиком, ничего не обрезано.
  • Полноэкранный режим включается, панели браузера пропали.
  • Текст читается с трёх метров от экрана.
  • Нет эмодзи, нет битых картинок, нет пустых рамок.
  • Отключил интернет и обновил страницу: ничего не изменилось.
  • Напечатал в PDF: слайд на страницу, фон на месте.
  • Версия сохранена в git или под понятным именем.

Промпты-заготовки

Сборка из файла:

Собери презентацию в HTML из deck-notes.md: [N] слайдов для [аудитория],
цель [что должны сделать]. Технические требования из AGENTS.md / CLAUDE.md.
Сначала план слайдов текстом, код после моего подтверждения.
Сохрани в presentations/[имя]-v1.html.

Правки пачкой:

Правки: слайд 3 - сократи до трёх тезисов; слайд 5 - список замени схемой
inline-SVG из блоков и стрелок; слайд 8 - цифры крупнее, акцентным цветом;
слайд 11 - убери. Остальное не трогай. После правки покажи, что изменил.

Плотность текста:

Пройди по всем слайдам: где больше 6 строк - сократи до тезисов, не уменьшая
шрифт. Если не влезает - раздели на два слайда и перечисли, какие.

Режим печати:

Добавь @media print: все секции видимы, каждая на своей странице, transform
снят, @page 1920px 1080px без полей, print-color-adjust: exact.
Навигацию и счётчик скрыть.

Глоссарий

  • HTML - язык разметки веб-страниц. Презентация в HTML - веб-страница, где каждый слайд - отдельный блок.
  • Секция (section) - блок разметки, в котором лежит один слайд. Агент считает слайды по секциям.
  • Переменные CSS - именованные значения вроде цвета акцента, объявленные в одном месте файла. Меняете одну строку - меняется везде.
  • inline-SVG - векторная картинка, записанная в html кодом. Масштабируется без потерь, правится словами.
  • data-URI - картинка, встроенная в файл строкой base64. Отдельный файл не нужен, но размер растёт.
  • 16:9 - пропорции слайда, стандарт проекторов и экранов. Холст 1920x1080 - тот же 16:9 в пикселях.
  • transform: scale - приём, которым холст целиком подгоняется под размер окна.
  • Режим печати (@media print) - стили, которые браузер применяет при печати: слайд на страницу, фоны сохранить.
  • AGENTS.md / CLAUDE.md - файл правил агента в проекте для постоянных требований (в Claude Code тот же файл называется CLAUDE.md).

Куда дальше