Interactive Slides (Claude Skill) — 安裝 & 即時演示

為什麼要用

核心特性

三種模式：幻燈片、滾動故事、互動甲板
獨立的 HTML — 一個文件，任何瀏覽器
GSAP 動畫、Google 字型、Chart.js (CDN)
導航：鍵盤/點擊/觸控/滑動/滾輪
透過 pptxgenjs 可選的 .pptx 導出

即時演示

實際使用效果

interactive-slides-skill.replay ▶ 就緒

0/0

安裝

作者儲存庫 · Claude Skills 官方文件

使用場景

實戰用法： Interactive Slides

將一頁紙變成投資者套牌

👤 創辦人和產品經理建構推介 ⏱ ~30 min beginner

何時使用： 你有內容；您想要在幾分鐘內獲得真正甲板的形狀。

步驟

調用技能

/interactive-slides — 模式：幻燈片。內容：<單頁>。主題：最小的黑暗。✓ 已複製

→ 產生deck.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 搭配，撬動十倍槓桿

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 載入。如果您需要完全離線，請詢問內聯庫的技能。

CDN 依賴性意味著接收者需要網路才能觀看動畫。對於氣隙演示，請請求內聯建置。
互動式牌組將狀態儲存在 localStorage 中；請注意該套牌是否會公開分享。

故障排查

常見錯誤與修復

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

確保鍵盤監聽器已綁定；當從 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	心智圖比甲板更適合	不同的敘事形態

Interactive Slides

為什麼要用

核心特性

即時演示

實際使用效果

安裝

使用場景

實戰用法： Interactive Slides

步驟

注意事項

步驟

注意事項

步驟

組合

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

工具

此 MCP 暴露的能力

成本與限制

運行它的成本

安全

權限、密鑰、影響範圍

故障排查

常見錯誤與修復

替代方案

Interactive Slides 對比其他方案

更多

資源