SuperAPI AI 工具集

slide-deck

办公与效率

查看项目

更新于 10-15 14:21

技能介绍

slide-deck 是一个用于 React/Next.js 幻灯片系统的技能,帮助用户起草、更新、转换和导出品牌化幻灯片。它把内容写入 ${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/<slug>/page.tsx,直接使用用户自己的幻灯片系统,因此输出天然带有品牌样式,不需要单独的 HTML 流程。当需要可移植的 HTML/PDF 时,导出模式会通过 Playwright 对渲染后的 React 幻灯片截图,使输出保持品牌一致。

主要模式

  • new:/slide-deck new <topic>(默认),根据简报起草新幻灯片。
  • update:/slide-deck update <slug>,修改现有幻灯片,并带有溢出保护。
  • ppt:/slide-deck ppt <path-to-pptx>,把旧版 PPTX 转换为 React 幻灯片。
  • export:/slide-deck export <slug> [html|pdf|vercel],把幻灯片快照为 HTML、PDF 或 Vercel URL。

新建流程(new 模式)

  1. 一次性收集简报:主题/标题、受众(技术/高管/混合/客户,要求具体)、长度(5–10、10–15、20–25、30+ 张)、密度(演讲主导或阅读优先)、CTA、slug(kebab-case)、内容状态。密度会影响幻灯片数量、每页文案长度和优先使用的组件。
  2. 提出三种叙事角度:Safe(最可能成功)、Bold(反直觉框架)、Wildcard(意外结构),由用户选择;若全部被拒,再提三个。
  3. 大纲:为选定角度提出 3–7 个命名章节、每页标题、每页一句话要点,总页数匹配时长估计,以表格展示供用户编辑/批准。
  4. 展开为幻灯片内容:按幻灯片类型(标题、Hook、章节分隔、框架、双栏、引用、资源/链接、结尾/CTA)使用相应组件。写作面向口语,朗读测试,使用缩略语、第二人称“你”、自然数字、短句、具体名词,不用填充语。
  5. 演讲者备注:每页 3–5 行,包含开场、要点、支撑节拍、过渡,可选插话;标题页和章节分隔页 2–3 行即可。
  6. 生成文件:写入 layout.tsx(含 <title> 元数据)和 page.tsx,使用 references/template.md 模板。作者标识来自 ${MAKERSKILLS_CONFIG:-$HOME/.config/makerskills}/slide-deck/identity.yaml,否则询问一次并可保存;不想要页脚则删除该 <p>。page.tsx 需包含 "use client"、导入 SlideDeck 与 Slide 类型、按需导入 SectionRange 和组件、声明 slides 数组、可选 sections 数组、默认导出返回 <SlideDeck slides={slides} sections={sections} /> 的组件。
  7. 预览:检查开发服务器是否运行(lsof -i :3000-3099),给出预览 URL 或提示用户运行 cd ${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site} && npm run dev,不自动启动开发服务器。
  8. 归档:归档位于 ${MAKERSKILLS_CONFIG:-$HOME/.config/makerskills}/slide-deck/archive/,向 INDEX.md 追加一行记录;不要把归档写在技能自身文件夹内。

update 模式

修改现有幻灯片而不破坏它。修改前读取 page.tsx、统计页数并识别章节范围。添加项目符号时,阅读优先最多 6 条、演讲主导最多 3 条,超出则拆分;添加文本时,演讲主导段落超过 2 句、阅读优先超过 5 句则拆分;添加图片需适配 1920×1080 舞台;添加/删除幻灯片需更新 sections 数组的 from/to;重写幻灯片保留 id。修改后重新统计页数并验证章节范围,提交前在开发服务器中抽查视觉效果。

ppt 模式

把旧版 PPTX 转换为用户的 React 系统。使用 python3 和 python-pptx 提取内容(pip install python-pptx),展示提取摘要供确认,再映射到 React 组件:首页→标题模式,带项目符号的内容页→Heading + BulletList,对比页→TwoCol,仅标题页→章节分隔,PPTX 备注→每页 notes 数组,图片复制到 ${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/public/slide-assets/<slug>/ 并引用。按新建流程写入 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 快照(无头 Chromium 1920×1080,加载 ?present=1,设置 localStorage 从第 0 页开始,循环截图→ArrowRight→等待),保存 PNG 到 ~/Documents/slide-exports/<slug>-<YYYY-MM-DD>/slide-<n>.png,再按输出类型合并。注意事项:动画和演讲者视图不会保留,导出是静态快照;交互演示请现场展示 React 版本;快照为 1920×1080,文件大小随页数增长。

快速调用

/slide-deck new <topic>、/slide-deck angles <topic>(停在角度)、/slide-deck outline <topic>(只出大纲)、/slide-deck expand <slug>(从现有大纲跳到展开)、/slide-deck notes <slug>(重写备注)、/slide-deck rewrite <slug> <slide-id>(编辑单页)、/slide-deck update <slug>、/slide-deck ppt <pptx-path>、/slide-deck export <slug> html|pdf|vercel、/slide-deck preview <slug>。

与其他技能组合

可与 business-brainstorm(先头脑风暴提案)、decide(依赖决策的演讲)、deep-research(需要数据)、second-brain(拉取 [[wiki]] 页面作为内容来源)、watch-video(把播客/Loom/演讲录音转为大纲)、jab-hook(演讲后转为推广角度)以及外部 frontend-skills(非品牌 HTML 幻灯片)组合使用。

质量要点

叙事上“展示而非讲述”:提供 3 种不同角度让用户选择。密度模式比美学更重要:演讲主导幻灯片每页 3 个词、备注 5 行;阅读优先则相反。幻灯片文本是口语的缩写,两者都要通过朗读测试。update 模式有溢出保护,不要盲目塞入更多内容。导出时剥离演讲者视图。品牌一致优先于可移植:React 幻灯片是唯一事实来源,HTML/PDF/Vercel 导出只是分享用快照。默认 1920×1080,预览用 1280×720;20 页全分辨率快照约 30–50 MB。部署涉及真实费用,export 的 vercel 路径会在部署前提示;域名和 Vercel 项目自动续订开启。