раздел 03

Итерации и правки

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

1
Открыть файл в браузере
Двойной клик по html. Пролистать до конца стрелками, не пропуская ни одного слайда.
2
Записать правки по номерам
Слайд 3: сократить. Слайд 7: цифры крупнее. Слайд 9: заменить список схемой. Пять-семь пунктов за раз.
3
Отдать агенту одним сообщением
Все правки списком. Агент правит нужные секции, остальное не трогает.
4
Обновить страницу и проверить
F5 в браузере. Снова пролистать, сузить окно, посмотреть, что ничего не выехало.
5
Сохранить версию
Если стало лучше - коммит в git или копия v2. Если хуже - откатиться и переформулировать.

Правки по номеру слайда

Агент считает секции по порядку, так что «слайд 6» для него однозначен. Формулируйте правку как редактор: что именно и как. «Слайд 6: оставь три пункта из пяти, убери про интеграции и сроки» лучше, чем «слайд 6 перегружен».

Несколько правок за раз - нормально. Двадцать за раз - агент потеряется в середине. Оптимум пять-семь.

Единый стиль через переменные CSS

Если агент сразу вынес цвета и шрифт в переменные (вы просили об этом в ТЗ), смена палитры - одна правка. Если не вынес, попросите это первой правкой, иначе каждая смена цвета будет ловлей двадцати мест по файлу.

Вынеси все цвета, шрифт и базовые размеры (заголовок, текст, отступы)
в переменные CSS в :root. Ничего визуально не меняй, только рефакторинг.
Потом покажи список переменных.

Дальше «поменяй акцент на #f59e0b» правится за секунду и точно везде.

Иллюстрации: рисованные SVG

Просите рисованные inline-SVG, а не эмодзи и не стоковые картинки из сети. Причины практические. Эмодзи на разных системах выглядят по-разному и на проекторе смотрятся как детская книжка. Картинки по ссылке из интернета не откроются офлайн и исчезнут, когда сайт-источник их удалит. А SVG рисуется кодом, масштабируется без потерь, красится в цвета палитры и правится словами: «стрелку сделай толще».

Что агент рисует хорошо: схемы процессов из блоков и стрелок, воронки, таймлайны, простые иконки, сравнения «было/стало», столбчатые диаграммы. Что рисует плохо: реалистичные предметы, людей, сложные сцены. Для последнего лучше сгенерировать картинку отдельно (курс Генерация изображений) и встроить как data-URI.

Слайд 5: вместо списка из четырёх шагов нарисуй схему inline-SVG:
четыре блока слева направо, стрелки между ними, подпись в каждом.
Цвета из переменных палитры. Без эмодзи и без внешних картинок.

Таблицы и графики кодом

Таблица - обычная HTML-таблица, только крупная и без лишних линий. Простой график - SVG-бары: столбики с подписями, высота пропорциональна значению. Агент это делает за одну итерацию, и цифры потом правятся текстом, а не перерисовкой в стороннем инструменте.

Слайд 8: столбчатая диаграмма SVG, пять столбцов: 2022 - 120, 2023 - 180,
2024 - 260, 2025 - 340, 2026 - 410. Значение над каждым столбцом,
последний столбец акцентным цветом. Ось Y не нужна.

Проверка в браузере после каждой правки

Это обязательная часть цикла, а не финальный шаг. Агент не видит результат своего кода. Он может закрыть тег не там, и половина слайдов пропадёт, а в чате будет «готово». Открывайте файл, листайте до последнего слайда, потом сужайте окно до половины экрана: холст должен уменьшиться целиком, а не обрезаться.

Можно попросить агента самого проверить файл в браузере, если у него есть такой инструмент (например, Playwright в IDE). Тогда он откроет страницу, прощёлкает слайды и посмотрит консоль на ошибки. Как настроить и что просить - в курсе Проверка результата.

Открой presentations/pilot-budget-v1.html в браузере, пройди все слайды
стрелкой вправо, на каждом сделай скриншот 1280x720. Проверь консоль
на ошибки. Отчёт: список слайдов, где текст выходит за границы холста.

Контроль плотности текста

Самая частая правка. Агент уважает исходник и тащит на слайд целые абзацы. Правило из ТЗ - не больше шести строк - нужно повторять при правках, потому что при добавлении содержимого агент о нём забывает.

Пройди по всем слайдам. Где текста больше 6 строк - сократи до тезисов,
одна мысль на строку. Если сократить без потери смысла нельзя -
раздели на два слайда и скажи мне, какие разделил.

Сохранение версий

Два способа. Простой: копии файла deck-v1.html, deck-v2.html, deck-final.html. Правильный: git, где каждая версия - коммит с понятным сообщением «сократил слайды 3-5, добавил график на 8». Откатиться на любую версию можно за секунду, и не копится папка из двенадцати файлов с «final-final-2». Как это делать без терминала и страха - в курсе Основы git.

Промпт для агента, который сам ведёт версии:

Перед каждой правкой презентации делай git commit текущего состояния
с сообщением, что именно изменилось. После правки - ещё один коммит.

Дальше - как показать презентацию с проектора, отдать файлом и распечатать в PDF.