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 - 默认主题（最常用）
   • 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. 按照最佳实践组织内容：

   • 使用 `` 作为标题幻灯片
   • 标题简洁的 h2（日本语标题为 5–7 个字符）
   • 每张幻灯片包含 3–5 个项目符号
   • 留出充足的空白

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

6. 使用 .md 扩展名保存到 the project output directory

可用主题

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. 组织内容

   • 标题页：`` + 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. 输出文件

   • 保存到 the project output directory
   • 使用描述性文件名，例如 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 文件以 .md 扩展名保存到 the project output directory：

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

质量检查清单

交付幻灯片前，请确认：

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

参考资料

核心文档

• 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