marp-slide

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Marp Slide Creator

Marp 幻灯片创建工具

Create professional, visually appealing Marp presentation slides with 7 pre-designed themes and built-in best practices.

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

When to Use This Skill

何时使用该功能

Use this skill when the user:

Requests to create presentation slides or Marp documents
Asks to "make slides look good" or "improve slide design"
Provides vague instructions like "良い感じにして" (make it nice) or "かっこよく" (make it cool)
Wants to create lecture or seminar materials
Needs bullet-point focused slides with occasional images

当用户有以下需求时，可使用本功能：

需要创建演示幻灯片或Marp文档时
要求“优化幻灯片外观”或“改进幻灯片设计”时
给出模糊指令，比如日语的“良い感じにして”（优化外观）或“かっこよく”（让它更酷炫）时
需要制作讲座或研讨会资料时
需要以项目符号为主、偶尔搭配图片的幻灯片时

Quick Start

快速入门

Step 1: Select Theme

步骤1：选择主题

First, determine the appropriate theme based on the user's request and content.

Quick theme selection:

Technical/Developer content → tech theme
Business/Corporate → business theme
Creative/Event → colorful or gradient theme
Academic/Simple → minimal theme
General/Unsure → default theme
Dark background preferred → dark or tech theme

For detailed theme selection guidance, read

references/theme-selection.md

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

主题快速选择规则：

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

如需详细的主题选择指南，请阅读

references/theme-selection.md

。

Step 2: Create Slides

步骤2：创建幻灯片

Read relevant references first:
- Always start by reading
```
references/marp-syntax.md
```
  for basic syntax
- For images:
```
references/image-patterns.md
```
  (official Marpit image syntax)
- For advanced features (math, emoji):
```
references/advanced-features.md
```
- For custom themes:
```
references/theme-css-guide.md
```

Copy content from the appropriate template file:

```
assets/template-basic.md
```
- Default theme (most common)
```
assets/template-minimal.md
```
- Minimal theme
```
assets/template-colorful.md
```
- Colorful theme
```
assets/template-dark.md
```
- Dark mode theme
```
assets/template-gradient.md
```
- Gradient theme
```
assets/template-tech.md
```
- Tech/code theme
```
assets/template-business.md
```
- Business theme

Read
```
references/best-practices.md
```
for quality guidelines
Structure content following best practices:
- Title slide with
```

```
- Concise h2 titles (5-7 characters in Japanese)
- 3-5 bullet points per slide
- Adequate whitespace
Add images if needed using patterns from
```
references/image-patterns.md
```
Save to
```
/mnt/user-data/outputs/
```
with
```
.md
```
extension

先阅读相关参考文档：
- 始终先阅读
```
references/marp-syntax.md
```
  了解基础语法
- 涉及图片时：参考
```
references/image-patterns.md
```
  （官方Marpit图片语法）
- 涉及高级功能（数学公式、表情符号）时：参考
```
references/advanced-features.md
```
- 涉及自定义主题时：参考
```
references/theme-css-guide.md
```

从对应模板文件中复制内容：

```
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
```
- 商务主题

阅读
```
references/best-practices.md
```
了解质量规范
遵循最佳实践组织内容：
- 标题幻灯片使用
```

```
- 简洁的h2标题（日语为5-7个字符）
- 每张幻灯片3-5个项目符号
- 保留足够的留白
如需添加图片，使用
```
references/image-patterns.md
```
中的格式
将文件保存至
```
/mnt/user-data/outputs/
```
目录，后缀为
```
.md
```

Available Themes

可用主题

1. Default Theme

1. 默认主题

Colors: Beige background, navy text, blue headings Style: Clean, sophisticated with decorative lines Use for: General seminars, lectures, presentations Template:

template-basic.md

配色：米色背景、深蓝色文字、蓝色标题风格：简洁精致，带有装饰线条 适用场景：通用研讨会、讲座、演示文稿模板：

template-basic.md

2. Minimal Theme

2. 极简主题

Colors: White background, gray text, black headings Style: Minimal decoration, wide margins, light fonts Use for: Content-focused presentations, academic talks Template:

template-minimal.md

配色：白色背景、灰色文字、黑色标题风格：极少装饰、宽边距、浅色字体 适用场景：内容导向型演示、学术报告模板：

