Slidev PPT 制作技能

Overview

此技能帮助用户使用 Slidev（基于 Markdown 的演示文稿工具）快速创建专业的 PPT。Slidev 使用 Markdown 语法，支持代码高亮、图表、Vue 组件等强大功能，特别适合技术分享、产品发布和商务演示。

快速开始

步骤 1: 确定需求和选择主题

询问用户以下问题以确定最佳方案：

1. 演示目的: 技术分享、产品发布、商务报告、创意展示？
2. 目标受众: 开发者、管理层、客户、大众？
3. 内容类型: 代码演示、数据展示、图文结合？
4. 输出需求: 仅预览、导出 PDF、导出 PPTX、全部？

根据用户回答选择合适的预设主题：

• business-theme (assets/business-theme/): 产品发布、商业报告、季度总结
• tech-theme (assets/tech-theme/): 技术分享、架构设计、代码演示
• creative-theme (assets/creative-theme/): 设计展示、作品集、创意提案
• minimal-theme (assets/minimal-theme/): 简洁演示、快速原型

步骤 2: 收集内容信息

收集创建演示文稿所需的关键信息：

必需信息:

• 标题 (title)
• 副标题 (subtitle)
• 演讲者 (presenter)
• 日期 (date)

主题相关:

• 商务主题: 公司、职位、关键点、成果、下一步计划
• 技术主题: 技术栈、问题背景、技术方案、代码示例、性能指标
• 创意主题: 灵感来源、设计理念、视觉元素、作品图片
• 极简主题: 章节标题、内容要点、关键概念

步骤 3: 创建演示文稿

使用 scripts/create_presentation.py 从模板创建：

python scripts/create_presentation.py <主题名称> <输出目录> [变量...]

示例：

python scripts/create_presentation.py business-theme ./presentation \\
  title="2024 Q4 产品发布会" \\
  subtitle="全新功能升级" \\
  presenter="张三" \\
  position="产品经理" \\
  company="ABC 科技" \\
  date="2024-12-15"

步骤 4: 启动开发服务器（自动预览）

使用 scripts/start_dev_server.sh 启动实时预览：

cd <输出目录>
bash /path/to/slidev-ppt/scripts/start_dev_server.sh slides.md

或直接使用命令：

npx slidev slides.md --open

浏览器会自动打开 http://localhost:3030

开发服务器特性:

• 实时预览：编辑 slides.md 后自动刷新
• 幻灯片导航：空格键、箭头键、点击翻页
• 绘图模式：按 D 进入，可在幻灯片上绘制
• 演讲者模式：按 G 查看演讲者备注和下一页预览
• 全屏模式：按 F 全屏演示

步骤 5: 导出演示文稿

用户可选择以下方式导出：

导出为 PDF（推荐用于分享和打印）:

bash /path/to/slidev-ppt/scripts/export_pdf.sh slides.md dist

导出为 PPTX（推荐用于进一步编辑）:

bash /path/to/slidev-ppt/scripts/export_pptx.sh slides.md dist

导出为 PNG（推荐用于制作图片）:

npx slidev export slides.md --format png --output dist

导出特定页面范围:

npx slidev export slides.md --range 1,3-5,8 --output dist

工作流程决策树

用户请求创建 PPT
    │
    ├─ 是否已有内容？
    │   ├─ 是 → 使用模板快速生成
    │   │         ├─ 商务内容 → business-theme
    │   │         ├─ 技术分享 → tech-theme
    │   │         ├─ 创意设计 → creative-theme
    │   │         └─ 简洁演示 → minimal-theme
    │   │
    │   └─ 否 → 从零开始
    │             1. 收集内容大纲
    │             2. 确定内容类型
    │             3. 推荐合适主题
    │             4. 生成演示文稿
    │
    ├─ 是否需要自定义？
    │   ├─ 否 → 使用预设主题
    │   └─ 是 → 参考主题定制指南（见下方）
    │
    └─ 导出需求？
        ├─ 仅预览 → 启动开发服务器
        ├─ PDF → 使用 export_pdf.sh
        ├─ PPTX → 使用 export_pptx.sh
        └─ 全部 → 先预览，再导出多种格式

主题选择指南

Business Theme（商务主题）

适用场景:

• 产品发布会
• 商业计划书
• 季度/年度报告
• 项目进度汇报
• 商务提案

设计特点:

• 专业、正式
• 双栏布局（目录 + 详情）
• 支持数据图表
• 包含成果和计划总结

