不想再折腾 PPT 排版了?试试用 Slidev 把幻灯片“写”出来

你是不是还在为做 PPT 犯愁？内容想好了，排版还没动；排版调好了，内容又要改；内容改完了，排版又得从头再来一遍。一份十几页的汇报，真正花在想内容上的时间，可能还不到一半。

其实还有一种做法：让 AI 写一个文本文件，浏览器一打开，就是一份幻灯片。改内容就是改文字，排版不用你管。这个工具叫 Slidev，官网是 sli.dev。

今天我们就来聊聊这个程序员圈子里常用的演示工具，看看怎么用它换掉日常那些讲给别人听的 PPT。

1 Slidev 没有画布

很多人听到“做幻灯片的工具”，第一反应是又一个 PowerPoint：打开软件，新建一页，拖个文本框进去。

Slidev 里没有画布，也没有文本框。整份演示就是一个叫 slides.md 的文本文件，里面是一行一行的文字。哪里分页、这一页怎么排，都用几个简单的符号写在文字里。浏览器负责把它显示成幻灯片。

这带来两个直接的变化：

• 排版交给“布局”和“主题”。布局决定一页怎么排（居中、左右两栏、封面），主题决定整体的配色和字体。你只选名字，不动手调。
• AI 可以直接写。它最擅长的就是写文本，你说“做一份 8 页的演示”，它写好 slides.md，你在浏览器里看效果，觉得哪页不对，让它改。

代价是你没法把一张图拖到“左边偏下一点”的位置。废话不多说，咱先看个实例。

2 一个类比：Markdown 的预览

2 一个类比：Markdown 的预览

Markdown 是一种用简单符号标格式的写法：一行开头加 # 就是标题，加 - 就是列表。很多笔记软件和编辑器都支持它，写完切到预览或阅读模式，同一份文字就变成了排好版的页面。你不用去调“标题用几号字”，字号、颜色、间距都由软件的样式决定。

Slidev 做的是同一件事，只是排出来的是一页一页的幻灯片。你写的还是 Markdown，多了一个规则：单独一行 --- 表示“下一页”。

没用过 Markdown 也不要紧，只需要知道四条规则，后面会逐条分析。

3 动手做一份 4 页演示，再导出 PDF

只想先看看效果、暂时不想装环境的话，可以打开官网提供的在线版 https://sli.dev/new，直接在浏览器里改 Markdown、看预览。想长期用、导出 PDF，还是要在本地装，也就是下面的步骤。

3.1 准备：终端、Node.js、pnpm

Slidev 要在“终端”里用命令启动。终端就是那个黑底白字、输命令的窗口：Mac 上叫“终端”，Windows 上用 PowerShell。

它还需要两个程序：

在终端里分别输入下面两行，各回车一次，能看到版本号就说明装好了：

node -vpnpm -v

我两台机器早就装好了这两样，还没装的话，按官网文档的做法：

• Node.js：到 https://nodejs.org 下载标着 LTS（长期支持版）的安装包，双击安装，一路默认即可。
• pnpm：装好 Node.js 后，在终端里运行下面这行。Node.js 自带一个叫 npm 的安装工具，这行就是用它把 pnpm 装上。

npm install -g pnpm

装完关掉终端再重新打开，再用 node -v、pnpm -v 检查一遍。

3.2 新建项目，第二个问题选 no

新建一个专门的项目文件夹：

文件夹可以在访达或资源管理器里先建好，也可以用 mkdir 命令建。建好后用 cd 进入它，cd 就是“走进某个文件夹”，后面的命令都在这个文件夹里执行。然后运行创建命令。例如：

Mac：

mkdir -p ~/LLM/workspace/Slidevcd ~/LLM/workspace/Slidevpnpm create slidev

Windows：

mkdir D:\LLM\workspace\Slidevcd D:\LLM\workspace\Slidevpnpm create slidev

文件夹已经存在的话，跳过 mkdir 那一行。

它会问两个问题：

• 项目名称：输入 practice，回车。
• Install and start it now using npm?    (输入No)

（这里要多说两句。npm 是 Node.js 自带的另一个安装工具，和 pnpm 是同一类东西。选 yes 就会用 npm 安装，我第一次在 Mac 上就选了 yes，等了大约 10 分钟，启动时报错 Cannot find native binding。官网也把 npm 的创建方式标成了不推荐，理由是每新建一个项目都要重新下载一遍，又慢又占空间。所以这里选 no，下一步自己用 pnpm 装。）

选 no 之后会生成一个 practice 文件夹，只需要关心其中一个文件：

3.3 安装依赖，启动预览

“依赖”就是 Slidev 运行要用到的那一堆软件包。进入项目，安装：

cd practicepnpm install

装完先试着启动：

pnpm dev

启动成功后，浏览器会自动打开一份示例演示（slides.md）。按键盘右方向键能翻页，就说明跑通了。终端里会打印几个网址，最常用的两个：

localhost 指你自己这台电脑，这些网址只有你本机能打开。冒号后面的数字是端口，可以理解成门牌号，以你终端里显示的为准。

