Slidev Assist#

使用 Slidev（Presentation Slides for Developers）从 Markdown 生成 PPT。 你给任何原材料——一个主题、一份研究报告、一堆数据、一段文案、一个现成的PPTX——我来解析、提炼、结构化成 slides.md，一键生成可演示的 HTML 幻灯片。

快速开始#

text

# 给我任何原材料，我都能做成PPT：
- 一个主题：   "帮我做一个AI Agent入门的PPT"
- 研究报告：   "读了这份PDF，帮我提炼成10页PPT"
- 数据报表：   "这份Excel数据，做成汇报PPT"
- 文案稿件：   "这段文字帮我做成演示"
- 已有PPTX：   "这个PPTX帮我转成Slidev版"

我会自动：

1. 解析原材料 — 读文件、提取关键信息、结构化
2. 编写 slides.md — 加入合适的布局和动效
3. 安装并启动 Slidev — 浏览器预览
4. 导出 — PDF / PPTX / PNG

一页 Slide 的 Markdown 模板#

markdown

---
# 全局配置（headmatter）— 只有第一页前面可以写
theme: default
title: 标题
---

# 第一页标题

内容正文

---

# 第二页标题

更多内容

• --- 分隔每一页
• 每页开头可加 --- 包裹的 frontmatter 设置该页布局

常用 Frontmatter 配置#

字段示例说明theme``default / seriph / unocss主题layout``center / cover / two-cols / image-right / image-left页面布局background``/bg.png背景图class``text-white p-10UnoCSS 类preload``false预加载transition``slide-left / fade切换动画colorSchema``light / dark / auto配色方案fonts``{ sans: "Inter", mono: "Fira Code" }字体配置lineNumbers``true / false代码行号title``"我的演示"全局标题

常用布局说明#

• cover — 封面页，适合大标题居中
• center — 内容居中
• two-cols — 左右两栏（用 ::right:: 分隔）
• image-right — 左文右图（需设 image 字段）
• image-left — 左图右文
• section — 章节过渡页
• statement — 引语/强调页
• default — 默认页，标题在左上角

🎨 更改风格（主题/配色/字体）#

Slidev 的风格通过 headmatter（第一页 --- 之间的配置）控制。最常用的三种方式：

方式一：切换内置主题#

yaml

---
theme: default     # 默认简洁风（白底黑字）
# 或
theme: seriph      # 衬线字体风格（偏正式/学术）
# 或
theme: unocss      # UnoCSS 驱动，高度可自定义
---

直接在 headmatter 里改 theme: 的值即可切换整体风格。

方式二：安装社区主题#

bash

npm install slidev-theme-xxx

热门社区主题：

主题包风格slidev-theme-meetup聚会/活动风格slidev-theme-the-unnamed深色科技风slidev-theme-penguin可爱企鹅风slidev-theme-unicorn多彩独角兽风

安装后 headmatter 里引用：

yaml

---
theme: penguin
---

方式三：自定义配色和字体（无需装主题）#

不改 theme，直接在 headmatter 里覆盖：

yaml

---
theme: default
fonts:
  sans: Inter          # 正文字体
  mono: Fira Code      # 等宽字体（代码用）
  weights: '300,400,600'
  provider: google     # 字体来源（google / none）
colorSchema: light     # light / dark / auto
---

📌 每个页面可以单独设 layout#

同一份 PPT 里不同页可以有不同的布局：

yaml

---
layout: cover    # 封面页（大标题居中）
---

# 标题

---

---
layout: two-cols  # 左右两栏
---

# 左栏

::right::

# 右栏

---

---
layout: center   # 内容居中
---

# 居中展示

常用 layout 一览：

layout用途效果default通用内容页标题在左上角center强调内容全部居中cover封面大标题居中，适合第一页section章节过渡深色背景，大字标题two-cols对比/并列左右两栏image-right左文右图需设 image: 字段image-left左图右文需设 image: 字段statement引语/金句大字居中引语fact数据突出大数字展示

💡 给 AI 的指令#

如果用户说"换个风格"、"改主题"、"调配色"、"换字体"：

1. 优先用方式一（切内置 theme）——最快
2. 如果内置 theme 不够，尝试方式三（改 headmatter 的 fonts/colorSchema）
3. 如果用户想要特定风格且内置没有，尝试方式二（安装社区主题）
4. 如果用户说"这页布局不对"，修改对应页的 layout: 字段

语法特性#

分隔内容#

markdown

---
layout: two-cols
---

# 左栏

左边内容

::right::

# 右栏

右边内容

代码高亮#

markdown

```ts {2-3}
function hello() {
  console.log('Hello')  // 第2-3行高亮
  console.log('Slidev')
}
```

代码行号#

markdown

