/ 目錄 / 演練場 / Interactive Slides
● 社群 sylvial928 ⚡ 即開即用

Interactive Slides

作者 sylvial928 · sylvial928/interactive-slides

將內容轉換為精美、獨立的動畫 HTML 簡報(幻燈片、滾動故事或互動式幻燈片),並可選擇匯出 .pptx。

Interactive-slides 是 Claude Code 的技能,可產生可在任何瀏覽器中開啟的單一 HTML 檔案。 三種簡報模式(經典幻燈片、長篇滾動故事、探索性互動甲板)。 GSAP + Google Fonts + Chart.js 是 CDN 載入的;鍵盤/點擊/觸控/滑動/滾動導航全部開箱即用。 可選的「pptxgenjs」匯出會產生可編輯的 .pptx,以便您可以將其交給居住在 PowerPoint 中的利害關係人。

為什麼要用

核心特性

即時演示

實際使用效果

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 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

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
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "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 使用伺服器物件陣列,而非映射。

~/.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 i -g pptxgenjs
  • 技能已安裝 — git 克隆到 ~/.claude/skills/interactive-slides
步驟
  1. 調用技能
    /interactive-slides — 模式:幻燈片。 內容:<單頁>。 主題:最小的黑暗。✓ 已複製
    → 產生deck.html;在瀏覽器中開啟
  2. 迭代部分
    新增帶有 MRR 折線圖的「牽引」部分。✓ 已複製
    → Chart.js 在投影片內呈現的折線圖
  3. 導出.pptx
    匯出為pitch.pptx。✓ 已複製
    → 已儲存可編輯的 .pptx;文字在 PowerPoint 中完全可編輯

結果: 您今天可以示範該套牌,明天可以以 .pptx 形式透過電子郵件發送。

注意事項
  • 匯出的 .pptx 缺少動畫 — HTML 動畫不會往返;保留 HTML 用於現場演講,.pptx 用於交接
搭配使用: mcp-echarts

建構一個捲軸故事解釋器

👤 技術作家和行銷人員 ⏱ ~60 min intermediate

何時使用: 您想要一個具有滾動觸發視覺效果的中型長篇作品。

步驟
  1. 選擇模式
    模式:捲軸故事。 內容:本文。 新增滾動觸發的圖表和視覺效果。✓ 已複製
    → 輸出是一個滾動頁面,其中包含 GSAP 固定部分
  2. 調整節奏
    放慢“問題”部分的圖釘滾動速度。✓ 已複製
    → 調整了磨砂時間線

結果: 您的讀者真正完成的引人入勝的捲軸作品。

注意事項
  • 效果超載 — 每部分一個動畫;休息應該安靜

研討會的互動式演示平台

👤 教育工作者和 DevRel 舉辦研討會 ⏱ ~90 min intermediate

何時使用: 您需要內嵌小型互動式練習的幻燈片。

步驟
  1. 模式:互動
    模式:互動甲板。 嵌入一​​個輸入欄位+即時更新的Chart.js。✓ 已複製
    → 互動元件有線;輸入的圖表更新
  2. 新增投票
    新增一張「選擇一張」投影片,用於記錄本地點擊次數和計數。✓ 已複製
    → 僅限本地計數器點擊更新

結果: 沒有後端的現場感牌組。

組合

與其他 MCP 搭配,撬動十倍槓桿

interactive-slides-skill + mcp-echarts

透過 ECharts 產生圖表並嵌入到甲板中

使用 mcp-echarts 將收入圖表渲染為 SVG;嵌入到「牽引」幻燈片中。✓ 已複製
interactive-slides-skill + claude-code-design-skills

將品牌代幣應用於套牌主題

使用品牌 acme 標記作為牌組調色板和類型。✓ 已複製
interactive-slides-skill + magic-ui-mcp

精選互動式 Deck 模式的 UI 元件

互動模式:使用 Magic UI 選取框作為信任標誌投影片。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
/interactive-slides (SKILL) mode + content + theme 任何時候您需要現有內容中的牌組或捲軸故事 0

成本與限制

運行它的成本

API 配額
沒有任何
每次呼叫 Token 數
中 — 甲板內容是 HTML 長度
費用
自由的
提示
將每張投影片的文字控制在 80 個字以內;否則甲板會膨脹得很快。

安全

權限、密鑰、影響範圍

憑證儲存: 沒有任何
資料出站: GSAP、Google Fonts、Chart.js 從 CDN 載入。 如果您需要完全離線,請詢問內聯庫的技能。

故障排查

常見錯誤與修復

幻燈片無法透過箭頭鍵前進

確保鍵盤監聽器已綁定;當從 file:// 提供 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嵌入base64資料URI以供離線使用。

驗證: Open airplane-mode; load the HTML

替代方案

Interactive Slides 對比其他方案

替代方案何時用它替代權衡
mck-ppt-design-skill您需要諮詢風格的 .pptx 幻燈片,而不是 HTML互動較少;更多幻燈片拋光
mermaid-skill你需要圖表,而不是套牌不一樣的神器
markmap-mcp-server心智圖比甲板更適合不同的敘事形態

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills