Кадрируем и правим — как slides-grab упрощает верстку презентаций с помощью AI
Создание презентаций — традиционная головная боль для большинства инженеров. Когда нужно быстро собрать питч, доклад для митапа или квартальный отчет, приходится выбирать из двух вариантов. Первый — возиться в тяжеловесных редакторах вроде PowerPoint или Figma. Второй — попросить LLM сгенерировать HTML-код со слайдами.
Второй путь выглядит заманчиво, но быстро упирается в рутину. Если вам нужно поменять шрифт в заголовке или сдвинуть картинку на пару пикселей влево, приходится либо выискивать нужный <div> руками, либо снова писать длинный промпт. В ответ нейросеть нередко переписывает весь слайд и ломает верстку в соседних блоках.
Проект slides-grab предлагает другое решение. Это локальный инструмент, который совмещает визуальный редактор в браузере, валидатор верстки и обертку для подключения AI-агентов.
В чем идея проекта
Авторы slides-grab исходили из простого факта: языковые модели отлично верстают на чистом HTML и CSS. Главная проблема заключается не в генерации кода, а в передаче контекста. Как объяснить модели, какой именно элемент на слайде вам не нравится?
Инструмент решает эту задачу с помощью выделения областей. Вы запускаете локальный редактор, видите слайд прямо в браузере и мышкой выделяете нужный блок. Редактор формирует точный контекст для AI-агента — например, для Claude Code или OpenAI Codex. Вы пишете: «сделай этот блок темнее и добавь отступ», а агент меняет только соответствующий кусок HTML.
Мелкую правку вроде опечатки или размера текста можно сделать прямо в браузере вручную. Двигать теги в IDE при этом не придется.
Как устроена работа со слайдами
Все слайды хранятся в рабочей директории в виде отдельных файлов slide-01.html, slide-02.html и так далее. Медиафайлы лежат рядом в папке assets/. Вы не привязаны к вендорским форматам или закрытым облачным сервисам. Если инструмент завтра перестанет поддерживаться, у вас останется обычный веб-код.
Вот из чего состоит основной цикл работы с проектом:
- Генерация структуры и стиля. Агент создает план презентации и применяет одну из готовых тем. Инструмент поставляется с каталогом из 95 дизайн-систем. Выбрать подходящую можно через локальный галерейный просмотрщик
slides-grab preview-styles. - Визуальное редактирование. Вы открываете интерфейс через
slides-grab edit, правите опечатки вручную или просите агента изменить конкретный выделенный фрагмент. - Проверка качества. Команда
slides-grab validateзапускает Chromium через Playwright в фоновом режиме. Линтер проверяет, нет ли битых путей к изображениям, внешних ссылок или ошибочных CSS-свойств. - Экспорт. Результат можно скомпилировать в PDF, картинки или презентацию PowerPoint.
Локальные ресурсы и работа с медиа
Обычно создание презентаций упирается в поиск подходящих иллюстраций и диаграмм. В slides-grab эти сценарии закрываются прямо из консоли.
Для генерации картинок утилита по умолчанию использует модуль codex-imagen. Он задействует локальную авторизацию из Codex CLI, поэтому вам даже не потребуется указывать отдельный API-ключ OpenAI. Достаточно выполнить команду в терминале:
slides-grab image --slides-dir decks/my-deck --prompt "Минималистичный векторный график роста метрик"
Сгенерированный файл сразу сохраняется в папку assets/, а консоль возвращает относительный путь, который легко вставить в HTML. Если нужны сторонние провайдеры, можно переключиться на стандартный OpenAI API или Google Gemini.
С видео и диаграммами ситуация аналогичная:
- Команда
slides-grab fetch-videoскачивает видео с YouTube с помощьюyt-dlpи сохраняет его локально. - Команда
slides-grab tldrawпревращает схемы из формата.tldrв чистое SVG-изображение, подогнанное под размер слайда.
Под капотом и нюансы экспорта
Инструмент написан на JavaScript и работает на Node.js версии 20 и выше. Серверная часть поднимает локальный сервер для редактора и связывается с браузером через Playwright.
Интересно реализован импорт чужих презентаций. Если у вас есть готовый корпоративный PPTX-файл или брендбук, команда slides-grab import-template разбирает его на цвета, шрифты и сетки, формируя JSON-конфиг. После этого AI-агент использует эти данные как ориентир для новых слайдов.
Что касается экспорта, то основной и самый надежный вариант — это PDF или PNG. Команда slides-grab pdf по умолчанию растеризует кадры в высоком разрешении 4K, сохраняя исходную верстку до пикселя. Для текстовых PDF с возможностью поиска есть флаг --mode print.
А вот к выгрузке в PPTX и Figma стоит относиться с осторожностью. В документации разработчики честно помечают конвертацию в PowerPoint как экспериментальную функцию. При выборе текстового движка (--engine text) инструмент пытается перевести DOM-дерево в нативные элементы PowerPoint, но на сложных CSS-сетках верстка может поплыть.
Как попробовать в деле
Для установки достаточно установить пакет через npm и докинуть браузер Chromium для Playwright:
npm install slides-grab
npx playwright install chromium
npx slides-grab install-skills --target all --scope user
Команда install-skills регистрирует навыки утилиты в ваших локальных агентах Claude Code или Codex. Для разработки собственного набора слайдов клонировать репозиторий не требуется.
Кому пригодится проект
slides-grab отлично подойдет разработчикам, фаундерам и техническим лидам, которым надоело тратить часы на выравнивание блоков в графических редакторах.
Главные плюсы инструмента — автономность и точечный контекст при работе с LLM. Вы держите всю презентацию в Git в виде читаемого HTML, не зависите от сторонних SaaS-платформ и легко вносите правки голосом или мышкой.
Из минусов — неидеальный экспорт в формат PPTX и зависимость встроенной генерации картинок от непубличных эндпоинтов Codex, которые со временем могут измениться. Тем не менее, для сборки аккуратных слайдов с последующим экспортом в PDF проект выглядит крайне практичным решением.
