跳转到使用指南
md-slides作者 Alireza Rezvani

MD Slides Skill.

用于 PPT 和幻灯片的 Claude Code 和 Codex skill:将 Markdown 文档转换为品牌幻灯片。

  • Presentations
  • HTML 幻灯片
alirezarezvani/claude-skills · markdown-html/skills/md-slides/SKILL.mdSKILL.md
--- name: md-slides description: Converts a markdown deck (slides separated by `---` HR boundaries or by `# ` H1 headings, with optional `<!-- notes: ... -->` presenter notes blocks) into a single-file HTML presentation with arrow-key / space / PgDn / PgUp / Home / End / P / Esc keyboard navigation, presenter mode (split view with current slide + speaker notes + clock + next-slide preview), URL-hash deep linking, and `@media print` page-per-slide … --- ## When to invoke ## Pipeline ## What ships in the HTML ## Hard rules ## Forcing-question library (Matt Pocock grill discipline) ## Distinct from
前言和章节标题读取自上游文件,2026-09-14 · 完整 6,506 字符

01 功能说明

md-slides Skill 在 Claude Code 和 Codex 中的功能

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

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

以 skill 自身的术语

md-slides 将一份 markdown 幻灯片文稿转换为可在任何浏览器中运行的单文件 HTML 演示。一份文稿由 --- 水平线分隔或 # 一级标题分隔的幻灯片组成,可选包含 <!-- notes: ... --> 演讲者备注块。三个 Python 标准库脚本组成流水线:slide_splitter.py、presenter_notes_parser.py、deck_html_renderer.py。

输出内容包含键盘导航、URL 哈希深链、进度条与幻灯片计数器、带时钟和下一页预览的演讲者模式,以及用于导出每页一张幻灯片 PDF 的打印样式表。它复用 md-document 的 markdown 解析器,并通过 config_loader.py 读取设计系统 token。对于没有明确幻灯片边界的输入、只有 1 张幻灯片的文稿、少于 100 行的文件,以及未通过 --strict-notes 50% 覆盖率检查的文稿,它会拒绝处理。

它产出什么

  • 渲染生成的 HTML 幻灯片,以 deck-{slug}.html 的形式写入解析出的默认输出目录,如遇冲突则依次追加 -2、-3 等后缀。
  • 存放拆分后幻灯片的中间 JSON 文件,随后是附带备注的幻灯片 JSON 文件。
  • 通过打印样式表从浏览器打印生成的每页一张幻灯片的 PDF。
查看示例提示词 ↗

工作方式

  1. 01
    将文稿拆分为有序的幻灯片

    slide_splitter.py 读取源 markdown,并按 --- 水平线或一级标题进行拆分,默认自动检测边界样式,然后写出有序的幻灯片列表。

  2. 02
    为每张幻灯片附加演讲者备注

    presenter_notes_parser.py 扫描每张幻灯片以查找备注块,并将其附加到对应幻灯片,以便演讲者模式在右侧面板中展示内容。

  3. 03
    渲染单文件 HTML 幻灯片

    deck_html_renderer.py 将幻灯片与设计系统 token 结合,生成最终文稿,在命令行中接收标题和输出路径。

  4. 04
    应用设计系统 Token

    十二个品牌 CSS 自定义属性来自设计系统,design_style 会改变幻灯片布局的密度。

  5. 05
    拒绝非演示文稿的输入

    当输入没有明确的幻灯片边界、只会生成单张幻灯片,或在 --strict-notes 下未通过备注覆盖率检查时,该 skill 会退出而不是执行转换。

02 找到适合场景

何时使用 md-slides Skill

在 Claude Code 或 Codex 中处理此类 PPT 和幻灯片任务时使用 md-slides skill。适用范围和限制详见该 skill 自身文件。

适合场景

  • 某个 orchestrator 将输入分类为 SLIDES 并路由到这里。
  • 有人使用斜杠命令直接在一个 markdown 文件上调用该 skill。
  • 该 markdown 已包含 3 条或更多 --- 分隔线,或 5 个或更多带简短正文的 H1 标题。
  • 该演示文稿将进行现场展示,而这正是主讲人备注变得重要、自主阅读则使其变为可选的场景。

了解边界

  • 输入是一份长篇规格文档而非演示文稿;那应交给 md-document 处理。
  • 输入是代码评审内容,属于 md-review 的范畴。
  • 它不是一个图形设计工具:Keynote 和 PowerPoint 才是这类工具,而它处理的是由浏览器投影的、以 markdown 编写的演示文稿。

需要提供的信息

  • markdown 演示文稿文件其路径通过 --input 传递给 slide_splitter.py,拆分结果通过 --output 写入一个 JSON 文件。
  • 边界风格幻灯片必须可区分,无论是通过 --- 分隔线还是通过 H1 标题,splitter 都需要有可以切分的依据。
  • 可选的主讲人备注备注以幻灯片内的 HTML 注释块形式提供,并由第二个流水线步骤解析后按幻灯片附加。

03 Skill 内部

md-slides Skill 赋予 Claude Code 和 Codex 的规则

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

  1. 边界要求

    自动模式要求源文件中至少有 3 条分隔线或至少 5 个 H1 标题;若两者都不满足,该 skill 会拒绝执行,此时输入应改为交给 md-document 处理。

  2. 不允许单张幻灯片输出

    若渲染结果只有一张幻灯片,会被视为海报而非演示文稿而被拒绝,退出码为 5。

  3. 最少 100 行源内容

    少于 100 行的输入会被拒绝,采用的是所有转换器统一使用的 Shihipar 阈值。

  4. Onboarding 门槛

    未完成 onboarding 该 skill 拒绝运行,这与所有转换器采用的门槛相同。

  5. 严格备注覆盖率

    在 --strict-notes 模式下,如果少于 50% 的幻灯片带有备注,该 skill 会拒绝处理该演示文稿,因为它并未针对演讲模式做好准备;此拒绝的退出码为 7。

  6. 对过长幻灯片发出警告

    超过 40 行源内容的幻灯片会触发关于信噪比的软警告;deck 仍会渲染,但会显示出该行数。

  7. 保持 Output 单文件

    所有 CSS 和 JS 均为内联;唯一的外部资源是 Google Fonts 的 CSS,Prism.js 通过 --syntax 选择性启用,而非默认打包。

  8. 无框架运行时

    该 deck 仅使用原生 JS 与键盘事件处理器,不涉及 React、Vue 或 Svelte 运行时。

04 投入使用

在 Claude Code 或 Codex 中安装 md-slides

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

将 md-slides 添加到 Claude Code、Codex 或你的 Agent

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

Terminal
npx skills add https://github.com/alirezarezvani/claude-skills --skill md-slides

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

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

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

Starter prompt
Convert [deck.md] into a presentation. It uses --- HR boundaries for slides and each slide has a <!-- notes: ... --> block. Title it "[Talk title]" and run it with --strict-notes, since it will be presented live rather than read on its own. Write the result to [output/deck.html].

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

检查首次结果

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

  • 在浏览器中打开该 deck 并逐一测试按键:方向键、Space 和 PgDn 前进,PgUp 后退,Home 和 End 跳转,P 切换演讲者模式,Esc 退出。
  • 测试深链接:#3 应跳转到第 3 张幻灯片,浏览器的前进和后退应逐张切换幻灯片,而共享的 deck.html#5 应直接打开第 5 张幻灯片。
  • 核对右下角的幻灯片计数器(形式如「3 / 12」)是否与 deck 的总数一致。
  • 确认 reduced-motion 媒体查询被遵循,即对请求减少动效的用户会去除动画。

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

05 开源、可追溯

来源、许可与验证

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

Skill 文件
markdown-html/skills/md-slides/SKILL.md 内容校验和已在验证时记录;提交 19392f7
License
MIT 来自 LICENSE。
仓库星标数
25,934 GitHub 快照拍摄于 2026-09-14,针对整个 alirezarezvani/claude-skills 仓库,该仓库在此目录中包含 5 个 skills。这不是 md-slides 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 何时调用路由症状,以及哪些输入应被拒绝或转发到别处。
  2. 流水线三条命令,分别用于拆分、解析笔记,以及渲染该 deck。
  3. HTML 中包含的内容导航、深链接、演讲者模式、打印样式表、token、解析器复用。
  4. 硬性规则拒绝阈值、软警告,以及单文件输出约束。
  5. 逼问清单(Matt Pocock 式追问规范)在转换源文件前需要确定的五个问题。
  6. 与之区别它与 md-document、md-review、落地页、Keynote 的不同之处。
  7. 输出产物输出路径解析及冲突后缀约定。
  8. 参考资料该 deck 惯例背后的来源与准则。
Skill 自身的描述
「将 markdown 演示文稿(通过 `---` HR 边界或 `# ` H1 标题分隔幻灯片,带有可选的 `<!-- notes: ... -->` 演讲者备注块)转换为单文件 HTML 演示文稿,支持方向键 / space / PgDn / PgUp / Home / End / P / Esc 键盘导航、演讲者模式(分屏视图,包含当前幻灯片 + 演讲者备注 + 时钟 + 下一张预览)、URL 哈希深度链接,以及 `@media print` 的逐页 PDF 导出。当 markdown-html-orchestrator 将输入分类为 SLIDES 时触发,或通过 /cs:md-slides 直接调用时触发。复用 md-document 的 markdown 解析器进行幻灯片主体渲染,并通过 config_loader.py 读取 design-system token。如果输入没有明确的幻灯片边界、生成单张幻灯片的演示文稿,或 `--strict-notes` 开启时备注覆盖率 < 50%,则拒绝执行。在 orchestrator 路由后使用。」

来自 SKILL.md 的 front-matter 描述。完整文件约 6,506 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 md-slides Skill 的问题

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

哪些编程 Agent 可以运行此 skill?

该文件列出 claude-code、codex-cli、cursor、antigravity、opencode 和 gemini-cli 作为兼容工具,也可以由 markdown-html-orchestrator 将某输入分类为 SLIDES 时触发。

如果我的 markdown 没有明确的幻灯片边界怎么办?

该 skill 会拒绝处理而不会猜测,并以代码 6 退出;文档记录的下一步是将该文件路由到 md-document,后者处理的是一份连续文档,而非离散的幻灯片。

如何从幻灯片中导出 PDF?

使用打印样式表:从浏览器打印会生成每页一张幻灯片的 PDF,因此导出不需要额外的工具。

MD Slides

在真实的 PPT 和幻灯片演示任务上运行 md-slides。

下载 OpenDesign,从其 SKILL.md 链接导入 md-slides,粘贴上述提示词,并在查看结果前阅读计划。

终端
npx skills add https://github.com/alirezarezvani/claude-skills --skill md-slides

OpenDesign 桌面客户端

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

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

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

支持 macOS 与 Windows