/ 目录 / 演练场 / 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 分钟技术演讲的幻灯片

👤 在 meetup/会议上演讲的开发者 ⏱ ~90 min intermediate

何时使用: 你有大纲,有 48 小时,不想和 Keynote 模板较劲。

前置条件
  • Skill 已安装 — git clone https://github.com/zarazhangrui/frontend-slides ~/.claude/skills/frontend-slides
  • Markdown 格式的大纲 — 一个文件,section 标题 = 幻灯片
步骤
  1. 搭建骨架
    使用 frontend-slides。从 /talks/outline.md 在 /talks/deck/ 生成幻灯片。每张幻灯片一个 HTML,共用 CSS。✓ 已复制
    → 目录下有 index.html + slide 资源;可在浏览器中打开
  2. 优化代码幻灯片
    对于代码幻灯片,使用我仓库的实际样式(参考 src/example.ts)。添加语法高亮。✓ 已复制
    → 代码以正确的高亮和你的格式渲染
  3. PDF 备份
    导出为 PDF,用于「投影仪无法连接」的应急场景。✓ 已复制
    → PDF 已与 HTML 一起保存

结果: 一份可以用 git 迭代、托管在 GitHub Pages、从浏览器演示的幻灯片。

注意事项
  • 会场 WiFi 很差,但你的幻灯片引用了远程资源 — 内联/嵌入所有内容;演讲前测试离线效果
搭配使用: filesystem

制作一套代码 + UI 实时嵌入幻灯片的演示 deck

👤 展示原型的创始人 ⏱ ~120 min intermediate

何时使用: 你想要一套幻灯片,可以在演示过程中直接与产品互动。

步骤
  1. 布局
    生成一套 10 页的 pitch deck。第 4 页嵌入产品演示的 iframe,第 7 页嵌入实时 CodePen。✓ 已复制
    → 幻灯片在正确位置有 iframe
  2. 演练响应式
    重新渲染为 1024x768 投影仪尺寸。有没有什么地方挂了?✓ 已复制
    → 断点修复已应用

结果: 一套不像幻灯片的幻灯片——它就像产品本身。

注意事项
  • iframe CSP 阻止嵌入 — 将演示托管在允许 framing 的域名下,或改用录像

组合

与其他 MCP 搭配,撬动十倍杠杆

frontend-slides-skill + filesystem

将幻灯片与仓库一起版本管理

在 /talks/2026-05-conf/ 中搭建骨架并提交。✓ 已复制
frontend-slides-skill + github

通过 GitHub Pages 部署

将幻灯片推送到 gh-pages 分支并给我 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 无头模式打印——skill 默认使用横向预设的 Puppeteer

替代方案

frontend-slides 对比其他方案

替代方案何时用它替代权衡
reveal.js / Slidev你需要完整的框架,且愿意花时间配置功能更多;学习成本更高
Keynote / PowerPoint企业环境要求基于文件的幻灯片不是 Web 原生;难以分享

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills