/ 目錄 / 演練場 / frontend-slides
● 社群 zarazhangrui ⚡ 即開即用

frontend-slides

作者 zarazhangrui · zarazhangrui/frontend-slides

用 Claude 生成 web 原生的投影片組——HTML/CSS 投影片、真實轉場效果、不需要 PowerPoint、可透過 URL 分享。

frontend-slides 是一個 Claude Code skill,以單頁 HTML/CSS 網站的形式生成投影片組。每張投影片是一個 section;轉場效果用 CSS;代碼片段正確渲染;可托管在任何靜態伺服器上。適合技術演講、展示和推介場合,讓瀏覽器優先的投影片組勝過需要下載的檔案。

為什麼要用

核心特性

即時演示

實際使用效果

就緒

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "frontend-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/frontend-slides",
        "~/.claude/skills/frontend-slides"
      ],
      "_inferred": true
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "frontend-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/frontend-slides",
        "~/.claude/skills/frontend-slides"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "frontend-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/frontend-slides",
        "~/.claude/skills/frontend-slides"
      ],
      "_inferred": true
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "frontend-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/frontend-slides",
        "~/.claude/skills/frontend-slides"
      ],
      "_inferred": true
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "frontend-slides-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/frontend-slides",
        "~/.claude/skills/frontend-slides"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "frontend-slides-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/zarazhangrui/frontend-slides",
          "~/.claude/skills/frontend-slides"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

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

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: frontend-slides

從大綱建立 20 分鐘技術演講的投影片組

👤 在技術社群或研討會演講的開發者 ⏱ ~90 min intermediate

何時使用: 你有大綱,有 48 小時,不想在 Keynote 模板上糾結。

前置條件
  • 已安裝 skill — git clone https://github.com/zarazhangrui/frontend-slides ~/.claude/skills/frontend-slides
  • Markdown 格式的大綱 — 一個以章節標題為投影片的檔案
步驟
  1. 建立骨架
    Use frontend-slides. From /talks/outline.md, generate a deck in /talks/deck/. One HTML per slide pattern, shared CSS.✓ 已複製
    → 資料夾包含 index.html 加上投影片資源;在瀏覽器中可開啟
  2. 修飾代碼投影片
    For code slides, use my repo's actual style (look at src/example.ts). Add syntax highlighting.✓ 已複製
    → 代碼以正確高亮和你的格式渲染
  3. PDF 備份
    Export to PDF for the "projector won't connect" scenario.✓ 已複製
    → PDF 與 HTML 一起儲存

結果: 一個可以用 git 迭代、托管在 GitHub Pages、從瀏覽器簡報的投影片組。

注意事項
  • 場地 WiFi 很差,但你的投影片有遠端資源 — 將所有資源內嵌;演講前測試離線使用
搭配使用: filesystem

讓代碼和 UI 直接嵌入投影片中的展示用投影片組

👤 展示原型的創業者 ⏱ ~120 min intermediate

何時使用: 你想要可以在投影片中途實際操作產品的投影片。

步驟
  1. 排版
    Generate a 10-slide pitch deck. On slide 4, embed an iframe of the product demo. On slide 7, embed a live CodePen.✓ 已複製
    → 投影片在正確位置嵌入了 iframe
  2. 響應式測試
    Re-render for a 1024x768 projector. Does anything break?✓ 已複製
    → 斷點問題已修復

結果: 一個不像投影片的投影片——感覺就像產品本身。

注意事項
  • Iframe CSP 封鎖嵌入 — 將展示托管在允許 framing 的域名下,或改用錄影

組合

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

frontend-slides-skill + filesystem

將投影片組與你的儲存庫一起進行版本控制

Scaffold into /talks/2026-05-conf/ and commit.✓ 已複製
frontend-slides-skill + github

透過 GitHub Pages 部署

Push the deck to a gh-pages branch and show me the URL.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
scaffold_deck outline.md 任何投影片組的起點 0
add_slide title, content 新增一張投影片 0
pdf_export deck/ 備份交付物 0

成本與限制

運行它的成本

API 配額
N/A
每次呼叫 Token 數
與投影片組大小成正比
費用
免費
提示
先生成骨架,再逐張投影片打磨,而非一次生成整個

安全

權限、密鑰、影響範圍

最小權限: filesystem-write
憑證儲存:
資料出站: 無;你的投影片可能引用遠端資源

故障排查

常見錯誤與修復

Transitions don't work in Safari

查看 skill 文件中的瀏覽器相容性表格;預設設定使用帶前綴的屬性

Code syntax highlighting missing

捆綁的 Prism/Shiki 需要載入資源——確保托管時相對路徑可以解析

PDF export mangles layouts

使用 Chrome headless 列印——skill 預設使用 Puppeteer 搭配橫向設定

替代方案

frontend-slides 對比其他方案

替代方案何時用它替代權衡
reveal.js / Slidev你需要完整框架且能接受設定成本功能更多;需要更多學習
Keynote / PowerPoint企業環境要求以檔案形式交付投影片不是 web 原生;難以分享

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

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