- AI 技能/插件
- 前端
【免费下载链接】html-ppt-skill
HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML presentations
这是一份面向 HTML PPT Studio（html-ppt skill）的演讲者模式（Presenter Mode）实战指南。文章完整讲解如何判断何时该启用演讲者模式、如何用presenter-mode-reveal模板快速产出带逐字稿的 deck，以及如何给任意 full-deck 模板手工接入S键演讲者视图。读完本文，你将掌握逐字稿写作的三条铁律、演讲者窗口四张磁吸卡片的交互与同步原理，并能直接用S / T / ← →等快捷键完成一场双屏演讲。
本文以 references/presenter-mode.md 为骨架，结合 templates/full-decks/presenter-mode-reveal/README.md、模板示例与 assets/runtime.js 的源码实现展开，所有结论均可回到仓库文件验证。
何时使用演讲者模式
html-ppt skill 里做带逐字稿的演讲者模式 PPT，本质上解决的是"照着讲、但绝不能念稿"的正式演讲场景。当用户需求命中以下任意一项时，应优先选择演讲者模式：
- 提到"演讲"、"分享"、"讲稿"、"逐字稿"、"speaker notes"
- 提到"presenter view"、"演讲者视图"、"演讲者模式"
- 需要"30 分钟 / 45 分钟 / 1 小时的分享"
- 说"我要去给团队讲 xxx"、"要做一场技术分享"、"要做路演"
- 强调"不想忘词"、"怕讲不流畅"、"需要提词器"
反之，如果用户只要做一份"静态好看的 PPT"（例如小红书图文、产品图册、汇报 slides 自己不讲），不需要演讲者模式，直接走普通 deck 即可，避免过度设计。
两种做法：直接用模板 vs 手工接入
推荐做法：直接使用presenter-mode-reveal模板
cp -r templates/full-decks/presenter-mode-reveal examples/my-talk open examples/my-talk/index.html该模板（templates/full-decks/presenter-mode-reveal/index.html）已经预设好所有必需元素：
S键切换演讲者视图（弹出独立窗口，原页面保持观众视图）- 5 个主题可用
T键循环：tokyo-night/dracula/catppuccin-mocha/nord/corporate-clean，在<html><section class="slide"> <h2>你的标题</h2> <p>内容...</p> <aside class="notes"> <p>这里是演讲时要说的话，150-300 字...</p> </aside> </section>从源码看，assets/runtime.js 将
.notes, aside.notes, .speaker-notes统一视为演讲者备注选择器（NOTE_SEL），而 assets/base.css 用.notes,.speaker-notes{display:none!important}保证观众永远看不到这些内容——两者必须保持同步，若你在备注选择器中新增一类，两处都要改。逐字稿写作三铁律
这是整个方法论的核心。AI 在帮用户写逐字稿时必须遵守：
铁律 1：不是讲稿，是"提示信号"
错误写法（像在念稿）：
大家好，欢迎来到今天的分享。今天我将要给大家介绍一下我们团队在过去三个月做的工作。 首先，我们来看一下背景情况。在过去的三个月中，我们遇到了以下几个问题……正确写法（提示信号 + 加粗核心）：
<p>欢迎！今天分享我们团队<strong>过去 3 个月</strong>的工作。</p> <p>先说<em>背景</em>——三个月前我们遇到了<strong>三个核心问题</strong>： 延迟高、成本炸、稳定性差。</p> <p>接下来逐个讲解怎么解的。</p>差别：正确版本把关键词加粗，过渡句独立成段，看一眼就能接上。逐字稿的真实作用是"提示信号"——把核心要点加粗、过渡句单独成段、数据和专有名词列清楚，讲的时候瞄一眼就能接得上，但说出来的还是你自己的话。
铁律 2：每页 150–300 字
- 少于 150 字：提示不够，讲到一半会卡
- 多于 300 字：你根本来不及扫完
- 2–3 分钟/页是最舒服的节奏
铁律 3：用口语，不用书面语
❌ 书面语 ✅ 口语 因此 所以 该方案 这个方案 然而 但是 / 不过 进行优化 优化一下 我们将会 我们会 / 接下来 综上所述 所以简单来说 检查方法：写完读一遍，听起来像说话才对。念出来像 AI 机器人就重写。
必备 HTML 结构
演讲者模式 deck 的完整骨架如下（以
examples/my-talk为例，资源路径需按实际目录层级调整）：<!DOCTYPE html> <html lang="zh-CN"><!-- 错误：这段文字观众会看到 --> <p style="font-size:12px;color:gray"> 这里讲 xxx，然后讲 yyy... </p>正确：
<aside class="notes"> <p>这里讲 xxx，然后讲 yyy...</p> </aside>.notes类默认display:none（见 assets/base.css），只在演讲者视图可见。忘记引入 runtime.js
没有
<script src="../../../assets/runtime.js"></script>= 没有S键、没有演讲者视图、没有翻页。逐字稿用书面语
念出来像 AI 机器人。写完一定读一遍。
每页 50 字
提示不够，照样忘词。
每页 500 字
眼睛根本扫不过来，等于没写。
用 AI 生成逐字稿的标准 prompt
"请为每一张 slide 写一段150-300 字的逐字稿，放在
<aside class="notes">里。 要求：- 用口语，不要书面语（所以/但是/接下来，不是因此/然而/综上所述）
- 把核心关键词用
<strong>加粗 - 过渡句独立成段（每段 1-3 句）
- 读起来像说话，不像念稿
- 结尾要有自然的过渡，引出下一页"
模板自身的示例（templates/full-decks/presenter-mode-reveal/index.html）就是遵守上述铁律的最佳范本：每页
<aside class="notes">内 4 个左右段落，核心句加<strong>、观点句加<em>，段落间用"先过一下今天的议程""OK，进入第一部分"这类口语过渡。推荐搭配
- 主题：
tokyo-night（深色，技术分享首选）、corporate-clean（浅色，商务汇报）、dracula（深色备选）；模板还预置了catppuccin-mocha与nord，共 5 个演讲场景主题 - 字体：默认 Noto Sans SC + JetBrains Mono，无需更改（见 assets/fonts.css）
- 动效：克制使用，
fade-up/rise-in最自然，不要用glitch-in/confetti-burst之类花哨的；动效参考 references/animations.md - 页数：30 分钟分享 = 8–12 页；45 分钟 = 12–16 页；1 小时 = 16–22 页
小结
演讲者模式的价值不在于"多一个视图"，而在于把当前页预览、下一页预览、逐字稿、计时器这四块信息同时摆到演讲者眼前，配合"150–300 字提示信号式逐字稿"的方法论，让"看一眼就接得上"成为可复制的能力。而这一切只需要
<aside class="notes">+ assets/runtime.js 两样东西——无论你是复制presenter-mode-reveal模板直接开讲，还是在任意 full-deck 上手工接入，都能获得同样的双屏体验。赞- AI 技能/插件
- 前端
点击查看免费下载【免费下载链接】html-ppt-skill
HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML presentations
项目地址：https://gitcode.com/gh_mirrors/ht/html-ppt-skill相关推荐
html-ppt-skill 演讲者模式模板深度解析：磁吸卡片式 Presenter View 与逐字稿工作流
html ppt skill 演讲者模式模板深度解析：磁吸卡片式 Presenter View 与逐字稿工作流 本篇围绕 html ppt skill 仓库中的
AI 技能/插件前端html-ppt演讲者模式全解：像素级预览+逐字稿提词器+计时器，让技术分享不再忘词
html ppt演讲者模式全解：像素级预览+逐字稿提词器+计时器，让技术分享不再忘词 html ppt （HTML PPT Studio）是一个开源的 HTML
AI 技能/插件前端html-anything 演讲者模式 Deck（deck-presenter-mode）技能详解：逐字稿、提词器 Popup 与 5 主题切换
html anything 演讲者模式 Deck（deck presenter mode）技能详解：逐字稿、提词器 Popup 与 5 主题切换 导读 deck
AI 应用人工智能AI AgentAI 写作媒体生成
上一篇：告别虚拟机卡顿！WinApps与Linux桌面整合度深度测评：文件拖拽/剪贴板/通知系统评分下一篇：mangadesk高级配置手册：自定义下载设置、语言偏好和压缩选项
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
