open-slide — открытый фреймворк презентаций, спроектированный под ИИ-агентов. Вы описываете презентацию обычными словами, кодинг-агент пишет слайды на React, а open-slide берёт на себя показ, масштабирование и экспорт. В версии 2.0 появились визуальный редактор и экспорт в редактируемый PowerPoint — черновик собирает агент, а финальные правки можно сделать руками.

Что это

open-slide — это среда выполнения для слайдов, а не редактор презентаций. Каждая страница — произвольный React-компонент на фиксированном холсте 1920×1080, а не элемент ограниченного конструктора. Среда отвечает за то, чтобы слайд одинаково выглядел на телефоне, мониторе и проекторе, и за навигацию, hot reload и режим показа.

Слайды пишет кодинг-агент: Claude Code, Codex или Cursor. В заготовке проекта лежат готовые скиллы — /create-slide собирает презентацию целиком, а /slide-authoring описывает правила холста, типографики и палитры. Вы формулируете задачу, агент пишет код, среда показывает результат.

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

Ключевое правило: open-slide — не конструктор слайдов, а среда выполнения. Агент пишет слайды как React-код, а фреймворк отвечает за их показ, навигацию и экспорт.

Зачем нужно

  • Переложить сборку презентации на агента — описать задачу словами и получить готовую колоду, не открывая PowerPoint.
  • Править мелочи руками — визуальный редактор меняет текст, шрифт и цвет прямо на слайде, без нового объяснения в чате.
  • Передавать результат в привычном формате — экспорт в редактируемый PPTX, PDF или статичный HTML.
  • Не ограничивать дизайн шаблоном — слайды это React-код, поэтому можно собрать любой макет, а не выбирать из готовых.

Как устроено

ЭлементНазначение
Холст 1920×1080фиксированное полотно, на котором рендерится каждый слайд; масштабируется под любой экран
Слайды (React-компоненты)каждая страница — произвольный компонент, а не ограниченный шаблон
Среда выполнениямасштабирование, навигация, hot reload, режим показа и экспорт
Визуальный редакторклик по элементу открывает панель свойств: текст, шрифт, цвет, картинка
Комментарии @slide-commentзаметка на элементе, которую агент применяет командой /apply-comments
ЭкспортHTML, PDF и PPTX; в 2.0 PPTX экспортируется как редактируемые текстовые блоки, фигуры и изображения

Скиллы /create-slide и /slide-authoring дают агенту готовый сценарий работы, а панель ассетов управляет изображениями, видео и шрифтами колоды. Через встроенный каталог svgl можно вставить любой фирменный логотип из полутора тысяч готовых SVG.

Когда использовать

СитуацияПодходит / не подходитПочему
Презентация для выступленияподходитагент собирает колоду, режим показа даёт заметки докладчика и таймер
Результат уходит коллеге или заказчикуподходитэкспорт в редактируемый PPTX позволяет продолжить работу в PowerPoint
Нужен нестандартный дизайнподходитслайды — это React, а не шаблон, поэтому макет можно собрать любой
Разовые простые слайдыне подходитбыстрее собрать в привычном редакторе, чем настраивать агента и стек
Команда без кодинг-агента и Reactне подходитфреймворк рассчитан на связку с агентом, который пишет код

Пример

Создание колоды начинается с одной команды:

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

Дальше вы описываете задачу агенту, а он пишет слайды в slides//index.tsx. Например:

Сделай презентацию на 8 слайдов о продукте: обложка, проблема, решение, три слайда с возможностями, итог.

Среда сразу показывает результат на холсте. Мелкие правки — уменьшить заголовок или поменять цвет — делаются в визуальном редакторе кликом по элементу. Когда колода готова, её выгружают в PPTX, PDF или HTML одной командой сборки.

open-slide стоит рассматривать не как очередной редактор презентаций, а как пример разделения труда между агентом и человеком. Агент берёт на себя тяжёлую часть — структуру, наполнение и вёрстку, а человеку остаются мелкие правки в визуальном редакторе и передача результата дальше в привычном формате. Редактируемый PPTX в этой схеме — не просто функция экспорта, а способ вернуть презентацию в тот рабочий процесс, где с ней умеют обращаться все остальные.

Ограничения

Ограничения

Технические границы, которые стоит учесть до старта.

Нужен кодинг-агент и знание React — open-slide не собирает слайды сам — он даёт агенту среду, в которой тот пишет код.

Без настроенного кодинг-агента и понимания React инструмент не работает.

Версия 2.0 пока в бете — Визуальный редактор и редактируемый PPTX вышли в версии 2.0, которая на момент публикации находится в статусе beta.

Возможны недоработки и изменение поведения между релизами.

Требования к окружению — Вторая версия требует Node.js 20.19 и выше и работает на свежем стеке React 19 и Vite 8.

Для перехода с первой версии нужна миграция.

Экспорт в PDF не везде доступен — По документации, экспорт в PDF не поддерживается в Safari.

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

Экспорт однонаправленный — Правки, внесённые в выгруженном PPTX, не возвращаются обратно в React-код.

После экспорта источником остаётся код, а не PowerPoint-файл.

Антипаттерны

Антипаттерны

Ошибочные ходы, которые приводят к лишней работе или расхождению версий.

Ждать от open-slide полноценный редактор уровня PowerPoint — Это среда выполнения для агента, а визуальный редактор — дополнение для мелких правок.

Сложную работу делает агент, а не человек в интерфейсе.

Править каждый пустяк через агента — Для «уменьшить заголовок» или «поменять цвет» есть визуальный редактор.

Гонять агента ради каждой мелочи дольше, чем поправить самому.

Считать выгруженный PPTX источником правды — Экспорт однонаправленный: изменения в PowerPoint не попадают обратно в код.

Если колоду будут править дальше, решите заранее, где живёт каноническая версия.

Запускать колоду без проверки режима показа — Слайды стоит прогнать в режиме показа и на целевом экране.

Фиксированный холст помогает, но не отменяет проверку на реальном вьюпорте.

Чеклист

Чеклист

Проверяемые действия перед запуском и сдачей презентации.

Кодинг-агент настроен

— Claude Code, Codex или Cursor готов к работе в проекте и умеет читать скиллы open-slide.

Окружение соответствует требованиям

— Установлены Node.js 20.19 и выше и пакетный менеджер проекта (pnpm).

Задача описана словами

— Сформулированы тема, количество слайдов и нужный тон — агент получает полное задание.

Черновик проверен в режиме показа

— Колода пройдена от начала до конца на целевом экране, проверены анимации и масштаб.

Формат передачи определён — Выбрано, в каком виде результат уйдёт дальше:

PPTX, PDF или статичный HTML.

Каноническая версия зафиксирована

— Понятно, где живёт источник правды — в React-коде или в выгруженном файле.

Ссылки

Ссылки

По теме

По теме