← Назад в журнал

Slidev: темы, примеры и как экспортировать в PowerPoint

Slidev — это открытый инструмент презентаций для разработчиков с 47,6k звёзд на GitHub: вы пишете слайды на Markdown со встроенными Vue-компонентами и показываете их прямо в браузере. Перед вами честный разбор: как устроены темы и примеры, как на самом деле ведёт себя экспорт в PDF и PowerPoint, как он смотрится на фоне Marp и reveal.js и где здесь место для Agent-Native Design Workspace.

Slidev: темы, примеры и как экспортировать в PowerPoint

Если вы пишете код и предпочли бы не открывать PowerPoint, вы наверняка уже сталкивались со Slidev. Он позиционирует себя как «презентационные слайды для разработчиков» — и это ровно то, чем он является: вы пишете каждый слайд на Markdown, вставляете Vue-компоненты и блоки кода там, где нужно, и показываете всё это как веб-страницу — с горячей перезагрузкой, подсветкой синтаксиса, заметками докладчика и интерактивными вставками из коробки. С 47,6k звёзд на GitHub и лицензией MIT это один из главных ответов на вопрос «как сделать красивую презентацию из Markdown».

Это руководство — честная карта Slidev. Что он представляет собой на самом деле, как сочетаются темы и примеры, как в действительности ведёт себя экспорт в PDF и PowerPoint (тут есть подвох), как он смотрится на фоне других open-source-претендентов и — та часть, которую большинство обзоров опускают, — где такой инструмент перестаёт быть подходящим и эстафету принимает что-то другое. Если вы взвешиваете варианты для рабочего процесса создания презентаций с помощью ИИ и агентов, полезно точно понимать, чем Slidev является, а чем — нет.

Что такое Slidev

Slidev работает в браузере и относится к вашей презентации как к проекту, а не как к документу. Вы пишете слайды в одном Markdown-файле, разделяя их ---, и весь смысл в инструментарии для разработчиков: горячая перезагрузка по мере набора текста, первоклассная подсветка кода с фокусировкой на строках, LaTeX и диаграммы, режим докладчика с заметками и dev-сервер, который вы запускаете из терминала. Там, где чистого Markdown уже не хватает, вы встраиваете Vue-компоненты прямо в слайд — так что график, живой счётчик или ваш собственный интерактивный виджет могут разместиться прямо рядом с пунктами списка. Поскольку результат и есть веб-приложение, на слайде может жить всё, что умеет веб.

Компромисс заявлен прямо в описании: это инструмент для разработчиков, а не графический интерфейс. Ваш рабочий процесс — это редактор кода и dev-сервер, а не холст с манипуляторами перетаскивания — именно поэтому за него берутся разработчики, которым уже нравятся Markdown и веб-компоненты, и именно поэтому не-программист от него отскочит. Он к тому же по-настоящему бесплатен: без аккаунта, без водяных знаков, без ограничений на экспорт, без оплаты за место. Markdown и весь проект вокруг него принадлежат вам.

Темы и примеры

Большинство запросов вокруг Slidev на самом деле о том, как сделать его красивым, не проектируя каждый слайд с нуля, — так что вот как складываются эти части.

Темы Slidev — это встроенная отправная точка и настоящая сильная сторона. Вы задаёте тему одной строкой во frontmatter (например, theme: seriph), и Slidev её подтягивает. Есть официальная галерея тем плюс солидный набор сообществом опубликованных тем в виде npm-пакетов — от чистых редакционных стилей до тёмных стилей девелоперских конференций. Поскольку тема — это код, «своя тема Slidev» означает создание или форк пакета темы с вашими собственными макетами, шрифтами и цветами — сложнее, чем поменять таблицу стилей, но полностью версионируемо.

Примеры Slidev живут в документации и в сообществе, а не в единой галерее для заполнения. Официальный сайт (sli.dev) сам собран на Slidev, в репозитории есть стартовые презентации, а на GitHub полно настоящих конференционных докладов, исходники которых можно прочитать и склонировать. Если вы ищете «slidev examples», самые полезные — это официальные демо и исходники документации: они показывают почти каждую возможность в деле. Подвох для новичков тот же, что и с любым code-first-инструментом: «пример» здесь — это репозиторий, который клонируют и правят, а не шаблон, который заполняют через интерфейс.

Экспорт Slidev в PowerPoint и PDF

Экспорт в PDF — первоклассная, официально поддерживаемая возможность, и работает она хорошо. У Slidev есть встроенная команда slidev export (на базе Playwright), которая рендерит каждый слайд в аккуратный PDF по странице на слайд — это поддерживаемый путь, и PDF выглядит в точности как ваша презентация. Тем же способом можно экспортировать и в изображения PNG.

А вот с экспортом Slidev в PowerPoint нужно управлять ожиданиями. Slidev умеет создавать .pptx, но результат получается с потерями: каждый слайд приходит в PowerPoint плоской картинкой, а не редактируемыми текстовыми блоками, фигурами и макетами. Так что если кому-то дальше по цепочке нужно открыть вашу презентацию в PowerPoint и отредактировать её — перепечатать заголовок, перекрасить график, переформатировать пункт — .pptx от Slidev этого не даст. Slidev создан для показа из браузера, и его редактируемый источник — это Markdown плюс Vue, а не .pptx. Знать это до начала работы — значит избежать болезненного сюрприза в тот день, когда коллега попросит «редактируемый PowerPoint».

Slidev против Marp против reveal.js

Slidev — не единственный способ писать слайды как код. Два ближайших open-source-варианта — те, что имеют в виду под «альтернативой Slidev», — это reveal.js и Marp, и стоит честно признать, что Open Design находится в совершенно другом слое, а не конкурирует в лоб.

