marp-slide

Marp 投影片製作工具

建立專業且視覺吸引人的 Marp 簡報投影片，內建 7 種預設主題與最佳實務。

何時使用此技能

當使用者：

• 要求建立簡報投影片或 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

處理「讓它變好看」的需求

當使用者給出模糊指示，例如「良い感じにして」、「かっこよく」或「弄酷一點」：

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 語法（指令、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 檔案（已內嵌於範本中）

官方外部連結

• 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