Community编程与开发github.com

slide-wright

根据主题、粗略笔记或大纲创建精美的网页演示文稿,并支持后续编辑——添加、删除或修改幻灯片。会先生成自定义主题和简短的两页预览,在用户确认方向后才构建完整演示文稿;编辑现有演示文稿则跳过此流程直接应用修改。适合用户想要制作幻灯片、演示文稿、演讲用PPT、推介材料,或对已有幻灯片进行增删改时使用。

slide-wright 是什么?

slide-wright 是一款 AI 原生演示文稿构建工具,其核心设计理念是“先预览方向,后构建全文”。当用户给出主题、笔记或大纲时,它会先精炼内容结构,再独立生成一套自定义主题与仅含两页的预览幻灯片,直到用户明确认可或要求更换方向后,才基于该审美基调构建完整的单页 HTML 演示文稿。这一机制避免了资源浪费,确保最终呈现与用户预期高度一致。 工具底层基于 reveal.js(通过 CDN 加载,但用户无需感知),生成的演示文稿为自包含 HTML 文件,可在任意浏览器中直接打开并支持键盘、触控及全屏操作。对于已有的 HTML 演示文稿(无论是否由本工具生成),若其基于 reveal.js,则直接保持原有主题进行原位编辑,跳过提案与审批流程,实现快速更新。若为其他引擎生成的 HTML 则告知用户超出编辑范围。 该技能严格遵循多步参考文档(如 `references/new-deck.md` 定义了建新演示文稿的步骤、提案与审批关卡;`references/design-aesthetics.md` 和 `references/theme-generation.md` 规范了设计与主题生成;`references/exhibits.md`、`references/code-slides.md`、`references/motion-recipes.md` 等分别覆盖图表、代码、动画等特殊幻灯片类型),确保每个输出都符合同等质量标准。编辑完成后会运行检查脚本 `check-deck.mjs` 并修复所有报错行,保证最终交付物质量。 此外,用户可通过快捷键操作(F 全屏、Esc/O 概览、S 演讲者视图等),并支持导出为 PDF(`?print-pdf` 参数 + 打印)、PowerPoint 文件(`references/export-pptx.md`),或一键部署到 Surge、Vercel、Netlify 等平台分享。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/arifszn/slide-wright/tree/HEAD/slide-wright

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

slide-wright 是做什么的?

将一个主题或粗略笔记转化为董事会级别的演示文稿:幻灯片读起来像来自强大战略或产品团队的 deck,以单个自包含的 HTML 文件形式交付,可在任何浏览器中运行。

定义此技能的核心规则

先展示外观,再构建 deck。 第一次生成时,永远不要直接交付完整的演示文稿。先生成一个主题,用该主题构建两页预览,然后停下来,直到用户批准方向。只有得到确认后,才构建其余部分。

一次只提供一个方案,而不是一个菜单。 如果用户说“不”,就丢弃这个方向,尝试一个明显不同的方案。每一个主题都是为眼前的 deck 单独创造的;没有预设的库。

新建 deck:先阅读 references/new-deck.md。 其中包含了步骤 1-4(梳理 deck 内容、提议外观、获得批准、构建)以及确切的审批关卡。

引擎(保持内部使用)

Deck 通过从 CDN 加载 reveal.js 来渲染,但这是一个用户永远看不到的实现细节。在讨论幻灯片、主题和设计时,只使用这些术语;库名称只出现在生成的 <link> 和 <script> 标签内部。references/deck-template.md 中包含了确切的设置。

编辑已存在的 deck

如果用户指向一个已有的 HTML deck,检查它是否基于 reveal.js 构建(查找来自 CDN 的 reveal.js <link>/<script> 标签)。如果是——无论是否由本技能构建——不要从头开始:读取它,保留它的主题,并在原地进行修改。外观已经过批准,因此跳过提案和审批关卡。编辑后,运行 node <skill-dir>/scripts/check-deck.mjs <deck.html> 并修复它打印的每一行错误(references/new-deck.md 中有详细信息)。

编辑不需要参考文件,除非你添加了新的图表类型(阅读 references/exhibits.md)、代码或动画(阅读 references/code-slides.md 或 references/motion-recipes.md)。

如果 deck 是 HTML 但不是基于 reveal.js(使用了不同的引擎、纯幻灯片等),则超出本技能的编辑范围——直接告知用户,而不是强制将它重写为不同的引擎。此处其余内容仅适用于构建新 deck。

步骤 5 — 交付

  1. 打开完成的 deck。
  2. 告知文件位置、主题名称和幻灯片数量。
  3. 告诉用户如何操作:使用方向键、空格或滑动切换;F 全屏,Esc 或 O 幻灯片概览,S 演讲者视图(含备注);在 URL 后添加 ?print-pdf 并打印可保存为 PDF(references/export-pdf.md 中有具体步骤);主题颜色定义在 :root 变量中,字体在 <link> 标签中。
  4. 提供下一步的常见操作:修改内容、更换主题、导出 PDF、导出 PowerPoint 文件(references/export-pptx.md),或 部署到在线 URL 以便分享。如果用户想要部署,请阅读 references/deploy.md 并让他们选择托管平台(Surge、Vercel 或 Netlify)——不要擅自假定某一个。

参考文件

按需阅读,不要一次性全部读完:

  • references/new-deck.md — 新建 deck 的步骤 1-4:梳理 deck 内容、提议外观、获得批准、构建
  • references/design-aesthetics.md — 如何让 deck 看起来经过设计(步骤 2)
  • references/theme-generation.md — 生成主题的流程(步骤 2)
  • references/deck-template.md — HTML 骨架、布局和引擎设置(步骤 2 和 4)
  • references/exhibits.md — 选择并构建每页内容幻灯片上的可视化元素(步骤 2 和 4)
  • references/code-slides.md — 代码幻灯片及其标记约定(步骤 4)
  • references/motion-recipes.md — 用户要求动画时的处理(步骤 4)
  • references/media.md — 幻灯片中的图片和视频(步骤 4)
  • references/export-pdf.md — 将 deck 保存为 PDF(步骤 5)
  • references/export-pptx.md — 将 deck 导出为 PowerPoint 并保留可编辑文本(步骤 5)
  • references/deploy.md — 将 deck 发布到在线 URL(步骤 5)

相关技能