slideshot

slideshot

将 AI 生成的 HTML 轮播图转换为高分辨率 PNG、WebP、PDF 和 PPTX——可通过 CLI、Web App、MCP 服务（Cursor MCP、Claude MCP、OpenCode MCP）或 REST API 使用。

Web App · npm CLI · npm MCP · API 规范

装错了？

npm 上的 MCP 包名是 slideshot-mcp（Glama 官方列表）。请使用 npx -y slideshot-mcp，而不是无关的 html-to-slides 或通过通用搜索找到的第三方命名空间副本。

兼容的 MCP 客户端

面向发现的列表——升级前请核实各主机当前的 MCP 文档。

面向开源的主机

主机	文档	常见接入方式
OpenCode	OpenCode MCP servers	见下文 OpenCode
Continue	Continue	按照 Continue 文档添加指向 npx / slideshot-mcp 的 stdio MCP
Zed	Zed	使用 Zed 的 stdio MCP
Cline	Cline	扩展 MCP 文档
Goose	Goose	按照 Goose 的方式使用 MCP 扩展

大型商业产品栈

主机	文档	常见接入方式
Cursor	Cursor MCP	.cursor/mcp.json——见 MCP 服务
Claude（Desktop / Code）	Claude Desktop, Claude Code	Claude Desktop JSON 或 claude mcp add
GitHub Copilot	Copilot	在启用了 MCP 的 VS Code 中使用 MCP
ChatGPT	OpenAI	MCP 不可用时，优先使用 REST（/api/openapi.json）
Google Gemini	Gemini	支持时使用 Gemini IDE / CLI MCP，否则使用 REST

架构

slideshot/
  packages/
    cli/           ← Core Puppeteer rendering engine + CLI
    mcp-server/    ← MCP stdio server for AI tools
    webapp/        ← Next.js web app with live preview
  prompts/
    generic.md           ← Clean minimal
    branded.md           ← Ketan Slides design system
    instagram-carousel.md ← Bold vibrant IG style
    infographic.md       ← Data-heavy charts
    pitch-deck.md        ← Professional presentations
    dark-modern.md       ← Neon glassmorphism
    editorial.md         ← Magazine serif

快速开始

命令行

npx slideshot ./my-carousel.html --formats png,webp,pdf --scale 4

选项：

标志	默认值	说明
-s, --selector	.slide	幻灯片元素的 CSS 选择器
-W, --width	540	幻灯片宽度（CSS 像素）
-H, --height	675	幻灯片高度（CSS 像素）
--scale	4	设备缩放比例（4x = 2160x2700）
-f, --formats	png,webp,pdf	输出格式（png、webp、pdf、pptx）
-q, --quality	95	WebP 质量（0-100）
-o, --out	./slides	输出目录

Web 应用

在线体验： slideshot.vercel.app

或在本地运行：

cd packages/webapp && npm install && npm run dev

打开 http://localhost:3000 — 粘贴 HTML、预览并导出。

MCP 服务

添加到 Cursor、Claude Desktop、Claude Code 或任何标准输入/输出 MCP 主机。已在 npm 上发布为 slideshot-mcp。

Cursor / Claude Desktop（mcpServers）：

{
  "mcpServers": {
    "slideshot": {
      "command": "npx",
      "args": ["-y", "slideshot-mcp"]
    }
  }
}

可选固定版本："args": ["-y", "[email protected]"]（替换为当前 npm 版本）。

OpenCode

~/.config/opencode/opencode.json：

{
  "mcp": {
    "slideshot": {
      "type": "local",
      "command": ["npx", "-y", "slideshot-mcp"],
      "enabled": true
    }
  }
}

工具：

• create_slides — 提供 7 种主题和输出预设的引导式创建工作流
• render_html_to_images — 将 HTML 渲染为 PNG/WebP/PDF/PPTX
• get_slide_prompt — 获取任意主题变体的 AI 提示词模板
• health_check — 检查 Puppeteer/Chromium 是否可用

提示词（7 种主题）：

• generic-slides — 简洁极简
• branded-slides — Ketan Slides 设计系统
• instagram-carousel-slides — 大胆鲜明的 IG 风格
• infographic-slides — 数据密集型图表和统计数据
• pitch-deck-slides — 专业演示文稿
• dark-modern-slides — 霓虹玻璃拟态
• editorial-slides — 杂志衬线字体搭配金色点缀

REST API（ChatGPT Actions / OpenWebUI）

Web 应用在 https://slideshot.vercel.app 提供兼容 OpenAPI 的 REST API。

端点：

方法	路径	说明
POST	/api/render	将 HTML 幻灯片渲染为 PNG/WebP/PDF（返回 ZIP）
GET	/api/prompt?variant=generic	获取 AI 提示词模板
GET	/api/openapi.json	OpenAPI 3.1.0 规范

平台支持：

平台	方法	设置
Cursor	MCP	在 .cursor/mcp.json 中使用 npx slideshot-mcp
Claude Desktop	MCP	在配置中使用 npx slideshot-mcp
OpenCode	MCP	opencode.json mcp.slideshot → ["npx","-y","slideshot-mcp"]
Continue	MCP	根据 Continue 文档使用标准输入/输出 → npx / slideshot-mcp
ChatGPT	OpenAPI Action	导入 /api/openapi.json
OpenWebUI	OpenAPI Tool	导入 /api/openapi.json

AI 提示词模板

prompts/ 中有 7 种提示词变体 — 可复制粘贴，或通过 get_slide_prompt 工具使用：

变体	文件	风格
通用	prompts/generic.md	简洁极简，Inter 字体
品牌	prompts/branded.md	Space Mono，青绿色/珊瑚色点缀
Instagram	prompts/instagram-carousel.md	大胆渐变，Poppins
信息图	prompts/infographic.md	DM Sans，数据卡片
路演演示文稿	prompts/pitch-deck.md	专业风格，KPI 卡片
暗色现代	prompts/dark-modern.md	霓虹，玻璃拟态
编辑风	prompts/editorial.md	Playfair Display，金色

全部构建

npm install   # from root — installs all workspaces
npm run build # builds cli → mcp-server
cd packages/webapp && npm run build  # builds webapp separately

链接

页面	URL
Web 应用	slideshot.vercel.app
npm 命令行工具	npmjs.com/package/slideshot
npm MCP	npmjs.com/package/slideshot-mcp
GitHub	github.com/06ketan/slideshot
API 规范	slideshot.vercel.app/api/openapi.json

相关 MCP

• medium-ops — Medium 命令行工具 + MCP（PyPI）。
• substack-ops — Substack 命令行工具 + MCP（PyPI）。

许可证