template-minimal.md

3. Colorful & Pop Theme

3. 多彩活力主题

Colors: Pink gradient background, multi-color accents Style: Vibrant gradients, bold fonts, rainbow accents Use for: Youth-oriented events, creative projects Template:

template-colorful.md

配色：粉色渐变背景、多色点缀风格：鲜艳渐变、粗体字体、彩虹色装饰 适用场景：面向青年的活动、创意项目模板：

template-colorful.md

4. Dark Mode Theme

4. 深色模式主题

Colors: Black background, cyan/purple accents Style: Dark theme with glow effects, eye-friendly Use for: Tech presentations, evening talks, modern look Template:

template-dark.md

配色：黑色背景、青色/紫色点缀风格：深色主题搭配发光效果，护眼友好 适用场景：科技演示、晚间演讲、现代风格展示模板：

template-dark.md

5. Gradient Background Theme

5. 渐变背景主题

Colors: Purple/pink/blue/green gradients (varies per slide) Style: Different gradient per slide, white text, shadows Use for: Visual-focused, creative presentations Template:

template-gradient.md

配色：紫/粉/蓝/绿渐变（每张幻灯片不同）风格：每张幻灯片使用不同渐变、白色文字、阴影效果 适用场景：视觉导向型、创意演示文稿模板：

template-gradient.md

6. Tech/Code Theme

6. 科技/代码主题

Colors: GitHub-style dark background, blue/green accents Style: Code fonts, Markdown-style headers with # symbols Use for: Programming tutorials, tech meetups, developer content Template:

template-tech.md

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

template-tech.md

7. Business Theme

7. 商务主题

Colors: White background, navy headings, blue accents Style: Corporate presentation style, top border, table support Use for: Business presentations, proposals, reports Template:

template-business.md

配色：白色背景、深蓝色标题、蓝色点缀风格：企业演示风格、顶部边框、支持表格 适用场景：商务演示、提案、报告模板：

template-business.md

Creating Slides Process

幻灯片创建流程

Basic Workflow

基础工作流

Understand requirements
- Identify content: title, topics, key points
- Determine target audience
- Assess formality level
Select theme
- Use quick selection rules above
- If uncertain, consult
```
references/theme-selection.md
```
- Default to default theme if still unsure
Apply template
- Load appropriate template from
```
assets/
```
- CSS is already embedded - no external files needed
- Maintain template structure
Structure content
- Title slide:
```

```
  + h1
- Content slides: h2 title + bullet points
- Keep titles to 5-7 characters (Japanese)
- Use 3-5 bullet points per slide
Refine quality
- Read
```
references/best-practices.md
```
- Ensure adequate whitespace
- Maintain consistency
- Keep text concise (15-25 chars per line)
Add images
- If needed, consult
```
references/image-patterns.md
```
- Common:
```
![bg right:40%](image.png)
```
  for side images
- Use proper Marp image syntax
Output file
- Save to
```
/mnt/user-data/outputs/
```
- Use descriptive filename like
```
presentation.md
```

理解需求
- 明确内容：标题、主题、核心要点
- 确定目标受众
- 评估正式程度
选择主题
- 使用上述快速选择规则
- 如有疑问，参考
```
references/theme-selection.md
```
- 若仍不确定，默认使用default主题
应用模板
- 从
```
assets/
```
  目录加载对应模板
- CSS已嵌入文件，无需外部文件
- 保留模板结构
组织内容
- 标题幻灯片：
```

```
  + h1标题
- 内容幻灯片：h2标题 + 项目符号
- 标题控制在5-7个字符（日语）
- 每张幻灯片使用3-5个项目符号
优化质量
- 阅读
```
references/best-practices.md
```
- 确保留白充足
- 保持格式一致
- 文字简洁（每行15-25个字符）
添加图片
- 如需添加，参考
```
references/image-patterns.md
```
- 常见格式：
```
![bg right:40%](image.png)
```
  用于侧边图片
- 使用标准Marp图片语法
输出文件
- 保存至
```
/mnt/user-data/outputs/
```
  目录
- 使用描述性文件名，如
```
presentation.md
```

Handling "Make It Look Good" Requests

处理“优化外观”类请求

