marp-slide

Marp 幻灯片创建器

使用 7 种预设计主题和内置最佳实践，创建专业且视觉吸引人的 Marp 演示幻灯片。

何时使用此技能

当用户出现以下情况时使用此技能：

• 请求创建演示幻灯片或 Marp 文档
• 要求“让幻灯片好看”或“改进幻灯片设计”
• 给出模糊指令，如“良い感じにして”（让它好看）或“かっこよく”（让它酷）
• 想要创建讲座或研讨会材料
• 需要以要点为主的幻灯片，偶尔包含图片

快速开始

步骤 1：选择主题

首先，根据用户请求和内容确定合适的主题。

快速主题选择：

• 技术/开发者内容 → 科技主题
• 商务/企业 → 商务主题
• 创意/活动 → 多彩或渐变主题
• 学术/简单 → 极简主题
• 通用/不确定 → 默认主题
• 偏好深色背景 → 暗色或科技主题

有关详细的主题选择指南，请阅读 references/theme-selection.md。

步骤 2：创建幻灯片

1. 首先阅读相关参考资料：

   • 始终先阅读 references/marp-syntax.md 了解基本语法
   • 图片相关：references/image-patterns.md（官方 Marpit 图片语法）
   • 高级功能（数学、表情符号）：references/advanced-features.md
   • 自定义主题：references/theme-css-guide.md

2. 从适当的模板文件复制内容：

   • assets/template-basic.md - 默认主题（最常用）
   • assets/template-minimal.md - 极简主题
   • assets/template-colorful.md - 多彩主题
   • assets/template-dark.md - 暗色主题
   • assets/template-gradient.md - 渐变主题
   • assets/template-tech.md - 科技/代码主题
   • assets/template-business.md - 商务主题

3. 阅读 references/best-practices.md 了解质量指南

4. 按照最佳实践组织内容：

   • 标题幻灯片使用 <!-- _class: lead -->
   • 简洁的 h2 标题（中文 5-7 个字）
   • 每张幻灯片 3-5 个要点
   • 足够的空白

5. 如果需要，使用 references/image-patterns.md 中的模式添加图片

6. 保存到 /mnt/user-data/outputs/，扩展名为 .md

可用主题

1. 默认主题

颜色：米色背景，海军蓝文字，蓝色标题
风格：简洁、精致，带装饰线
用途：通用研讨会、讲座、演示
模板：template-basic.md

2. 极简主题

颜色：白色背景，灰色文字，黑色标题
风格：极少装饰，宽边距，轻量字体
用途：内容聚焦的演示、学术演讲
模板：template-minimal.md

3. 多彩流行主题

颜色：粉色渐变背景，多色强调
风格：鲜艳渐变，粗体字体，彩虹色强调
用途：面向青年的活动、创意项目
模板：template-colorful.md

4. 暗色主题

颜色：黑色背景，青色/紫色强调
风格：暗色主题带发光效果，护眼
用途：技术演示、晚间演讲、现代风格
模板：template-dark.md

5. 渐变背景主题

颜色：紫色/粉色/蓝色/绿色渐变（每张幻灯片不同）
风格：每张幻灯片不同渐变，白色文字，阴影
用途：视觉聚焦、创意演示
模板：template-gradient.md

6. 科技/代码主题

颜色：GitHub 风格深色背景，蓝色/绿色强调
风格：代码字体，Markdown 风格标题带 # 符号
用途：编程教程、技术聚会、开发者内容
模板：template-tech.md

7. 商务主题

颜色：白色背景，海军蓝标题，蓝色强调
风格：企业演示风格，顶部边框，表格支持
用途：商务演示、提案、报告
模板：template-business.md

创建幻灯片流程

基本工作流

1. 理解需求

   • 识别内容：标题、主题、关键点
   • 确定目标受众
   • 评估正式程度

2. 选择主题

   • 使用上述快速选择规则
   • 如果不确定，查阅 references/theme-selection.md
   • 仍然不确定则默认使用默认主题

3. 应用模板

   • 从 assets/ 加载适当的模板
   • CSS 已嵌入，无需外部文件
   • 保持模板结构

