使用 Slidev 快速创建专业演示文稿的技能。支持多种预设主题(商务、技术、创意、极简)、自动生成大纲、启动开发服务器预览、导出 PDF/PPTX。当用户需要:1) 创建 PPT 演示文稿;2) 使用 Markdown 制作幻灯片;3) 技术分享或产品发布;4) 导出演示文稿为 PDF 或其他格式时使用此技能。
此技能帮助用户使用 Slidev(基于 Markdown 的演示文稿工具)快速创建专业的 PPT。Slidev 使用 Markdown 语法,支持代码高亮、图表、Vue 组件等强大功能,特别适合技术分享、产品发布和商务演示。
询问用户以下问题以确定最佳方案:
根据用户回答选择合适的预设主题:
assets/business-theme/): 产品发布、商业报告、季度总结assets/tech-theme/): 技术分享、架构设计、代码演示assets/creative-theme/): 设计展示、作品集、创意提案assets/minimal-theme/): 简洁演示、快速原型收集创建演示文稿所需的关键信息:
必需信息:
主题相关:
使用 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"
使用 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 全屏演示用户可选择以下方式导出:
导出为 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
└─ 全部 → 先预览,再导出多种格式
适用场景:
设计特点:
必需变量:
title, subtitle, presenter, position, company, date
slide1_title, slide1_content, point1, point2
# ... 其他内容变量
模板位置: assets/business-theme/slides.md
适用场景:
设计特点:
必需变量:
title, subtitle, presenter, position, date
tech_stack, current_situation, challenges, goals
code_title, code_example, code_explanation
# ... 其他技术变量
模板位置: assets/tech-theme/slides.md
适用场景:
设计特点:
必需变量:
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
适用场景:
设计特点:
必需变量:
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 - 快速入门指南自定义方法:
slides.md 的 frontmatter---
theme: default
primary: '#5c7cfa'
secondary: '#6666ff'
---
layouts/ 文件夹<!-- layouts/custom.vue -->
<template>
<div class="slide-custom-layout">
<slot />
</div>
</template>
components/ 文件夹<!-- components/InfoCard.vue -->
<template>
<div class="info-card border rounded-lg p-6">
<h3>{{ title }}</h3>
<p>{{ content }}</p>
</div>
</template>
| 功能 | 语法 | 示例 |
|---|---|---|
| 新幻灯片 | --- |
---\n# 新页面 |
| 代码块 | ```lang |
```typescript\nconsole.log()\n``` |
| 高亮行 | ```ts {1-2} |
高亮第 1-2 行 |
| 双栏布局 | layout: two-cols |
见各主题模板 |
| 点击显示 | <v-clicks> |
逐项显示内容 |
| 图表 | ```mermaid |
流程图、时序图等 |
| LaTeX | $formula$ |
$\sum_{i=1}^n x_i$ |
| 图标 | <carbon:user /> |
使用 Carbon 图标 |
| 目录 | <Toc /> |
自动生成目录 |
完整语法见 references/syntax.md
解决:
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 标题
原因: 可能是缺少依赖或权限问题
解决:
# 检查 Node.js 版本
node --version # 应 >= 14.0
# 重新安装依赖
npm install
# 使用 sudo(Linux/Mac)
sudo npm install -g @slidev/cli
解决:
public/ 目录解决:
---
fonts:
sans: 'Noto Sans SC'
serif: 'Noto Serif SC'
webfontUrls:
- 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap'
---
<v-clicks> 控制信息流,避免一次性展示过多内容G)进行排练D)进行标注# 使用技术主题
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
# 使用商务主题
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
# 使用创意主题
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
可执行脚本,用于创建、启动和导出演示文稿:
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> [输出目录]export_pptx.sh - 导出为 PPTX
bash export_pptx.sh <slides.md> [输出目录]预设主题模板,包含完整的 slides.md 文件:
business-theme/ - 商务风格模板
tech-theme/ - 技术分享模板
creative-theme/ - 创意设计模板
minimal-theme/ - 极简风格模板
详细参考文档,供深入学习使用:
syntax.md - Slidev 语法完整参考
themes.md - 主题定制和配色方案
quickstart.md - 快速入门指南
加载策略: 当用户需要深入了解语法、主题定制或遇到问题时,按需加载对应的参考文档。
官方文档:
社区资源: