跳转到使用指南
slideshow作者 HeyGen

Slideshow Skill.

一个用于 PPT 和幻灯片演示的 Claude Code 和 Codex skill:交互式 HyperFrames 幻灯片,支持片段、分支和演讲者模式。

  • Presentations
  • HTML 幻灯片
heygen-com/hyperframes · skills/slideshow/SKILL.mdSKILL.md
--- name: slideshow description: Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes. --- ## Output — a navigable deck, not a linear MP4 ## Intent confirmation ## The two pieces ## Schema ## Slide writing rules ## Porting source pages
从上游文件读取的前言和章节标题,时间 2026-09-14 · 完整内容 33,631 字符

01 功能说明

slideshow Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

编写 HyperFrames 幻灯片 —— 演示文稿、路演讲稿,或带有独立分页、片段渐显、分支、热点导航以及内置演讲者模式(含演讲者备注)的交互式演示。也可将现有页面转换为演示文稿。输出是随 hyperframes 一起提供的可导航演示文稿,而非渲染好的 MP4。使用 JSON island 脚本块来声明幻灯片与连接关系。支持片段(幻灯片内的渐显停顿点)、通过热点跳转到离线序列的分支,以及带有可编辑备注(通过 BroadcastChannel 同步)的演讲者模式。

除非明确要求,否则在编写前需先获得确认。严格执行幻灯片写作规则:标题须为完整句式的论断、每张幻灯片只表达一个观点、市场规模采用自下而上估算法、字体最小 30pt。在手工构建任何具名视觉元素之前,先搜索实时目录。在移植源页面时,会保留原始设计、动效、交互及媒体行为,同时将页面运动转换为幻灯片间的过渡效果。

它产出什么

  • 一个包含场景、片段(clips)、GSAP 时间线以及 JSON island 清单的 HyperFrames 作品
  • 一个随 hyperframes 一起提供的可导航演示文稿,包含带演讲者备注的演讲者模式
查看示例提示词 ↗

工作方式

  1. 01
    确认意图

    如果用户明确要求制作幻灯片演示,则继续执行;否则先暂停,说明 HyperFrames 幻灯片演示的含义(可运行的演示文稿、导航、演讲者模式),然后再请求确认。

  2. 02
    用时间属性声明场景

    每张幻灯片都由一个场景支撑。请为每个场景声明 data-composition-id、data-start、data-duration 和 data-label。

  3. 03
    添加 JSON Island

    在 composition HTML 中添加且仅添加一个 type 为 application/hyperframes-slideshow+json 的 script 代码块。

  4. 04
    按照硬性规则编写幻灯片

    标题必须是完整句子形式的论断。每张幻灯片只表达一个想法、配一个视觉元素。以结论开头。市场规模只能自下而上估算。字体不得小于 30pt 等效大小。

  5. 05
    构建视觉效果前先检索目录

    幻灯片每需要一种外观、效果、图表或转场,先用简明英语运行 npx hyperframes catalog --query,阅读排名靠前的结果后再进行创作。

02 找到适合场景

何时使用 slideshow Skill

在 Claude Code 或 Codex 中,当任务是此类 PPT 和幻灯片时,使用 slideshow skill。以下适用性和限制取自该 skill 自己的文件。

适合场景

  • 演示文稿、路演稿或带有独立幻灯片的交互式演示稿
  • 带有分段展示、分支、热点导航和演讲者模式的演示稿
  • 将现有页面转换为演示稿

了解边界

  • 幻灯片意图不明确的请求——创作前必须先确认
  • 观众必须阅读、但小于 40px 的文字

需要提供的信息

  • Figma 源 URL(可选)如果演示稿的内容或故事板来自某个 figma.com URL,请先运行 /figma 以导出素材、获取品牌 token 并重建故事板,然后再进行构建。

03 Skill 内部

slideshow skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 每张幻灯片一个想法配一个视觉元素

    如果你想在幻灯片上再加一组要点或再加一张图表,请拆分为新的幻灯片。

  2. 字体最小为 30pt 等效大小

    在 1920×1080 分辨率下,标题为 72–96px;正文为 48px。任何观众必须阅读的文字都不得低于 40px。

  3. 市场规模只能自下而上估算

    切勿在不展示计算过程的情况下写出 500 亿美元的 TAM。要从单位经济效益向上构建:账户数 × ACV,或交易数 × 抽成率。

  4. 手工构建前先检索目录

    幻灯片每需要一个具名视觉元素,先运行 npx hyperframes catalog --query,阅读排名靠前的结果后再进行创作。真实区块胜于简化的近似效果。

  5. 不要将演示稿渲染为 MP4

    一份演示稿由多个顶层场景 composition 组成,且没有主根 composition,因此渲染只会解析第一个 composition,并悄无声息地生成被截断的 MP4。

  6. 片段时间是 composition 时间线上的绝对位置

    片段时间使用与 data-start 相同的坐标空间,而不是相对于场景起始点的偏移量。它们必须落在幻灯片的 start、end 范围之内(包含边界)。

  7. 移植时保留源页面的还原度

    在实际可行的范围内,尽可能保留原始页面的视觉设计、动效语言、交互行为、媒体行为和呈现方式。

04 投入使用

在 Claude Code 或 Codex 中安装 slideshow

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 slideshow 添加到 Claude Code、Codex 或您的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill slideshow

针对 skills/slideshow/SKILL.md 的通用 skills CLI 形式;仓库可能会自行说明其路径。

为 Skill 提供首个 PPT 和幻灯片任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Build a HyperFrames slideshow for a Series A pitch deck. Start with a hook slide showing SMBs lose $40B/year to manual scheduling. Add a problem slide with three pain points that reveal as fragments: no-shows cost 23% of revenue, manual reminders take 4h/week per staff, and rescheduling friction drives 40% churn. Include a hotspot on the $40B figure that branches to a market-sizing slide showing the bottom-up math: 2.3M SMBs × $17k ACV. End with a solution slide: [product name] automates scheduling for service SMBs, cutting no-shows by 80% in 90 days. Include speaker notes for each slide.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 修复文件并重新运行,直到 lint 报告 0 个错误且验证未报告任何运行时错误
  • 验证每个 slide.sceneId 都能通过 data-composition-id 解析到一个已存在的场景
  • 验证每个 hotspot.target 都引用了一个已定义的 slideSequence id
  • 验证片段时间落在每张幻灯片的 start、end 范围之内

在 OpenDesign 中 从其 SKILL.md 链接导入 slideshow:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
HeyGen
Repository
github.com/heygen-com/hyperframes 分支 main
Skill 文件
skills/slideshow/SKILL.md 验证时记录的内容校验和;提交 558c11b
License
Apache-2.0 来自 LICENSE。
仓库星标数
49,761 GitHub 快照拍摄于 2026-09-14,针对整个 heygen-com/hyperframes 仓库,该仓库在此目录中包含 9 个 skills。不是 slideshow 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. Slideshow 创作约定一个 HyperFrames slideshow 就是一个普通的 composition,加上一个声明幻灯片与连接关系的 JSON island
  2. 输出——一个可导航的演示集,而非线性 MP4发布时需保留 hyperframes;不要渲染为 MP4,因为那会被截断为只包含第一个 composition
  3. 意图确认除非用户明确要求制作 slideshow,否则在开始创作前先进行确认;经过路由的意图已被预先确认
  4. 两个组成部分通过 data-composition-id 与 timing 声明的场景;包含 slides 与 slideSequences 数组的 JSON island
  5. SchemaSlideshowManifest、SlideRef、SlideHotspot 和 SlideSequence 的字段定义与要求
  6. 幻灯片撰写规则标题应为完整句子,每张幻灯片只表达一个观点,自下而上确定尺寸,最小 30pt,先在目录中搜索
  7. 移植源页面保留原始设计、动效、交互与媒体;将页面移动转化为幻灯片过渡;接入媒体事件
  8. 片段:在幻灯片内呈现停留点幻灯片范围内的绝对时间轴时间;控制器在点击 Next 时定位到每个片段;片段之间不进行播放
  9. 分支:热点与幻灯片序列分支幻灯片不包含在主线中;点击热点会将导航压入栈;返回时回到父级
  10. 示例:包含片段与分支的三张幻灯片演示集包含场景、JSON island、GSAP 时间轴和一个分支序列的完整 HTML 骨架
  11. 封装组件用 hyperframes-slideshow 进行封装;提供导航、键盘、触控、热点支持;Present 会打开观众视图标签页;全局静音
  12. 独立运行 slideshow(临时方案)在引擎托管的预览功能上线之前,独立演示需要一些变通方法;参见 references/standalone-harness.md
Skill 自身的描述
"创作 HyperFrames 幻灯片演示——包含离散幻灯片、片段渐显、分支、热点导航和内置演讲者模式(含演讲者备注)的演示文稿、推介文档或交互式幻灯片。输出是可导航的幻灯片,而非渲染的 MP4。如果用户未明确要求制作幻灯片演示,请在创作前确认。不清楚时 → /hyperframes。"

来自 SKILL.md 的前置描述。完整文件约 33,631 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 slideshow Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

什么是片段(fragment),它们如何工作?

片段是幻灯片 start、end 范围内、以秒为单位的绝对 composition 时间轴时间点,控制器会在该处保持某个呈现状态。

播放器进入带片段的幻灯片时会先定位到 fragments[0],之后每次点击 Next 都会定位到下一个片段。到达最后一个片段后,Next 会前进到下一张幻灯片。导航是由定位(seek)驱动的,而不是由播放驱动的。

Slideshow

在真实的 PPT 和幻灯片任务上运行 slideshow。

下载 OpenDesign,从其 SKILL.md 链接导入 slideshow,粘贴上面的提示词,并在结果生成前阅读计划。

终端
npx skills add https://github.com/heygen-com/hyperframes --skill slideshow

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows