Open Design Slide Deck 技能指南

技能概述

Slide Deck 技能生成全屏 HTML 簡報，類似 PowerPoint/Keynote 的幻燈片體驗。支持鍵盤導航（← →）、全屏模式、頁面過渡動畫、進度條指示器。每張幻燈片是獨立的 <section>，包含標題、要點列表、圖表和插圖。單一 HTML 文件，離線可用。

觸發關鍵字

slide deck、presentation、簡報、幻燈片
ppt alternative、html slides、keynote、roadshow

什麼時候用

產品路演 / Pitch Deck
技術分享會演示
週報 / 月報匯報
培訓材料展示
會議演講

使用方法

實際場景

場景一：投資人 Pitch Deck

你需要在 15 分鐘內向投資人介紹項目。創建 8 張幻燈片：封面 → 痛點 → 解決方案 → 市場規模 → 商業模式 → 競爭優勢 → 團隊 → 融資需求。每張控制在 3-5 個要點，配合簡潔圖表。鍵盤導航讓你專注演講，不用操心鼠標操作。

場景二：技術團隊週報

每週用 5 分鐘向團隊匯報進度。3 張幻燈片：本週完成 → 下週計劃 → 需要協助。模板統一，只需替換內容，5 分鐘即可完成匯報準備。

核心實現

<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #0f172a; color: #fff; }
.slide {
  display: none;
  min-height: 100vh;
  padding: 4rem;
  flex-direction: column;
  justify-content: center;
}
.slide.active { display: flex; }
.slide h1 { font-size: 3rem; margin-bottom: 1rem; }
.slide ul { font-size: 1.5rem; line-height: 2; margin-left: 2rem; }
/* 進度條 */
.progress-bar {
  position: fixed; bottom: 0; left: 0; height: 3px;
  background: #3b82f6; transition: width 0.3s;
}
/* 導航 */
.nav { position: fixed; bottom: 1rem; right: 2rem; font-size: 0.875rem; opacity: 0.5; }
</style>
</head>
<body>
<section class="slide active"><h1>產品介紹</h1><p>用技術解決問題</p></section>
<section class="slide"><h1>市場痛點</h1><ul><li>效率低下</li><li>成本高昂</li><li>體驗不佳</li></ul></section>
<section class="slide"><h1>我們的方案</h1><p>AI 驅動的自動化平台</p></section>
<div class="progress-bar" id="progress"></div>
<div class="nav" id="nav">1 / 3</div>
<script>
let current = 0;
const slides = document.querySelectorAll('.slide');
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowRight' && current < slides.length - 1) {
    slides[current].classList.remove('active');
    current++; slides[current].classList.add('active');
    updateUI();
  }
  if (e.key === 'ArrowLeft' && current > 0) {
    slides[current].classList.remove('active');
    current--; slides[current].classList.add('active');
    updateUI();
  }
});
function updateUI() {
  document.getElementById('progress').style.width = ((current + 1) / slides.length * 100) + '%';
  document.getElementById('nav').textContent = `${current + 1} / ${slides.length}`;
}
updateUI();
</script>
</body>
</html>

自檢清單

使用場景示例

場景一：投資人 Pitch Deck

15 分鐘向投資人介紹項目，8 張幻燈片（封面 → 痛點 → 解決方案 → 市場規模 → 商業模式 → 競爭優勢 → 團隊 → 融資需求），每張 3-5 個要點。

場景二：技術團隊週報

每週 5 分鐘匯報進度，3 張幻燈片（本週完成 → 下週計劃 → 需要協助），模板統一，快速準備。

場景三：培訓材料

為新員工培訓創建 12 頁簡報，包含章節分隔、內容頁和互動問答環節，鍵盤導航流暢切換。

參考資源

reveal.js — 流行的 HTML 簡報框架
Slides.com — 基於 reveal.js 的在線編輯器
Presentation Zen — 簡報設計理念