Interactive Slides MCP — Сценарии использования, Установка & Живое демо

Зачем использовать

Ключевые функции

Три режима: слайд-презентация, история прокрутки, интерактивная колода.
Автономный HTML — один файл, любой браузер.
Анимация GSAP, Google Fonts, Chart.js (CDN)
Навигация: клавиатура / щелчок / касание / пролистывание / колесо прокрутки.
Дополнительный экспорт .pptx через pptxgenjs.

Живое демо

Как выглядит на практике

interactive-slides-skill.replay ▶ готово

0/0

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "interactive-slides-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

{
  "context_servers": {
    "interactive-slides-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/sylvial928/interactive-slides",
          "~/.claude/skills/interactive-slides"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add interactive-slides-skill -- git clone https://github.com/sylvial928/interactive-slides ~/.claude/skills/interactive-slides

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: Interactive Slides

Превратите одностраничный сайт в колоду для инвесторов

👤 Основатели и руководители проектов готовят презентации ⏱ ~30 min beginner

Когда использовать: У вас есть контент; вам нужна форма настоящей колоды за считанные минуты.

Предварительные требования

Node + pptxgenjs (необязательно, только для экспорта .pptx) — npm я -g pptxgenjs
Навык установлен — git клонировать в ~/.claude/skills/interactive-slides

Поток

Вызов навыка

/interactive-slides — режим: слайд-дека. Содержание: <одностраничный>. Тема: минималистичная темная.✓ Скопировано

→ Создает файлeck.html; открывается в браузере
Перебирать разделы

Добавьте раздел «Тракция» с линейной диаграммой MRR.✓ Скопировано

→ Линейная диаграмма Chart.js, отображаемая внутри слайда
Экспорт .pptx

Экспортировать в формате Pitch.pptx.✓ Скопировано

→ Редактируемый .pptx сохранен; текст полностью редактируемый в PowerPoint

Итог: Колода, которую вы можете продемонстрировать сегодня и отправить по электронной почте в формате .pptx завтра.

Подводные камни

В экспортированном формате .pptx отсутствует анимация. — HTML-анимация не повторяется; сохраните HTML для живых выступлений и .pptx для передачи

Сочетать с: mcp-echarts

Создайте объяснение истории прокрутки

👤 Технические писатели и маркетологи ⏱ ~60 min intermediate

Когда использовать: Вам нужна длинная вещь в среднем стиле с визуальными эффектами, вызываемыми прокруткой.

Поток

Выберите режим

Режим: Прокрутка истории. Содержание: эта статья. Добавляйте диаграммы и визуальные эффекты, активируемые прокруткой.✓ Скопировано

→ Результатом является прокручиваемая страница с разделами, закрепленными GSAP.
Настройте темп

Замедлите прокрутку раздела «Проблема».✓ Скопировано

→ График скраба изменен

Итог: Захватывающий фрагмент прокрутки, который ваши читатели действительно заканчивают.

Подводные камни

Перегрузка эффектами — Одна анимация на раздел; отдых должен быть тихим

Интерактивная демонстрационная колода для мастер-класса

👤 Преподаватели и DevRel проводят семинары ⏱ ~90 min intermediate

Когда использовать: Вам нужны встроенные слайды с небольшими интерактивными упражнениями.

Поток

Режим: Интерактивный

Режим: Интерактивная колода. Встройте поле ввода + Chart.js, которое обновляется в реальном времени.✓ Скопировано

→ Интерактивный элемент проводной; обновления диаграммы при вводе
Добавить опрос

Добавьте слайд «выберите один», который локально записывает клики и подсчитывает их.✓ Скопировано

→ Обновления счетчика только локально при нажатии

Итог: Живая колода без бэкенда.

Комбинации

Сочетайте с другими MCP — эффект x10

interactive-slides-skill + mcp-echarts

Создавайте диаграммы с помощью ECharts и встраивайте в колоду.

Отобразите диаграмму доходов с помощью mcp-echarts в формате SVG; встроить в слайд «Traction».✓ Скопировано

interactive-slides-skill + claude-code-design-skills

Примените жетоны бренда к теме колоды

Используйте жетоны бренда для палитры и типа колоды.✓ Скопировано

interactive-slides-skill + magic-ui-mcp

Выбор компонентов пользовательского интерфейса для режима интерактивной колоды

Интерактивный режим: используйте рамку Magic UI для слайда с логотипами доверия.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
/interactive-slides (SKILL)	mode + content + theme	В любой момент, когда вам понадобится колода или история-свиток из уже имеющегося у вас контента.	0

Стоимость и лимиты

Во что обходится

Квота API: Никто
Токенов на вызов: Умеренный — контент колоды имеет длину HTML.
Деньги: Бесплатно
Совет: Не превышайте 80 слов на каждый слайд; в противном случае колоды быстро раздуваются.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: Никто

Исходящий трафик: GSAP, Google Fonts, Chart.js загружаются из CDN. Если вам нужен полностью автономный режим, попросите навык инлайнить библиотеки.

Зависимости CDN означают, что получателям нужна сеть для просмотра анимации. Для демо-версий с воздушным зазором запросите встроенную сборку.
Интерактивные колоды хранят состояние в localStorage; обратите внимание, будет ли колода общедоступной.

Устранение неполадок

Частые ошибки и исправления

Слайды не продвигаются по клавишам со стрелками

Убедитесь, что прослушиватель клавиатуры привязан; некоторые браузеры блокируют, когда HTML-файл обслуживается из файла://. Попробуйте локальный сервер: python3 -m http.server.

Проверить: Open dev console; inspect keyup handler

Экспорт отсутствующих анимаций в формате .pptx

Анимации поддерживаются только HTML; .pptx экспортирует текст + макет. Используйте HTML для прямых трансляций; .pptx для передачи электронной почты.

Проверить: Open the .pptx in PowerPoint; check layout only

Шрифты выглядят неправильно в офлайн-режиме

Попросите специалиста внедрить @font-face с URI данных base64 для автономного использования.

Проверить: Open airplane-mode; load the HTML

Альтернативы

Interactive Slides в сравнении

Альтернатива	Когда использовать	Компромисс
mck-ppt-design-skill	Вам нужны слайды в формате .pptx в консультационном стиле, а не HTML.	Менее интерактивный; больше слайд-полировки
mermaid-skill	Вам нужны диаграммы, а не колода	Другой артефакт
markmap-mcp-server	Интеллект-карта подходит лучше, чем колода	Другая форма повествования

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills