程序员做分享 PPT 的正确姿势:Markdown + AI 的 Slidev 工作流

我这两年做过不少技术分享，最烦的不是写内容，是排版。

内容想清楚了，往 PPT 里倒腾才是噩梦：对齐、调字号、挪图片，改一个标题要动三个页面。更别提版本管理，PPT 是二进制文件，git 里没法 diff，协作全靠微信传文件。直到有一次我试着用 Markdown 写幻灯片，才发现这条路走通了。

Slidev 就是干这个的。它把幻灯片变成 Markdown 文本，--- 分隔一页页内容，代码高亮、图表、公式全是原生支持。文本文件意味着两件事：git 能管，AI 能改。而 AI 最擅长的恰恰就是改文本。

所以用 AI 做 PPT 的正确姿势，不是让 AI 生成一个排版精美的成品，而是让 AI 帮你写 Markdown，再用 Slidev 渲染出来。

实操：从零到一份 AI 协作的幻灯片

第 0 步：先定主题

别急着让 AI 写幻灯片，主题没定，AI 写出来的东西是散的。两种方式：

• • 你已经有想法：直接把主题写进提示词
• • 只有模糊方向：让 AI 出候选，你来挑

我让 AI 出过候选："我下周要给团队讲 Vue 3 响应式原理，帮我列 3 个分享主题方向，每个带一句话说明适合什么听众。"它给了三个方向，我挑了一个，又让它展开成大纲，确认没问题才开始生成幻灯片。这一步多花两分钟，后面少改十页。

顺带一提，Slidev 的"主题"还有另一层意思，视觉皮肤。默认主题是 default，想换外观就装别的：npm install @slidev/theme-seriph，文件头写 theme: seriph。不过刚开始用，默认主题完全够。

第 1 步：建项目

pnpm create slidevpnpm dev

第二条命令跑起来，浏览器打开 http://localhost:3030 就能看到第一页幻灯片。窗口左边是 Markdown 源码，右边是渲染效果，改一行保存，页面立刻刷新。

第 2 步：给 AI 装 Slidev 官方技能

这是关键一步。AI 不一定懂 Slidev 的语法细节，瞎写的代码块标注、错误的 frontmatter，能让你折腾半天。Slidev 官方出了 skills，一条命令装进你的 AI 编程智能体：

npx skills add slidevjs/slidev

装完之后，AI 就带上了 Slidev 的完整知识：语法、分隔符、frontmatter、点击动画、代码高亮、导出命令，全都知道。Claude Code、Codex 这类支持 skills 的智能体都能用。

第 3 步：让 AI 生成幻灯片

官方文档给了几个示例提示词：

• • Create a Slidev presentation about TypeScript generics with code examples
• • Add a two-column slide with code on the left and explanation on the right
• • Set up click animations to reveal bullet points one by one
• • Configure the presentation for PDF export with speaker notes

翻译成中文场景一样好使。我给自己写过这种：

用 Slidev 做一个 Vue 3 响应式原理的分享，8 到 10 页。第一页封面，讲清楚为什么需要响应式；中间用两栏布局，左边代码右边讲解，用到 {monaco} 代码块；再加一页 Mermaid 流程图讲依赖收集；最后留一页 Q&A。给每页写演讲备注。

AI 生成完，把内容贴进 slides.md，浏览器里立刻能看到效果。

第 4 步：预览与迭代

生成只是开始，迭代才是重头。哪页不满意，直接跟 AI 说"第三页的代码高亮改成 {2,3}，只标前两行""第五页改成上下布局"。

常用的几个小技巧：

• • v-click 让元素点击后逐个出现，控制演示节奏
• • 代码块标注高亮行，如 {2,3}
• • ::right:: 声明双栏布局的右栏
• • HTML 注释 <!-- 备注 --> 写演讲提示

第 5 步：导出

分享前要导出：

pnpm run export

默认导出 PDF，要 PPTX、PNG 也行，slidev export --format pptx。

有个坑提前说：导出依赖 playwright-chromium，第一次跑会报找不到浏览器，装一下就好：

pnpm add -D playwright-chromium

技能包里有什么

Slidev 官方技能覆盖的知识面，装完 AI 就都懂了：

对 AI 来说，这些不是装饰，是"别给我生成错误语法"的说明书。

VS Code 插件：antfu.slidev

日常编辑还是在编辑器里进行。Slidev 官方有 VS Code 扩展，市场搜 antfu.slidev 就能装，或者命令行：

code --install-extension antfu.slidev

装完活动栏会多一个 Slidev 图标。点开之后是这么用的：

1. 1. 项目树：显示工作区里所有 Slidev 项目
2. 2. 幻灯片树：当前项目所有页面的列表，点哪页跳哪页
3. 3. 预览面板：侧边实时预览当前页
4. 4. 一键启动：在项目树上点一下，dev server 直接起

我常用的三个功能：

• • 拖拽排序：整页幻灯片直接拖，顺序就换了，不用手动改文档
• • 块折叠：每页 Markdown 折叠起来，长文档看着清爽
• • 实时预览：改源码旁边立刻出效果，基本不用切浏览器

命令面板里搜 "Slidev" 能看到全部命令。想指定哪些文件算幻灯片，加一行配置：

{  "slidev.include": ["**/presentation.md"]}

预览效果：演讲者模式

进阶玩法：内置 MCP server

这是 Slidev 藏得比较深、但很实用的功能：内置了一个 MCP server，让 AI 可以直接操作你的幻灯片，而不是只会改文本。

dev server 跑起来之后，MCP 地址是：

http://localhost:3030/__mcp

Claude Code 里加一下：

claude mcp add --transport http slidev http://localhost:3030/__mcp

之后 AI 就有了 8 个工具：

对比一下：让 AI 直接改 Markdown 文本，它得自己处理 --- 分隔符、frontmatter 归属，容易改错；用这些工具，AI 按"第几页"来操作，改完自动热重载，稳得多。

写在最后

这套流程我用了小半年，感受是：它适合所有"内容比排版重要"的场合，技术分享、内部培训、开源项目宣讲、录视频课的脚本。不太适合的也有，对外商业提案那种讲究设计感的场合，Slidev 默认主题确实素，除非你花时间配主题。

AI 做 PPT 这两年工具不少，但我始终觉得方向比工具重要。让 AI 干它擅长的，写内容、改文本，把渲染交给专业工具，最后出来的东西快、能看、还能进 git。

资源都在这：

• • Slidev 官网：https://sli.dev
• • 中文文档：https://cn.sli.dev
• • 与 AI 协作指南：https://cn.sli.dev/guide/work-with-ai
• • 官方仓库：https://github.com/slidevjs/slidev
• • VS Code 插件：https://marketplace.visualstudio.com/items?itemName=antfu.slidev
• • Claude Code skills 说明：https://code.claude.com/docs/en/skills

你平时用什么工具做技术分享的 PPT？评论区聊聊。