Презентация по слайдам вёрсткой в HTML

Текст

Промт для генерации презентации

Дополнительный пример, по слайдам урока: в видео его нет. Промт со слайда урока «Скопируйте себе», дословно. Своё — в [квадратных скобках]:

Ты собираешь слайды презентации вёрсткой в HTML — по одному файлу на слайд.
Размер. Ровно 1920×1080 px, в CSS обязательно @page { size: 13.3333in 7.5in; margin: 0 }. Поля 120 px слева и справа.
Стиль. Фон чёрный #000. Заголовок — Oswald 700, 82 px, белый, слева сверху. Текст — Montserrat. Карточки #242424, радиус 26 px, карточка-вывод #3A3A3A. Заголовок в карточке 28–36 px белым, пояснение 20–22 px цветом #A8A8A8. Стрелки и линии #8C8C8C, толщина 2.4. Жёлтый #E8B84B — только в иконках.
Правила. Схемы, стрелки и иконки рисуй вёрсткой и SVG, а не картинкой: каждый элемент должен правиться словами. Никаких эмодзи. Ничего мельче 20 px. Карточки в одном ряду — одной высоты.
Слайд. Тема: [укажите тему]. На слайде: [перечислите 3–5 блоков].
Порядок. Сначала отрендери превью и покажи мне картинку:
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot="превью.png" --window-size=1920,1080 slide.html
Правки я даю по превью. Собирай слайды в .pptx только после моего «ок».

Строка с Google Chrome — это команда, она часть промта: по ней Claude делает картинку-превью. На Windows путь к Chrome другой, обычно C:\Program Files\Google\Chrome\Application\chrome.exe, — Claude подставит его сам, если написать «у меня Windows».

В наших слайдах заголовок набран Oswald обычного начертания. Хотите так же — напишите в промте «Oswald 400» вместо «Oswald 700».

Как заполнены скобки для наших слайдов

Меняется только строка «Слайд». Всё остальное — одно и то же для всей презентации, поэтому слайды выходят в едином стиле.

01 Расширение PowerPoint

Слайд. Тема: почему расширение Claude для PowerPoint неудобно. На слайде: четыре карточки с иконками — «Медленно», «Ошибки в вёрстке», «Правки только словами», «Нет контроля над стилем», у каждой одна строка пояснения; внизу карточка-вывод: «Поэтому презентацию делаем не расширением, а инструментом».

02 Схема со стрелками

Слайд. Тема: как заставить Claude делать презентацию. На слайде: цепочка из пяти карточек со стрелками — «Задача словами» → «Claude верстает HTML 1920×1080» → «Превью PNG» → «Правки по картинке» → «Сборка файла: PPTX, PDF или HTML»; пунктирная стрелка назад от «Правок» к «Claude верстает» с подписью «возвращаемся, пока картинка не устроит»; внизу строка «Правки идут по картинке, а не вслепую».

03 Три формата

Слайд. Тема: генерация презентации прямо в Claude, три формата на выходе. На слайде: три карточки с иконками — PDF, PPTX, HTML; у каждой плюс белым и минус серым; внизу карточка-вывод: «Показываете сами — HTML. Отдаёте на правку — PPTX. Отдаёте, чтобы не правили, — PDF».

04 Техника безопасности

Слайд. Тема: техника безопасности, когда Claude работает с файлами. На слайде: крупная цитата «Моя презентация удалилась за 15 минут до выступления. И это сделал Claude»; четыре карточки — «Делаем копии», «Сохраняемся», «Дал задачу — пошёл погулять», «Не работаем вдвоём над одним файлом»; внизу строка «Claude умеет удалять файлы. Границы ставите вы».

Если PowerPoint пришёл картинками

Первую сборку Claude сделал неудачно: вставил каждый слайд в PowerPoint целиком картинкой, и править его было нельзя. Павел ответил так (дословно):

Я открыл файлы, проверил, но слушай, умник: а ты можешь делать, чтобы в PowerPointе сразу все эти элементы были редактируемы? Потому что ты их тупо вставил в картинку, но не бредли. Это нужно переделать. Делай новую версию.

После этого Claude собрал слайды живыми фигурами: карточка — фигура, текст — текстовое поле, стрелка — линия. Так собраны и наши слайды: любой блок в PowerPoint можно подвинуть мышкой.

Готовые слайды в виде картинок — в гайде урока, раздел «Слайды по промту урока». Файлы .pptx и .pdf получаются тем же промтом.

Как Павел ставил задачу на всю презентацию

Первое сообщение того чата, дословно. Обратите внимание: Claude дан доступ только к одному файлу — это техника безопасности из урока.

[файл презентации].pptx

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

У нас уже есть твоим скилом, который позволяет нам это делать. Для начала мы с тобой будем делать их в формате, может быть, HTML или PDF. Ты мне будешь их показывать, дальше я буду согласовывать.

Дальше наша задача сделать все слайды для этой презентации на выходе в формате PowerPoint. То есть внутрь этого файла нужно, чтобы ты будешь это всё вставлять, либо делал отдельные презентации в PowerPoint, и я оттуда переносил все необходимые файлы.