4. 组织内容

   • 标题幻灯片：<!-- _class: lead --> + h1
   • 内容幻灯片：h2 标题 + 要点
   • 标题保持 5-7 个字（中文）
   • 每张幻灯片使用 3-5 个要点

5. 优化质量

   • 阅读 references/best-practices.md
   • 确保足够的空白
   • 保持一致性
   • 保持文字简洁（每行 15-25 字）

6. 添加图片

   • 如果需要，查阅 references/image-patterns.md
   • 常用：![bg right:40%](image.png) 用于侧边图片
   • 使用正确的 Marp 图片语法

7. 输出文件

   • 保存到 /mnt/user-data/outputs/
   • 使用描述性文件名，如 presentation.md

处理“让它好看”请求

当用户给出模糊指令，如“良い感じにして”、“かっこよく”或“make it cool”时：

1. 从内容推断主题：

   • 商务内容 → 商务主题
   • 技术内容 → 科技或暗色主题
   • 创意内容 → 渐变或多彩主题
   • 通用 → 默认主题

2. 自动应用最佳实践：

   • 将标题缩短至 5-7 个字
   • 将要点限制在 3-5 项
   • 添加足够的空白
   • 使用一致的结构

3. 增强视觉层次：

   • 适当时使用 h3 作为子章节
   • 将密集文本拆分为多张幻灯片
   • 确保逻辑流程（引言 → 主体 → 结论）

4. 保持专业语气：

   • 正式程度与内容匹配
   • 列表中使用平行结构
   • 保持技术术语一致

图片集成

对于包含图片的幻灯片，请查阅 references/image-patterns.md 了解详细语法。

常用模式：

• 侧边图片：![bg right:40%](image.png) - 图片在右，文字在左
• 居中：![w:600px](image.png) - 居中并指定宽度
• 全背景：![bg](image.png) - 全屏背景
• 多张图片：多个 ![bg] 声明

示例讲座模式：

## 幻灯片标题

![bg right:40%](diagram.png)

- 解释点 1
- 解释点 2
- 解释点 3

文件输出

始终将最终的 Marp 文件保存到 /mnt/user-data/outputs/，扩展名为 .md：

• presentation.md
• seminar-slides.md
• lecture-materials.md

质量检查清单

在交付幻灯片之前，请验证：

• [ ] 主题根据内容适当选择
• [ ] CSS 主题已嵌入文件中
• [ ] 标题幻灯片使用 <!-- _class: lead -->
• [ ] 所有 h2 标题简洁（5-7 个字）
• [ ] 每张幻灯片要点为 3-5 项
• [ ] 图片使用正确的 Marp 语法
• [ ] 文件已保存到输出目录
• [ ] 内容遵循最佳实践

参考资料

核心文档

• Marp 语法：references/marp-syntax.md - 基本 Marp/Marpit 语法（指令、前置元数据、分页等）
• 图片模式：references/image-patterns.md - 官方图片语法（背景、滤镜、分割背景）
• 主题 CSS 指南：references/theme-css-guide.md - 如何基于 Marpit 规范创建自定义主题
• 高级功能：references/advanced-features.md - 数学、表情符号、分段列表、Marp CLI、VS Code
• 官方主题：references/official-themes.md - default、gaia、uncover 主题文档

质量与选择指南

• 主题选择：references/theme-selection.md - 如何为内容选择合适的主题
• 最佳实践：references/best-practices.md - “酷”幻灯片的质量指南

模板与资源

• 模板：assets/template-*.md - 每个主题的起点，已嵌入 CSS（7 个主题）
• 独立 CSS：assets/theme-*.css - 供参考的 CSS 文件（已嵌入模板中）

官方外部链接

• Marp 官方网站：https://marp.app/
• Marpit 指令：https://marpit.marp.app/directives
• Marpit 图片语法：https://marpit.marp.app/image-syntax
• Marpit 主题 CSS：https://marpit.marp.app/theme-css
• Marp Core GitHub：https://github.com/marp-team/marp-core
• Marp CLI GitHub：https://github.com/marp-team/marp-cli