slidev作者 Slidev

Slidev Skill.

一个用于 PPT 和幻灯片演示的 Claude Code 和 Codex skill：面向开发者的幻灯片，支持 Markdown、Vue 组件、代码高亮和动画。

Presentations
HTML 幻灯片

slidevjs/slidev · skills/slidev/SKILL.mdSKILL.md

--- name: slidev description: Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks. --- ## When to Use ## Quick Start ## Basic Syntax ## Common Layouts

从上游文件读取的前言和章节标题，时间 2026-09-14 · 完整内容 8,896 字符

01 功能说明

slidev Skill 在 Claude Code 和 Codex 中的作用

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

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

以 skill 自身的术语

Slidev 是一款基于 Vite、Vue 和 Markdown 构建的、面向开发者的网页版幻灯片制作工具。它可以创建带语法高亮代码片段的技术演示文稿，支持使用 Monaco editor 的实时代码示例、交互式演示、LaTeX 公式，以及 Mermaid 或 PlantUML 图表。幻灯片用 Markdown 编写，以 --- 分隔，第一个 frontmatter 作为 headmatter 用于配置整个演示文稿，presenter notes 则写在 HTML 注释中。

它支持基于点击的动画（v-click、magic-move）、行高亮、代码标签页、摄像头录制、远程控制和计时器。导出为 PDF 或 PPTX 需要 playwright-chromium。构建命令包括用于本地预览（地址为 localhost:3030）的 pnpm run dev、用于导出 PDF 的 pnpm run export，以及用于构建静态 SPA 部署的 pnpm run build。

它产出什么

演示文稿的 PDF 导出

查看示例提示词 ↗

工作方式

01
初始化项目
运行 pnpm create slidev 来搭建一个新的 Slidev 演示文稿项目。
02
用 Markdown 编写幻灯片
用 --- 分隔幻灯片，在第一个 frontmatter 代码块中配置演示文稿设置，并在 HTML 注释中添加 presenter notes。
03
启动开发服务器
运行 pnpm run dev 以启动本地服务器，并在 http://localhost:3030 打开演示文稿。
04
导出或构建
使用 pnpm run export 输出 PDF，或使用 pnpm run build 创建可用于托管的静态 SPA。

02 找到适合场景

何时使用 slidev Skill

当任务是制作 PPT 和幻灯片演示时，在 Claude Code 或 Codex 中使用 slidev skill。适用场景和限制见该 skill 自己的文件。

适合场景

包含实时代码示例的技术演示或幻灯片
带动画的语法高亮代码片段
使用 Monaco editor 的交互式演示或可运行代码
使用 LaTeX 的数学公式，或使用 Mermaid、PlantUML 的图表
用于开发者演讲或工作坊的代码讲解

了解边界

需要 SlidevSKILL.md 中声明了此依赖；没有它该 skill 无法在项目中运行。

需要提供的信息

代码片段通过 <<< @/snippets/file.js 语法导入外部代码文件，用于在幻灯片中显示。

03 Skill 内部

slidev skill 赋予 Claude Code 和 Codex 的规则

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

Headmatter 是第一个 Frontmatter
文件中的第一个 frontmatter 代码块用于配置整份演示文稿的设置，而不是单张幻灯片的设置。
在 HTML 注释中编写 Presenter Notes
在每张幻灯片内的 HTML 注释块中编写 presenter notes。它们不会出现在幻灯片本身上。
导出需要 playwright-chromium
在运行导出命令之前，先安装 pnpm add -D playwright-chromium。如果导出因浏览器错误而失败，说明缺少此依赖。
合并时以主入口文件为准
通过 src 导入幻灯片时，主入口文件中的 frontmatter 优先于被导入文件的 frontmatter。
Comark 启用高级语法
在 headmatter 中设置 comark: true，即可启用代码组和内联样式属性，如 {style="color:red"}。

04 投入使用

在 Claude Code 或 Codex 中安装 slidev

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

将 slidev 添加到 Claude Code、Codex 或你的 Agent

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

Terminal

npx skills add https://github.com/slidevjs/slidev --skill slidev

用于 skills/slidev/SKILL.md 的通用 skills CLI 形式；该仓库可能会记录其自己的路径。

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

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

Starter prompt

Create a technical presentation for a React workshop with three sections: component lifecycle, hooks deep-dive, and performance optimization. Include live Monaco editor demos showing useState and useEffect patterns, syntax-highlighted TypeScript code with click-based line reveals for the reconciliation algorithm explanation, a Mermaid diagram of the component tree, and a two-column layout comparing class components and functional components. Add presenter notes with timing estimates for each section and configure a 45-minute countdown timer.

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

检查首次结果

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

运行 pnpm run dev 后，确认幻灯片在 http://localhost:3030 加载成功
运行 pnpm run export 后，确认输出的 PDF 存在于项目根目录中
如果导出因浏览器错误失败，请先安装 playwright-chromium 依赖
通过逐页切换幻灯片来测试基于点击的动画，确保 v-click 元素按顺序出现

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

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

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

Author: Slidev
Repository: github.com/slidevjs/slidev 分支 main
Skill 文件: skills/slidev/SKILL.md 验证时记录的内容校验和；commit a8d8ff7
License: MIT 来自 LICENSE。
仓库星标数: 48,658 GitHub 快照拍摄于 2026-09-14，针对整个 slidevjs/slidev 代码库。不是 slidev 的评分或使用量统计。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

适用场景列出使用场景：技术演讲、代码片段、交互式演示、公式、图表、录制、导出格式
快速开始用于创建项目、启动开发服务器、构建 SPA 以及导出为 PDF 的命令
基础语法幻灯片分隔符、headmatter 配置、HTML 注释中的演讲者备注
核心参考核心主题一览表：语法、动画、frontmatter、CLI、组件、布局、导出、托管、全局上下文
功能参考涵盖代码高亮、Monaco 编辑器、图表、数学公式、布局、样式、动画、语法扩展、演讲者工具、导出选项的完整表格
常见布局内置布局：封面、居中、双栏、图片变体、iframe 变体、引用、章节、事实、简介、结尾
资源文档、主题库和展示案例的链接

Skill 自身的描述

使用 Slidev 通过 Markdown、Vue 组件、代码高亮、动画和交互功能为开发者创建和展示基于 Web 的幻灯片。适用于构建技术演示、会议演讲、代码演练、教学材料或开发者演示文稿。

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

Slidev

在真实的 PPT 和幻灯片任务上运行 slidev。

下载 OpenDesign，从其 SKILL.md 链接导入 slidev，粘贴上面的提示词，并在结果生成前阅读计划。

下载 OpenDesign 浏览所有 skills

终端

npx skills add https://github.com/slidevjs/slidev --skill slidev