Slidev 制作者

构建 Slidev 演示文稿所需的领域知识。Slidev 基于 Vue 3、Vite 和 UnoCSS，将 Markdown 转换为可交互、可主题化的幻灯片。

当你在搭建演示文稿骨架、编写幻灯片 Markdown、添加交互功能、自定义主题/布局，或执行导出操作时，请使用本技能。在生成 Slidev 代码前，请先阅读下方对应的 rules/ 文件，其中包含详细说明及可直接复制粘贴的示例。

快速开始

pnpm create slidev      # 搭建一个新演示文稿（也可使用：npm init slidev）
slidev                  # 启动开发服务器并支持热重载（http://localhost:3030）
slidev build            # 构建静态 SPA 至 dist/ 目录
slidev export           # 导出为 PDF（也支持 --format pptx|png|md）

要求 Node.js >= 18。静态资源请放入 public/ 目录，并通过绝对路径引用（例如：/image.png）。完整设置流程、项目结构与工作流详见 rules/getting-started.md。

规则

请首先阅读 rules/anti-patterns.md —— 该文件列出了会导致演示文稿失效的关键且反复出现的错误。

内容编写相关：

• rules/core-syntax.md —— 幻灯片分隔符、文档级 frontmatter 与单页 frontmatter 的区别、演讲者备注、MDC 语法
• rules/layouts.md —— 内置布局、双栏插槽、图片/iframe 布局、自定义布局
• rules/code-blocks.md —— Shiki 语法高亮、行级高亮、Monaco 编辑器、Magic Move、TwoSlash
• rules/animations.md —— v-click、v-after、v-clicks、v-motion、v-mark 及幻灯片切换动画
• rules/components.md —— 内置组件：Arrow、Link、Toc、SlidevVideo、RenderWhen、LightOrDark 等
• rules/diagrams.md —— Mermaid 与 PlantUML 集成及配置方法
• rules/assets.md —— 图片、视频、字体、图标：正确路径写法及 public 目录使用规范
• rules/styling.md —— UnoCSS 工具类、自定义样式与幻灯片作用域样式、暗色模式、uno/vite 配置
• rules/features.md —— LaTeX 数学公式支持、幻灯片导入（src:）、全局图层、自定义快捷键

环境搭建与输出相关：

• rules/getting-started.md —— 安装方式、CLI 命令、项目结构、工作流与技术栈
• rules/themes.md —— 主题的使用、配置、覆盖与剥离（eject）
• rules/export.md —— PDF/PNG/PPTX 导出、SPA 构建及部署（GitHub Pages、Netlify、Vercel）
• rules/presenter.md —— 演讲者模式、演讲者备注、计时器、手绘、录制、远程控制

使用指导：

• rules/anti-patterns.md —— 必须避免的关键错误：已弃用的功能、错误的路径、不存在的布局等
• rules/troubleshooting.md —— 构建/导出/端口/主题问题的修复方案，以及内容编写的最佳实践

官方链接

• 文档：https://sli.dev/guide · 主题库：https://sli.dev/resources/theme-gallery · GitHub：https://github.com/slidevjs/slidev