/ 目录 / 演练场 / Interactive Slides
● 社区 sylvial928 ⚡ 即开即用

Interactive Slides

作者 sylvial928 · sylvial928/interactive-slides

将内容转换为精美的独立动画HTML演示文稿—幻灯片、滚动故事或交互式演示文稿—并可选择导出.pptx。

交互式幻灯片是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

何时使用: 你有内容;你想在几分钟内形成一个真正的卡组。

前置条件
  • 节点+ pptxgenjs (可选,仅适用于.pptx导出) — npm i -g pptxgenjs
  • 技能已安装 — 将git克隆到~/.claude/skills/interactive-slides
步骤
  1. 调用技能
    /interactive-slides —模式:幻灯片。内容:<one-pager>。主题:最小深度。✓ 已复制
    → 生成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渲染收入图表;嵌入到“Traction”幻灯片中。✓ 已复制
interactive-slides-skill + claude-code-design-skills

将品牌代币应用于卡组主题

将brand-acme令牌用于卡组调色板和类型。✓ 已复制
interactive-slides-skill + magic-ui-mcp

交互式卡组模式的精选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
字体在离线状态下看起来不对

要求技能使用base64数据URI嵌入@ font-face以供离线使用。

验证: 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