ИнструментНаписаниеРедактируемый .pptxШаблонизацияЛицензия
SlidevMarkdown + VueНет (PPTX/PDF как изображения)Vue-компоненты + темыMIT
reveal.jsHTML или MarkdownНет (PDF→PPTX — изображения с потерями)Темы = CSS/Sass; шаблоны сообществаMIT
MarpТолько MarkdownНет (PDF/PPTX как изображения)Markdown-темы (CSS)MIT
Open DesignОпишите это своему агентуДа — редактируемый вывод на основе дизайн-системыСобственные шаблоны презентацийApache-2.0

reveal.js — более старший и более «сырой» собрат: вы пишете на HTML (или Markdown) и подключаете переходы через data-атрибуты, меняя удобство Markdown в Slidev на более низкоуровневый контроль над HTML. Если вам нужна максимальная свобода и вы не против писать разметку, reveal.js — естественный выбор. Marp идёт в другую сторону — только Markdown, намеренно минималистичный, без компонентов — что делает его самым быстрым путём, когда слайды в основном текстовые и вы вообще не хотите думать о фреймворке. Slidev — посередине: Markdown в первую очередь ради скорости, с Vue-компонентами наготове, когда слайду нужно сделать больше.

Все три — code-first-инструменты одной и той же фундаментальной формы: вы пишете презентацию, показываете её в браузере, и редактируемый вывод в PowerPoint — не то, ради чего они существуют. Выбор между ними — это в основном вопрос о том, какую поверхность для написания вы хотите — Markdown плюс Vue, чистый HTML или чистый Markdown — а не о возможностях, которые есть у одного и которых нет у остальных.

Где место Open Design

Вот честная граница. Slidev требует, чтобы вы писали презентацию — каждый слайд, на Markdown и Vue. Это плюс, если вам нужны написанные вручную, версионируемые слайды с живыми компонентами, и ничто здесь этого не заменяет, если такова ваша цель.

Open Design — это другой слой, и это продукт, который делаем мы, так что читайте с учётом этого. Это open-source (Apache-2.0), local-first, bring-your-own-key Agent-Native Design Workspace, который находится вне кодинг-агента, которым вы уже пользуетесь, — Claude Code, Codex или Cursor. Вместо того чтобы вручную писать Markdown и компоненты, вы описываете нужную презентацию, и агент генерирует редактируемую на основе дизайн-системы, так что она выходит в фирменном стиле и остаётся редактируемой, а не застывает как отрендеренный артефакт. Open Design также поставляет собственные шаблоны презентаций, с которых можно начать.

Это не замена Slidev, если вам нужно писать слайды как код с Vue-компонентами и полным контролем, — это домашняя территория Slidev, и он в этом великолепен. Open Design — для случая, когда вы предпочитаете дать агенту бриф, а не писать разметку, хотите, чтобы вывод соответствовал дизайн-системе на многих презентациях, и хотите в итоге получить редактируемые файлы, которые принадлежат вам. Берите Slidev, когда презентация — это и есть тот Markdown, который вы пишете; берите рабочее пространство, когда презентация — лишь один из многих фирменных результатов, которые агент создаёт для вас.

Частые вопросы

Slidev бесплатен? Да. Slidev — open source под лицензией MIT: бесплатен для коммерческого использования, без аккаунта, без водяных знаков и без ограничений на экспорт. Вы запускаете его сами из собственного проекта.

Как использовать темы Slidev? Задайте тему во frontmatter слайдов (например, theme: seriph), и Slidev установит и применит её. Есть официальная галерея плюс темы сообщества на npm. Своя тема означает создание или форк пакета темы с вашими собственными макетами, шрифтами и цветами — это код, а не таблица стилей, которую вы подменяете.

Можно ли экспортировать Slidev в PowerPoint? Slidev может экспортировать в .pptx, но с потерями — каждый слайд превращается в плоскую картинку, а не в редактируемый текст и фигуры. Экспорт в PDF и PNG (через slidev export) — чистый первоклассный путь. Если вам нужен редактируемый PowerPoint, Slidev — неподходящий источник.

Slidev, Marp или reveal.js — что выбрать? Все три — open source, code-first, под лицензией MIT. Выбирайте Slidev ради Markdown плюс Vue-компонентов (отлично, когда слайды должны быть интерактивными), reveal.js — ради чистого контроля над HTML, а Marp — ради простейших презентаций только на Markdown. Ни один не нацелен на редактируемый вывод в PowerPoint.

Нужно ли уметь программировать, чтобы пользоваться Slidev? По сути, да. Slidev — инструмент для разработчиков: вы работаете в текстовом редакторе и терминале с Markdown, Vue и dev-сервером, а не в интерфейсе перетаскивания. Если вы предпочитаете описывать презентацию простым языком, именно этот пробел закрывает агент-нативное рабочее пространство вроде Open Design.

Итог

Slidev заслуживает своих 47,6k звёзд: это бесплатный, под лицензией MIT, ориентированный на разработчиков способ строить красивые презентации из Markdown — с настоящими темами, горячей перезагрузкой, живыми Vue-компонентами и чистым экспортом в PDF. Только входите с открытыми глазами — это инструмент, в котором вы пишете, а не приложение, по которому кликаете, и «экспорт в редактируемый PowerPoint» — не то, что он делает хорошо. Если вы хотите создавать презентации как код, Slidev (или reveal.js / Marp) — прекрасный дом. Если же вы предпочитаете описать презентацию и позволить агенту сгенерировать редактируемую, фирменную и принадлежащую вам, вот тут эстафету принимает Agent-Native Design Workspace.


← Назад в журнал GitHub · Источник ↗