marp-slide

Marp 幻灯片创建工具

使用 7 种预设主题和内置最佳实践，创建专业、美观的 Marp 演示幻灯片。

何时使用此技能

在以下情况下使用此技能：

• 用户要求创建演示幻灯片或 Marp 文档
• 用户要求“让幻灯片看起来更好”或“改进幻灯片设计”
• 用户给出“良い感じにして”（让它看起来不错）或“かっこよく”（让它更酷）等模糊指示
• 用户想要创建讲座或研讨会材料
• 用户需要以项目符号为主、偶尔配有图片的幻灯片

快速入门

第 1 步：选择主题

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

快速选择主题：

• 技术/开发者内容 → tech 主题
• 商务/企业内容 → business 主题
• 创意/活动内容 → colorful 或 gradient 主题
• 学术/简洁内容 → minimal 主题
• 通用/不确定 → default 主题
• 偏好深色背景 → dark 或 tech 主题

有关主题选择的详细指南，请阅读 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 - Default 主题（最常用）
   • assets/template-minimal.md - Minimal 主题
   • assets/template-colorful.md - Colorful 主题
   • assets/template-dark.md - Dark mode 主题
   • assets/template-gradient.md - Gradient 主题
   • assets/template-tech.md - Tech/code 主题
   • assets/template-business.md - Business 主题

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

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

   • 使用 `` 创建标题页
   • 标题简洁的二级标题（5-7 个日文字符）
   • 每张幻灯片包含 3-5 个项目符号
   • 留出充足的空白

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

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

可用主题

1. Default 主题

颜色：米色背景、藏青色文本、蓝色标题 风格：简洁雅致，带有装饰线条 适用于：通用研讨会、讲座、演示 模板：template-basic.md

2. Minimal 主题

颜色：白色背景、灰色文本、黑色标题 风格：装饰简约、页边距宽、字体纤细 适用于：内容为主的演示、学术演讲 模板：template-minimal.md

3. Colorful & Pop 主题

颜色：粉色渐变背景、多色点缀 风格：鲜艳渐变、粗体字体、彩虹色点缀 适用于：面向年轻人的活动、创意项目 模板：template-colorful.md

4. Dark Mode 主题

颜色：黑色背景、青色/紫色点缀 风格：带有发光效果的深色主题，视觉舒适 适用于：技术演示、晚间演讲、现代风格 模板：template-dark.md

5. Gradient Background 主题

颜色：紫色/粉色/蓝色/绿色渐变（每张幻灯片各异） 风格：每张幻灯片使用不同渐变、白色文本、阴影 适用于：视觉效果为主的创意演示 模板：template-gradient.md

6. Tech/Code 主题

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

7. Business 主题

颜色：白色背景、藏青色标题、蓝色点缀 风格：企业演示风格、顶部边框、支持表格 适用于：商务演示、提案、报告 模板：template-business.md

幻灯片创建流程

基本工作流程

1. 了解需求

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

2. 选择主题

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

3. 应用模板

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

4. 组织内容

   • 标题页：`` + 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] 声明

讲座示例模式：

## Slide Title

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

- Explanation point 1
- Explanation point 2
- Explanation point 3

文件输出

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

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

质量检查清单

交付幻灯片前，请确认：

• 已根据内容恰当选择主题
• CSS 主题已嵌入文件
• 标题页使用 ``
• 所有 h2 标题简洁（5-7 个字符）
• 每页包含 3-5 个项目符号
• 图片使用正确的 Marp 语法
• 文件已保存到输出目录
• 内容符合最佳实践

参考资料

核心文档

• Marp 语法：references/marp-syntax.md - Marp/Marpit 基本语法（指令、frontmatter、分页等）
• 图片模式：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 文件（已嵌入模板）

Official External Links

• Marp Official Site: https://marp.app/
• Marpit Directives: https://marpit.marp.app/directives
• Marpit Image Syntax: https://marpit.marp.app/image-syntax
• Marpit Theme 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