必需变量:

title, subtitle, presenter, position, company, date
slide1_title, slide1_content, point1, point2
# ... 其他内容变量

模板位置: assets/business-theme/slides.md

Tech Theme（技术主题）

适用场景:

• 技术分享会
• 代码演示
• 架构设计讲解
• 技术方案评审
• 开发经验总结

设计特点:

• 使用 Apple Basic 主题
• 代码高亮（shiki）
• 支持架构图（Mermaid）
• 技术栈展示
• 性能优化对比

必需变量:

title, subtitle, presenter, position, date
tech_stack, current_situation, challenges, goals
code_title, code_example, code_explanation
# ... 其他技术变量

模板位置: assets/tech-theme/slides.md

Creative Theme（创意主题）

适用场景:

• 设计作品展示
• 创意提案
• 视觉设计分享
• 品牌设计方案
• 艺术作品集

设计特点:

• 使用 Seriph 主题
• 优雅的 Serif 字体
• 图片展示布局
• 配色方案展示
• 思维导图支持

必需变量:

title, subtitle, cover_image, presenter
inspiration_intro, core_concept, design_philosophy
color_scheme, font_choice, graphic_elements
work1_image, work1_description, work2_image, work2_description
# ... 其他创意变量

模板位置: assets/creative-theme/slides.md

Minimal Theme（极简主题）

适用场景:

• 简洁的演示文稿
• 快速原型
• 讲座和教学
• 概念介绍
• 轻量级分享

设计特点:

• 极简设计
• 清晰的文本布局
• 基础列表展示
• 简单的图表支持

必需变量:

title, subtitle, presenter, date
section1, section1_id, section1_content
section2, section2_id, section2_intro, key_concept
# ... 其他章节变量

模板位置: assets/minimal-theme/slides.md

高级定制

自定义样式

如果用户需要自定义样式，参考以下资源：

参考文档:

• references/syntax.md – Slidev 语法完整参考
• references/themes.md – 主题定制和配色方案
• references/quickstart.md – 快速入门指南

自定义方法:

1. 修改颜色方案: 编辑 slides.md 的 frontmatter

---
theme: default
primary: '#5c7cfa'
secondary: '#6666ff'
---

2. 创建自定义布局: 在项目目录创建 layouts/ 文件夹

<!-- layouts/custom.vue -->
<template>
  <div class="slide-custom-layout">
    <slot />
  </div>
</template>

3. 添加自定义组件: 在项目目录创建 components/ 文件夹

<!-- components/InfoCard.vue -->
<template>
  <div class="info-card border rounded-lg p-6">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
  </div>
</template>

常用语法速查

完整语法见 references/syntax.md

故障排除

问题: Slidev 未安装

解决:

npm init slidev
# 或
npm install @slidev/cli @slidev/theme-default

问题: 模板变量未替换

原因: 变量名不匹配或格式错误

解决: 确保变量格式为 key=value，且 key 与模板中的 {{key}} 匹配

# 正确
python create_presentation.py business-theme ./out title="标题"

# 错误
python create_presentation.py business-theme ./out 标题

问题: 导出 PDF 失败

原因: 可能是缺少依赖或权限问题

解决:

# 检查 Node.js 版本
node --version  # 应 >= 14.0

# 重新安装依赖
npm install

# 使用 sudo（Linux/Mac）
sudo npm install -g @slidev/cli

问题: 图片不显示

解决:

• 使用绝对路径或放在 public/ 目录
• 检查文件路径大小写（Linux 区分大小写）
• 使用网络图片确保可访问

问题: 中文显示异常

解决:

---
fonts:
  sans: 'Noto Sans SC'
  serif: 'Noto Serif SC'
webfontUrls:
  - 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap'
---

最佳实践

内容组织

1. 遵循”每页一观点”原则: 每个幻灯片只讲一个核心观点
2. 使用渐进显示: 用 <v-clicks> 控制信息流，避免一次性展示过多内容
3. 代码示例优化:
   • 限制代码长度（< 20 行）
   • 使用高亮突出关键行
   • 添加注释说明

设计原则

1. 一致性: 保持配色、字体、间距的一致性
2. 对比度: 确保文本和背景有足够对比度
3. 留白: 避免内容过于拥挤，适当留白
4. 对齐: 保持元素对齐，使用网格布局

演示技巧

1. 排练: 使用演讲者模式（按 G）进行排练
2. 时间控制: 每页幻灯片约 2-3 分钟
3. 互动: 使用绘图模式（按 D）进行标注
4. 备用: 导出 PDF 作为备份，防止技术故障

