SuperAPI AI 工具集

slide-deck

办公与效率

查看项目

更新于 10-24 16:23

技能介绍

用途

slide-deck 是一个用于 React/Next.js 幻灯片系统的技能,帮助用户起草、更新、转换和导出品牌化的演示文稿。它使用用户的幻灯片系统编写 React/TypeScript 幻灯片,输出品牌一致,无需单独的 HTML 流程。当需要可移植的 HTML/PDF 时,导出模式通过 Playwright 对渲染后的 React 幻灯片进行快照,确保输出品牌完美。

主要能力

该技能提供四种模式:

  • new:根据简报起草新幻灯片(默认模式)。
  • update:修改现有幻灯片,带溢出保护。
  • ppt:将旧版 PPTX 转换为 React 幻灯片。
  • export:将幻灯片快照导出为 HTML、PDF 或 Vercel URL。

使用方式

new 模式流程

  1. 捕获简报:一次性询问主题/标题、受众、长度、密度、CTA、slug、内容状态。
  2. 三个叙事角度:提供安全、大胆、意外三种角度,用户选择其一。
  3. 大纲:为选定角度提出 3-7 个命名部分、幻灯片标题、每页一句话要点,以表格展示供用户编辑/批准。
  4. 扩展为幻灯片内容:为每页编写完整内容,使用用户的原语。
  5. 演讲者备注:每页 3-5 行备注,包括开场、要点、支撑节拍、过渡、可选旁白。
  6. 生成文件:写入 ${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/<slug>/ 下的 layout.tsx 和 page.tsx。
  7. 预览:检查开发服务器是否运行,提供预览 URL。
  8. 归档:在 ${MAKERSKILLS_CONFIG:-$HOME/.config/makerskills}/slide-deck/archive/ 下追加一行记录。

update 模式

修改现有幻灯片,带溢出保护。修改前检查现有 page.tsx,统计幻灯片数量并识别部分范围。针对添加项目符号、添加文本、添加图片、添加幻灯片、删除幻灯片、重写幻灯片等操作应用相应保护。修改后重新统计并验证部分范围。

ppt 模式

通过 python3 和 python-pptx 提取旧版 PPTX 内容,映射到 React 原语,写入 page.tsx 和 layout.tsx。保留原始 PPTX,保存到 ~/Documents/slide-conversions/<slug>-from-pptx/。

export 模式

将开发服务器中渲染的幻灯片快照为可移植的 HTML/PDF/Vercel URL。输出选项:

  • html:独立 HTML 文件,快照作为内联 <img>,内置键盘导航。
  • pdf:合并的幻灯片快照。
  • vercel:将独立 HTML 推送到 Vercel 项目以获得可分享 URL。

流程:验证开发服务器、统计幻灯片数量、运行 Playwright 快照、按输出类型合并、报告路径/URL。

适用场景

  • 需要起草、更新、转换或导出 React/Next.js 幻灯片系统演示文稿的用户。
  • 需要将旧版 PPTX 转换为 React 幻灯片的用户。
  • 需要将幻灯片导出为 HTML、PDF 或 Vercel URL 以便分享的用户。

限制

  • 导出为静态快照,不保留动画和演讲者视图。
  • 快照为 1920×1080,文件大小随幻灯片数量增加。
  • 部署是真实付费操作,导出模式的 vercel 路径在部署前会提示。
  • 需要开发服务器运行才能预览和导出。
  • 具体收费、价格、平台等信息暂未提供。