```ts {*|1-2|3}{lines:true}

text

### 注释（演讲者备注）
```markdown
<!-- 这里写的不会显示在幻灯片上，只在演讲者模式可见 -->

图标#

text

<carbon:logo-github />  — 使用 Iconify 任意图标
<carbon:book />

数学公式#

markdown

$E = mc^2$

$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Mermaid 图表#

markdown

```mermaid
graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行]
    B -->|否| D[结束]

text

### 内嵌 Vue 组件（高级）
```markdown
<Counter :start="5" />
<v-click> 点下一步才出现 </v-click>
<v-clicks> 每次点下一步出现一项 </v-clicks>

点击动画需要用 v-click / v-clicks 包裹。

完整示例（10页）#

markdown

---
theme: default
title: 我的演示
fonts:
  sans: Inter
---

# AI Agent 入门指南

从概念到实战 🚀

---

## 什么是 AI Agent？

- 能自主感知环境、做出决策并执行行动的智能实体
- 核心能力：推理、规划、工具调用、记忆

---

## 技术栈对比

| 特性 | 传统 AI | AI Agent |
|------|---------|----------|
| 交互方式 | 一问一答 | 自主执行 |
| 工具调用 | ❌ | ✅ |
| 长任务 | ❌ | ✅ |
| 记忆 | ❌ | ✅ |

---

## 总结

> AI Agent = 大模型 + 工具 + 记忆 + 规划

工作流程#

1. 你：提供原材料（主题/文件/数据/文案...）
2. 我：解析原材料 → 提炼要点 → 结构化成 slides.md
3. 你：确认/修改内容
4. 我：检测环境 → 如未安装 Slidev 则自动安装 → 启动预览
5. 你：浏览器打开链接即可查看/演示
6. 我：主动询问用户对风格是否满意，并提供可切换的主题选项

支持解析的原材料类型#

原材料解析方式输出效果💬 主题/想法AI 直接构思内容大纲完整 PPT📄 PDF 研究报告读文件 → 提取关键论点 → 结构化要点清晰的演示📊 Excel 数据读取数据表格 → 提炼结论 → 图表化数据汇报 PPT📝 文案稿件分段 → 提炼小标题 → 配图建议美化排版🎞️ PPTX 文件python-pptx 解析 → AI 重建带动效的 Slidev 版🔗 网页链接抓取内容 → 摘要 → 结构化知识整理演示📚 多源混搭综合以上多种方式跨材料整合汇报

导出#

bash

# PDF
npx slidev export slides.md

# PPTX（实验性）
npx slidev export slides.md --format pptx

# PNG 图片
npx slidev export slides.md --format png

工作流程#

1. 你：提供原材料（主题/文件/数据/文案...）
2. 我：解析原材料 → 提炼要点 → 结构化成 slides.md
3. 你：确认/修改内容
4. 我：检测环境 → 如未安装 Slidev 则自动安装 → 启动预览
5. 你：浏览器打开链接即可查看/演示
6. 我：主动询问用户对风格是否满意，并提供可切换的主题选项

环境依赖声明#

⚠️ Slidev Assist 不是一个独立软件，而是一个调用开源项目的辅助工具。 核心依赖是 Slidev（MIT 协议）， 项目地址： https://github.com/slidevjs/slidev

每次生成 PPT 前必须确保目标环境已安装 Slidev。以下是检测和安装方式。

检测 Slidev 是否已安装#

bash

# 方式一：检查 CLI 是否可用
npx --yes @slidev/cli --version 2>/dev/null

# 方式二：检查本地 node_modules
test -d node_modules && npm ls @slidev/cli 2>/dev/null

有版本号返回 → 已安装。报错 → 执行安装。

安装 Slidev#

bash

# 方式一：npx 自动缓存（最省事，不需要手动装）
# npx @slidev/cli 首次运行会自动下载

# 方式二：npm 本地安装（推荐，支持导出）
cd 项目目录
npm install @slidev/cli

# 方式三：npm 全局安装
npm install -g @slidev/cli

# 方式四：官方 init 方式
npm init slidev

导出额外依赖#

如需导出 PDF/PPTX，还需要 Playwright：

bash

npm install -D playwright-chromium

推荐操作流程#

bash

# 1. 初始化项目
echo '{"name":"ppt","private":true}' > package.json

# 2. 安装 Slidev
npm install @slidev/cli

# 3. （可选）安装导出依赖
npm install -D playwright-chromium

# 4. 启动预览
npx @slidev/cli slides.md --remote

官方安装指南： https://github.com/slidevjs/slidev#getting-started

注意事项#

• 首次运行 npm install 会耗时 1-3 分钟（下载依赖包）
• 预览默认在 http://localhost:3030
• 用 --remote 可以让手机上控制翻页
• 主题可以 npm 安装： npm i slidev-theme-xxx
• 文件类原材料需要你先上传/发给我，我来读取解析