示例场景

场景 1: 技术分享 – Vue3 最佳实践

# 使用技术主题
python scripts/create_presentation.py tech-theme ./vue3-talk \\
  title="Vue3 最佳实践" \\
  subtitle="提升开发效率和代码质量" \\
  presenter="张三" \\
  position="前端架构师" \\
  date="2024-12-20" \\
  tech_stack="Vue3, TypeScript, Vite" \\
  current_situation="项目迁移到 Vue3 后遇到的问题" \\
  challenges="性能优化、代码组织、类型安全" \\
  goals="建立统一的开发规范和最佳实践"

# 启动预览
cd vue3-talk
npx slidev slides.md --open

# 导出 PDF
npx slidev export slides.md --output dist

场景 2: 产品发布会 – 新功能介绍

# 使用商务主题
python scripts/create_presentation.py business-theme ./product-launch \\
  title="ABC 产品 v2.0 发布会" \\
  subtitle="全新功能，全新体验" \\
  presenter="李四" \\
  position="产品总监" \\
  company="ABC 科技" \\
  date="2024-12-25" \\
  point1="智能推荐系统上线" \\
  point2="性能提升 300%" \\
  achievement1="用户增长 150%" \\
  achievement2="收入增长 200%"

cd product-launch
npx slidev slides.md --open

场景 3: 设计作品集 – UI/UX 设计展示

# 使用创意主题
python scripts/create_presentation.py creative-theme ./design-portfolio \\
  title="2024 设计作品集" \\
  subtitle="UI/UX 设计案例精选" \\
  presenter="王五" \\
  cover_image="./public/cover.jpg" \\
  core_concept="简约而不简单" \\
  design_philosophy="用户至上，体验优先" \\
  color_scheme="主色: #5c7cfa, 辅色: #6666ff" \\
  work1_image="./public/work1.jpg" \\
  work1_description="电商 APP 改版设计" \\
  work2_image="./public/work2.jpg" \\
  work2_description="企业后台系统设计"

cd design-portfolio
npx slidev slides.md --open

资源

scripts/

可执行脚本，用于创建、启动和导出演示文稿：

• create_presentation.py – 从模板创建新的演示文稿

  • 用法: python create_presentation.py <主题> <目录> [变量...]
  • 示例: 见上方示例场景

• start_dev_server.sh – 启动 Slidev 开发服务器

  • 用法: bash start_dev_server.sh <slides.md>
  • 功能: 实时预览、自动刷新

• export_pdf.sh – 导出为 PDF

  • 用法: bash export_pdf.sh <slides.md> [输出目录]
  • 功能: 生成高质量 PDF 文件

• export_pptx.sh – 导出为 PPTX

  • 用法: bash export_pptx.sh <slides.md> [输出目录]
  • 功能: 生成可编辑的 PowerPoint 文件

assets/

预设主题模板，包含完整的 slides.md 文件：

• business-theme/ – 商务风格模板

  • 适用于: 产品发布、商业报告、项目汇报
  • 特点: 专业、正式、数据图表支持

• tech-theme/ – 技术分享模板

  • 适用于: 技术分享、代码演示、架构讲解
  • 特点: 代码高亮、架构图、技术栈展示

• creative-theme/ – 创意设计模板

  • 适用于: 设计展示、作品集、创意提案
  • 特点: 优雅字体、图片展示、配色方案

• minimal-theme/ – 极简风格模板

  • 适用于: 简洁演示、快速原型、教学讲座
  • 特点: 极简设计、清晰布局、基础图表

references/

详细参考文档，供深入学习使用：

• syntax.md – Slidev 语法完整参考

  • 内容: 基本语法、布局系统、代码块、图表、交互元素
  • 使用: 需要了解详细语法时查阅

• themes.md – 主题定制和配色方案

  • 内容: 内置主题、颜色方案、字体定制、样式自定义
  • 使用: 需要自定义主题和样式时查阅

• quickstart.md – 快速入门指南

  • 内容: 安装、基本使用、文件结构、常见问题
  • 使用: 初次使用 Slidev 时阅读

加载策略: 当用户需要深入了解语法、主题定制或遇到问题时，按需加载对应的参考文档。

相关资源

官方文档:

• Slidev 官方文档
• 语法详解
• 主题画廊
• 导出功能

社区资源:

• GitHub 仓库
• 示例集合
• 社区讨论