Как превратить AI-агента в верстальщика слайдов с open-slide

Каждый раз, когда нужно собрать презентацию для митапа или внутреннего созвона, я ловлю себя на прокрастинации. В PowerPoint и Google Slides возиться со шрифтами и выравниванием блоков скучно. В Markdown-инструментах вроде Marp или Slidev верстать проще, но если хочется нестандартной анимации, интерактивного графика или аккуратной плашки, разметки быстро начинает не хватать.

Казалось бы, нейросети сейчас отлично пишут React-код. Но если попросить Claude Code или Cursor сделать презентацию с нуля, они напишут десяток разрозненных компонентов, забудут про масштабирование экрана, запутаются в роутинге и оставят вас один на один с багами верстки.

Проект open-slide решает именно эту задачу. Это каркас для презентаций, спроектированный специально для работы в паре с AI-агентами.

В чем идея проекта

Создатель open-slide рассудил просто: слайды — это визуальный код, а современные агенты пишут код быстро и без жалоб. Проблема лишь в среде исполнения.

Вместо изобретения собственного урезанного языка разметки (DSL), open-slide дает агенту обычный React и берет на себя всю рутину. Фреймворк фиксирует холст в разрешении 1920 × 1080 пикселей, обеспечивает адаптивное масштабирование под любой монитор, настраивает переключение между экранами, горячую перезагрузку и режим докладчика.

Агенту остается только генерировать компоненты по четким правилам разметки, не отвлекаясь на инфраструктуру.

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

После инициализации в проекте уже лежат готовые сценарии под Claude Code и системные инструкции, объясняющие модели структуру холста, типографику и палитру.

Встроенный цикл правок через инспектор

Обычно работа с AI над визуалом превращается в бесконечные попытки объяснить на словах: «подвинь вот ту серую кнопку на третьем слайде чуть левее заголовка». Модель ошибается, меняет не тот файл, и диалог затягивается.

В open-slide встроен визуальный инспектор прямо в dev-сервер:

Вы открываете слайды в браузере и кликаете на любой элемент.
В появившемся поле пишете комментарий: «сделай фон темнее», «уменьши размер заголовка» или «добавь отступ снизу».
Фреймворк сохраняет эти заметки прямо в исходном коде в виде меток @slide-comment.
Вы вызываете команду /apply-comments в терминале с агентом.
Агент считывает метки, вносит правки в JSX, удаляет комментарии и перезагружает страницу.

Такой цикл правок экономит массу нервов. Вы выступаете в роли арт-директора, который оставляет стикеры на макете, пока нейросеть правит компоненты.

Поиск логотипов и работа с ассетами

Если вы делаете питч или технический доклад, половина времени уходит на поиск SVG-логотипов технологий. В open-slide встроен каталог svgl. Достаточно открыть панель ассетов, вбить название библиотеки или сервиса и вставить векторную иконку сразу в код слайда.

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

Экспорт и демонстрация

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

Когда презентация готова, ее можно собрать в полностью статичный бандл:

Сгенерировать автономный HTML-файл, который открывается без сервера и загружается на Vercel, Netlify или Cloudflare Pages.
Экспортировать колоду в PDF для печати или отправки организаторам конференции.

Если презентаций становится много, встроенный менеджер колод раскладывает их по папкам с эмодзи и поддерживает сортировку простым перетаскиванием.

Как устроен репозиторий

Под капотом open-slide представляет собой монорепозиторий на базе pnpm и Turborepo:

Пакет @open-slide/core содержит основной рантайм, движок масштабирования холста, инспектор правок, плагин для Vite и CLI-интерфейс.
Пакет @open-slide/cli отвечает за инициализацию новых проектов, пряча конфиги сборщика внутри ядра, чтобы не захламлять рабочее дерево файлов.
Внутри лежит демка apps/demo, на которой автор тестирует новые релизы.

Стек полностью написан на TypeScript, для линтинга и форматирования используется быстрый Biome, а лицензия у проекта — свободный MIT.

Кому пригодится проект

Если вы привыкли писать презентации только мышкой в Figma или Keynote, переходить на текстовые промпты может быть непривычно. Но для разработчиков, регулярно выступающих с докладами и уже использующих Claude Code или Cursor в ежедневной работе, open-slide может стать отличной альтернативой привычным слайд-движкам.

Вы получаете полную свободу React-экосистемы: можно встроить интерактивную Three.js-сцену, рабочий редактор кода Monaco или график на Recharts, доверив черновую верстку нейросети.