pnpm dev 运行期间，这个终端窗口一直被它占着，不能再输别的命令。需要运行其他命令时，先在这个窗口里按 Ctrl+C 停掉它，停掉后浏览器里的页面就打不开了。下次要预览，先 cd 进入 practice 文件夹，再 pnpm dev。

3.4 认识 slides.md 的四条规则

保持浏览器开着，用编辑器打开 practice/slides.md。

编辑器要选对。推荐 VS Code，它是微软出的免费编辑器，到 https://code.visualstudio.com  下载安装，打开后用“文件 → 打开文件”选中 slides.md 即可。Typora 这种边写边显示效果的编辑器，要切到源码模式再写，否则它会悄悄在 --- 附近加空行，设置就失效了。

打开我们创建的 practice 文件夹，里面的 slides.md 就是默认的演示文档。做本文这份演示，只需要知道四条规则：

设置块里，--- 和内容之间不能有空行。正确的样子：

---layout: center---

先试一下自动刷新：把文件开头 title: 那一行改成别的字，保存。不用碰浏览器，页面自己就变了。

3.5 写第一份自己的演示：mySlidev.md

示例的 slides.md 先留着当参考，我们另建一份自己的。在 practice 文件夹里新建一个文件 mySlidev.md，把下面这段粘进去，保存：

---theme: seriphtitle: 我的第一份 Slidev---# 我的第一份 Slidev用 Markdown 写演示文稿---# 为什么用它- 内容是纯文本- AI 可以直接写和改- 可以用 git 记录每次改动---# 谢谢有问题欢迎提问

四个 --- 里，前两个包着全局设置，后两个各自是一个分页。第二页里的 git 是一个记录文件每次改动的工具，不用它也不影响做演示。

然后回到终端，按 Ctrl+C 停掉正在运行的示例预览，再用下面这行打开自己的这份。pnpm dev 后面跟文件名，就打开这个文件；不跟，默认打开 slides.md：

pnpm dev mySlidev.md

浏览器里现在应该是 3 页，左右方向键来回翻。后面的练习都在 mySlidev.md 里改。

3.6 用布局换版式：封面、两栏、居中

现在每页都是默认版式。下面我们换一些版式试试，只需要修改 mySlidev.md：

第一处，把第 1 页改成封面。第 1 页的设置和全局设置共用文件开头那一块，直接加一行 layout: cover：

---theme: seriphtitle: 我的第一份 Slidevlayout: cover---

第二处，在“为什么用它”后面加一页左右两栏，两栏之间用 ::right:: 隔开。这一页开头的设置块，第一行 --- 同时充当分页符，所以要把“为什么用它”和“谢谢”之间原来那个 --- 换成下面这一整段，不要再另加分页：

---layout: two-cols---# 优点- 内容是纯文本- 版本可追踪::right::# 缺点- 没有拖拽排版- 需要装 Node

第三处，把“谢谢”页改成居中。同样，把“谢谢”前面那个分页的 --- 换成这个设置块：

---layout: center---# 谢谢

三处改完，整个文件应该是这样，拿不准的话直接整段替换：

---theme: seriphtitle: 我的第一份 Slidevlayout: cover---# 我的第一份 Slidev用 Markdown 写演示文稿---# 为什么用它- 内容是纯文本- AI 可以直接写和改- 可以用 git 记录每次改动---layout: two-cols---# 优点- 内容是纯文本- 版本可追踪::right::# 缺点- 没有拖拽排版- 需要装 Node---layout: center---# 谢谢有问题欢迎提问

保存后翻一遍，一共 4 页：第 1 页是灰色渐变底、白字的封面，第 3 页分成左右两栏，最后一页居中。

上面用到了 cover、two-cols、center ，官网还列了其他内置布局：

3.7 点一下出一条，加上演讲者备注

讲 PPT 时常见的需求是“点一下，出一条”。把“为什么用它”那页的列表用 <v-clicks> 包起来，前后各空一行：

# 为什么用它<v-clicks>- 内容是纯文本- AI 可以直接写和改- 可以用 git 记录每次改动</v-clicks>

翻到这一页时，每按一次右方向键出一条，三条出完再按才翻到下一页。

演讲者备注也在这里顺手加上，写在这一页的末尾：

<!--这页要强调：AI 能直接改的是文本-->

打开终端里打印的 /presenter/ 网址，就能看到备注。官网建议开两个浏览器窗口，一个投给观众，一个留给自己。

3.8 换主题

主题管整体的配色和字体，在文件开头的 theme: 一行改。项目已经自带两个主题：seriph 和 default。把 theme: seriph 改成 theme: default 保存，风格就变了，内容不变。

想要更多主题，去官网的主题库（sli.dev/resources/theme-gallery）挑。填名字时要注意，主题名不能有空格，用连字符连起来，以主题卡片上的包名为准。比如 Apple Basic 这个主题，要写：

theme: apple-basic

这里我们换一个 field-manual 主题试试，只需要把 mySlidev.md 顶部的 theme 改成：