When users give vague instructions like "良い感じにして", "かっこよく", or "make it cool":

Infer theme from content:
- Business content → business theme
- Technical content → tech or dark theme
- Creative content → gradient or colorful theme
- General → default theme
Apply best practices automatically:
- Shorten titles to 5-7 characters
- Limit bullet points to 3-5 items
- Add adequate whitespace
- Use consistent structure
Enhance visual hierarchy:
- Use h3 for sub-sections when appropriate
- Break up dense text into multiple slides
- Ensure logical flow (intro → body → conclusion)
Maintain professional tone:
- Match formality to content
- Use parallel structure in lists
- Keep technical terms consistent

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

根据内容推断主题：
- 商务内容 → 商务主题
- 技术内容 → 科技或深色主题
- 创意内容 → 渐变或多彩主题
- 通用内容 → 默认主题
自动应用最佳实践：
- 将标题缩短至5-7个字符
- 项目符号限制为3-5个
- 添加充足留白
- 保持结构一致
增强视觉层级：
- 必要时使用h3作为子标题
- 将密集文本拆分为多张幻灯片
- 确保逻辑流程清晰（引言 → 主体 → 结论）
保持专业语气：
- 语气正式程度与内容匹配
- 列表使用平行结构
- 技术术语保持一致

Image Integration

图片整合

For slides with images, consult

references/image-patterns.md

for detailed syntax.

Common patterns:

Side image:
```
![bg right:40%](image.png)
```
- Image on right, text on left
Centered:
```
![w:600px](image.png)
```
- Centered with specific width
Full background:
```
![bg](image.png)
```
- Full-screen background
Multiple images: Multiple
```
![bg]
```
declarations

Example lecture pattern:

markdown

undefined

如需在幻灯片中添加图片，请参考

references/image-patterns.md

中的详细语法。

常见格式：

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

讲座场景示例：

markdown

undefined

Slide Title

幻灯片标题

Explanation point 1
Explanation point 2
Explanation point 3

undefined

说明要点1
说明要点2
说明要点3

undefined

File Output

文件输出

Always save the final Marp file to

/mnt/user-data/outputs/

with

.md

extension:

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

请始终将最终的Marp文件保存至

/mnt/user-data/outputs/

目录，后缀为

.md

：

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

Quality Checklist

质量检查清单

Before delivering slides, verify:

Theme selected appropriately for content
CSS theme is embedded in the file
Title slide uses
```

```
All h2 titles are concise (5-7 chars)
Bullet points are 3-5 items per slide
Images use proper Marp syntax
File saved to outputs directory
Content follows best practices

交付幻灯片前，请验证以下内容：

主题选择与内容匹配
CSS主题已嵌入文件
标题幻灯片使用了
```

```
所有h2标题简洁（5-7个字符）
每张幻灯片的项目符号为3-5个
图片使用标准Marp语法
文件已保存至输出目录
内容遵循最佳实践

References

参考文档

Core Documentation

核心文档

Marp syntax:
```
references/marp-syntax.md
```
- Basic Marp/Marpit syntax (directives, frontmatter, pagination, etc.)
Image patterns:
```
references/image-patterns.md
```
- Official image syntax (bg, filters, split backgrounds)
Theme CSS guide:
```
references/theme-css-guide.md
```
- How to create custom themes based on Marpit specification
Advanced features:
```
references/advanced-features.md
```
- Math, emoji, fragmented lists, Marp CLI, VS Code
Official themes:
```
references/official-themes.md
```
- default, gaia, uncover themes documentation

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主题文档

Quality & Selection Guides

质量与选择指南

Theme selection:
```
references/theme-selection.md
```
- How to choose the right theme for content
Best practices:
```
references/best-practices.md
```
- Quality guidelines for "cool" slides

主题选择：
```
references/theme-selection.md
```
- 如何根据内容选择合适的主题
最佳实践：
```
references/best-practices.md
```
- 打造“酷炫”幻灯片的质量规范

Templates & Assets

模板与资源

Templates:
```
assets/template-*.md
```
- Starting points with embedded CSS for each theme (7 themes)
Standalone CSS:
```
assets/theme-*.css
```
- CSS files for reference (already embedded in templates)

模板：
```
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

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