theme: field-manual

用到还没装的主题时，Slidev 会提示安装，选 yes。新版 pnpm 在这一步可能报 ERR_PNPM_IGNORED_BUILDS，Slidev 随之退出。别慌，主题其实已经装上了：这个主题带进来的几个旧零件要在安装时运行脚本，新版 pnpm 默认不让没经过你批准的包运行脚本。看报错里 Ignored build scripts: 后面列的包名，照着批准，再重新启动。我遇到的是这两个：

pnpm approve-builds esbuild vue-demipnpm dev mySlidev.md

3.9 导出 PDF、图片和 PPTX

演示做好了，要发给别人，就得导出。先在运行预览的终端里按 Ctrl+C 停掉它，确认终端还在 practice 文件夹里。

导出时 Slidev 要借一个看不见界面的浏览器，把每一页“拍”下来，所以先装这个浏览器：

pnpm add -D playwright-chromium

-D 表示这个包只在制作时用，演示本身用不到它。下载的浏览器放在电脑的公共位置，以后别的项目再装会直接复用。

然后导出 PDF。pnpm exec slidev 的意思是“运行这个项目里装好的 Slidev”，export 就是导出：

pnpm exec slidev export mySlidev.md

最后一行出现 exported to ./mySlidev-export.pdf，项目文件夹里就多了一份 PDF。

要注意，导出的 PDF 和 PPTX 里没有动画，点一下出一条的效果只能在浏览器里播放时看到。

做完这一步，你手里就有了一份从文本文件变出来的幻灯片，和一份能发出去的 PDF。

4 AI + Slidev

4.1 日常用法：让 AI 写，你来看

上面的语法，日常不用背。走完一遍，知道 slides.md 长什么样、pnpm dev 怎么启动，就够了。真正做演示时，让 AI 来写 slides.md。有两种用法：

• 用 Claude Code 这类在终端里运行、能直接读写文件的 AI 工具：先 cd 进入 practice 文件夹，再启动它，它写的文件就会直接落在这个文件夹里。
• 只用网页版的 AI 聊天：让它把 slides.md 的全部内容写出来，你复制下来，在 VS Code 里整段替换、保存。

可以直接用这段提示词：

请用 Slidev 帮我做一份 8 页以内的演示文稿，保存到当前目录的 slides.md。主题：<一句话说明主题>观众：<谁来看>要求：第 1 页用 cover 布局，每页不超过 5 行字，需要逐条出现的列表用 v-clicks，每页加一句演讲者备注。写完告诉我怎么预览。

要做的只有两件事：运行 pnpm dev 在浏览器里看效果，然后提修改意见，比如“第 3 页太满，拆成两页”。改内容不会弄乱排版，因为排版本来就不归你管。

同一个项目里可以放好几份演示，不用每次都新建项目。比如新建一个 second.md，用下面两行分别预览和导出：

pnpm exec slidev second.mdpnpm exec slidev export second.md

第二行会生成 second-export.pdf。不带文件名时，默认用的是 slides.md。

4.2 进阶补充：让 AI 按页改幻灯片

上面的做法，AI 改的是整个文件。Slidev 从 v52.17.0 起内置了一个 MCP 服务。MCP 可以理解成给 AI 开的一个专用接口：AI 通过它可以一页一页地操作幻灯片，读取某一页、改内容和备注、插入、删除、调整顺序，开着预览时还能让浏览器跳到指定的页。

用 Claude Code 的话，先 pnpm dev 把预览开着，再在另一个终端窗口里运行下面这行。官网例子里的端口是 3030，换成你终端里显示的那个：

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

官网还给 AI 工具准备了一份 Slidev 的使用说明（Skill），让 AI 先学会 Slidev 的写法：

npx skills add slidevjs/slidev

5 什么时候用 Slidev，什么时候还用 PPT

Slidev VS PPT

按这张表，适合换成 Slidev 的，是“讲给别人听”的演示：分享、讲课、内部汇报。内容是你自己的，你只想把话说清楚，不想在对齐和字号上耗时间。

不适合换的，是“发给别人改”的演示：对方要拿到 .pptx 接着编辑，或者公司有固定的 PPT 模板。

6 总结成三步

• 第 1 步：装好 Node.js 和 pnpm，pnpm create slidev 建项目，安装问题选 no，pnpm install，pnpm dev 能在浏览器里翻页。
• 第 2 步：让 AI 写 slides.md，你在浏览器里看效果、提修改意见。
• 第 3 步：pnpm add -D playwright-chromium 装一次，以后 pnpm exec slidev export 导出 PDF。

常用快捷键

在浏览器里播放时，这几个键最常用。右方向键翻页我实测过，其余来自官网 UI 页，没有逐个试：

写在最后

走完这一遍，环境就搭好了。以后做演示，流程就是四步：pnpm dev 打开预览，让 AI 写，自己看着提意见，最后导出。

图片、视频、代码演示这些内容，本文没有展开，后续有空进一步研究，参考官网：https://sli.dev/