教材轉視覺化教學簡報 v2.0

哲學定位

「好的教學簡報不是把文字搬上投影片，而是把複雜知識視覺化。」 → 25 種版型 × 8 種色盤 × 智慧內容分析，讓每張投影片都有最適合的呈現方式。

設計系統 V2.0：Edu Warm × Claude Design

基於 Claude Design（2026-04-17）+ canvas-design 官方字型規格升級

設計皮膚：Edu Warm（教育溫暖）

/* 命名空間變數（跨 skill 安全，不與 Neon Circuit 衝突） */
--edu-warm-bg: #fffbf5;      --edu-warm-text: #141413;
--edu-warm-primary: #d97757; --edu-warm-secondary: #6a9bcc;
--edu-warm-accent: #788c5d;
--edu-warm-font-heading: 'Work Sans', 'Noto Sans TC', sans-serif;
--edu-warm-font-body: 'Noto Sans TC', sans-serif;
/* 向下相容別名 */
--bg: var(--edu-warm-bg);      --text: var(--edu-warm-text);
--primary: var(--edu-warm-primary); --secondary: var(--edu-warm-secondary);
--accent: var(--edu-warm-accent);
--font-heading: var(--edu-warm-font-heading);
--font-body: var(--edu-warm-font-body);

禁用字型：Inter、Roboto、Arial — 缺乏教育溫感，系統字體不可控
禁止模式：漸層轟炸（aggressive gradients）、每頁 Emoji 裝飾、SVG 插圖嘗試
色彩延伸：需要額外色階時用 oklch()（如 oklch(75% 0.12 55) 衍生暖橙色系）

Edu Warm 字型層級

H1（投影片主標）: Work Sans Bold 30px / color: #d97757
H2（小節標題）:  Work Sans SemiBold 22px
內文要點:        Noto Sans TC Regular 18px / line-height: 1.75
強調文字:        Work Sans Medium 18px / color: #d97757
備注說明:        Noto Sans TC Regular 14px / color: #6B6B6B

16:9 簡報格線系統（1280×720px）

外邊距: 64px 四周
頁首帶: top 80px  — 課程主題（Work Sans Bold）
主內容: 592px 高  / 12欄格線 gutter 16px
頁尾帶: bottom 48px — 頁碼 + 108課綱對應

canvas-design 設計原則（簡報適用版）

內容密度：依年級規格限制字數（見 Step 2 年級對應表）
視覺主導：每張投影片的視覺元素（圖形/圖示/色塊）應佔 ≥40%
最少裝飾：視覺服務概念理解，而非妝點頁面
文字品質：所有文字元素加 text-wrap: pretty，每個元素必須有存在理由（no filler）

影響學習效果的簡報設計原則

文字與圖像永遠同頁同側 說明文字與對應圖像必須放在同一張投影片、相鄰位置，不可一張放圖、下一張才放說明。學生在圖片和說明之間切換頁面會增加認知負擔，干擾理解而非幫助理解。

講解新概念：先示例，再解析 引入新概念的投影片請遵循順序：先呈現「這個概念看起來是什麼樣子」（完整示例），再進入「為什麼這樣運作」（分析解釋），而不是直接拋問題要學生猜。對尚未掌握概念的學生，問題引導比示例引導更容易造成困惑。

裝飾性元素一律省略 無意義的圖示、邊框動畫、純裝飾插圖會分散學生注意力而非幫助理解。每個視覺元素都需要有「它在傳達什麼知識？」的答案，答不出來就刪掉。

Step 0：讀取必要參考文件

依序讀取以下四個文件，作為後續步驟的知識基礎：

references/slide_design_principles.md — 25 種版型庫 + 選版型規則 + 色盤配對指南
../../tw_edu_grade_adapter.md — 年級偵測與內容難度適應系統
../../tw_edu_guided_collection.md — 引導式資訊收集框架
../../tw_edu_concept_alignment.md — 概念對齊協議（確認方向一致再執行）

Step 1：年級偵測 + 路徑選擇 + 引導式資訊收集

1-A. 雙路徑選擇（第一個問題）

🛤️ 請問您想用哪種方式製作簡報？

A. 🖥️ Claude 內建（直接生成 .pptx 檔案，可立即下載，適合快速製作）
B. 🎨 Canva 路徑（呼叫 Canva 生成高設計感版本，視覺效果更精美）

→ 請輸入 A 或 B，或直接描述您的需求（我會自動判斷）

1-B. 核心資訊收集（最多 3 個必填問題）

Q1: 「這份簡報的教學主題或課文是什麼？」
Q2: 「給哪個年級的學生使用？」（若未偵測到）
Q3: 「您有現成的教材想提供嗎？（可貼文字、上傳 Word/PDF、提供網址）」

提示：您可以直接貼上文字內容、上傳 Word 或 PDF、
      提供網頁連結，或用文字描述想要什麼內容。

1-C. 風格選擇（選填）

Q4: 「想要哪種色盤？
    A. 簡約現代（白底深藍，正式課堂）
    B. 活潑彩色（鮮明藍橘，低年級互動）
    C. 深色沉穩（深藍底，高中/程式/專業）
    D. 台灣特色（棕紅米色，本土文化課）
    E. 自然清新（綠色系，自然/環境/健康）
    F. 科技感 （靛青深底，資訊/AI課程）
    G. 溫暖橙調（橙色系，藝術/社會/SEL）
    H. 學術紫  （深紫系，文學/哲學/研究）」

Q5: 「圖示風格？
    A. Emoji（輕量預設，零依賴）
    B. SVG 圖示（需要網路，下載 Iconify 公開資源）
    C. 純文字（無圖示）」

Q6: 「幾張投影片？（預設依內容自動判斷，通常 12-18 張）」

1-D. 確認摘要（執行前輸出）

✅ 主題：{主題}
🎓 年級：{年級}（→ 字體/密度已自動調整）
🛤️ 路徑：{A. Claude 內建 / B. Canva}
🎨 色盤：{色盤選擇}
🖼️ 圖示：{emoji / svg / none}
📊 張數：約 {N} 張（含封面/目標/內容/結尾）
📄 輸出：{主題}_教學簡報.pptx

Step 2：年級對應簡報規格

學習階段	每頁字數上限	圖文比例	字體大小	動畫建議
國小低年級（1-2年）	20字	圖 70%	標題 40pt / 內文 28pt	多（出現動畫）
國小中高年級（3-6年）	40字	圖 55%	標題 36pt / 內文 24pt	適中
國中（7-9年）	80字	圖 40%	標題 32pt / 內文 22pt	少
高中（10-12年）	120字	圖 30%	標題 28pt / 內文 20pt	無或極少

Step 2.5：內容智慧分析（核心步驟）

依輸入素材類型，先做前處理：

輸入類型	前處理方式
直接貼入文字/課文	直接進入分析
Word/PDF 上傳	`python3 -m markitdown /mnt/user-data/uploads/[檔名]` 轉成文字後分析
只給主題（無素材）	依主題＋年級＋108課綱脈絡自行生成完整內容
網頁 URL	WebFetch 抓取正文後分析

內容分析輸出（JSON 格式）：

根據輸入素材與 references/slide_design_principles.md 的版型選擇規則，輸出以下結構化 JSON（存為 /tmp/slides_content.json）：

{
  "title": "課文/主題名稱",
  "subject": "科目",
  "grade": "年級",
  "objectives": [
    "能（布魯姆動詞）...",
    "能（布魯姆動詞）...",
    "能（布魯姆動詞）..."
  ],
  "slides": [
    {
      "layout": "hero_message",
      "headline": "開場大標語",
      "subtext": "副標題或引導語"
    },
    {
      "layout": "content",
      "title": "概念標題",
      "bullets": ["重點一", "重點二", "重點三"],
      "note": "教師提示"
    },
    {
      "layout": "two_column",
      "title": "比較標題",
      "left_title": "左欄標題",
      "left_bullets": ["..."],
      "right_title": "右欄標題",
      "right_text": "..."
    }
    // ... 依內容自動選擇最適版型
  ],
  "discussion_question": "思考提問句",
  "summary": [
    ["關鍵詞一", "說明一"],
    ["關鍵詞二", "說明二"],
    ["關鍵詞三", "說明三"],
    ["關鍵詞四", "說明四"]
  ],
  "homework": "課後任務說明"
}

版型多樣性要求：一份簡報應包含 ≥4 種不同版型，避免連續 3 張以上使用相同版型。

Step 3：路徑分歧

路徑 A：Claude 內建 .pptx

執行腳本：

python scripts/generate_slides.py \
  --title "[主題名稱]" \
  --subject "[科目]" \
  --grade "[年級]" \
  --stage "[elementary_low|elementary_high|junior|senior]" \
  --style "[modern|colorful|dark|local|nature|tech|warm|purple]" \
  --icons "[emoji|svg|none]" \
  --content_file "/tmp/slides_content.json" \
  --slides_count [張數] \
  --output "/mnt/user-data/outputs/[主題]_教學簡報.pptx"

路徑 B：Canva 高設計感版本

若 Canva MCP 可用：

呼叫 Canva MCP：
generate-design(
  design_type="presentation",
  query="[主題] [年級]教學簡報，[色盤風格]，共[N]頁，
         包含：[slide titles 列表]"
)

若 Canva MCP 不可用：

⚠️ 偵測到 Canva MCP 未連線

→ 請至 Claude Code 設定 → Connectors → 啟用 Canva
→ 或切換到「路徑 A - Claude 內建」繼續製作
  （內容分析已完成，可直接執行 .pptx 生成）

Step 4：25 種版型說明（摘要）

詳細版型規格見 references/slide_design_principles.md。

版型	用途摘要
`content`	條列文字（預設）
`discussion`	思考提問 + 計時器
`two_column`	左右雙欄說明
`activity`	步驟卡 + 時間/分組
`vocab`	詞彙格子（注音+釋義）
`timeline`	橫向時間軸節點
`comparison`	雙色對照欄
`big_quote`	大字金句居中
`data_highlight`	大數字統計卡
`image_focus`	圖片佔位框 + 說明
`process_flow`	橫向箭頭流程
`kanban`	三欄 KWL 分類
`concept_web`	放射狀概念圖
`pros_cons`	✅優/❌缺雙欄
`section_cover`	章節分隔頁
`hero_message`	全版大標語
`three_cards`	三卡並列
`four_quadrants`	四象限矩陣
`icon_list`	圖示條列清單
`stat_bar`	文字進度條比較
`pyramid`	金字塔層次
`agenda`	議程目錄
`testimonial`	人物引言卡
`split_screen`	非對稱分割
`blank_canvas`	空白模板

微調模式（Delta-Update）

生成簡報後，用戶輸入以下動詞開頭時，只修改指定部分：

動詞	動作	範例
換	替換內容/樣式	「換第3張標題」→ 只更新第3張 headline
改	修改屬性	「改色盤為深色沉穩」→ 只更新 CSS 色彩變數
加	插入投影片	「在第4張後加一張討論題」→ 插入 discussion 版型
刪	移除投影片	「刪掉第7張」→ 從 JSON 中移除該 slide
調	微調數值	「調字體更大」→ 依年級規格上調 font-size

tw-edu-slides-creator

教材轉視覺化教學簡報 v2.0

哲學定位

設計系統 V2.0：Edu Warm × Claude Design

設計皮膚：Edu Warm（教育溫暖）

Edu Warm 字型層級

16:9 簡報格線系統（1280×720px）

canvas-design 設計原則（簡報適用版）

影響學習效果的簡報設計原則

Step 0：讀取必要參考文件

Step 1：年級偵測 + 路徑選擇 + 引導式資訊收集

1-A. 雙路徑選擇（第一個問題）

1-B. 核心資訊收集（最多 3 個必填問題）

1-C. 風格選擇（選填）

1-D. 確認摘要（執行前輸出）

Step 2：年級對應簡報規格

Step 2.5：內容智慧分析（核心步驟）

Step 3：路徑分歧

路徑 A：Claude 內建 .pptx

路徑 B：Canva 高設計感版本

Step 4：25 種版型說明（摘要）

微調模式（Delta-Update）

Step 5：品質確認清單

MCP 整合說明

Canva MCP（路徑 B）

Google Drive MCP（若已連接）

More from fw1201/tw-edu-skills

tw-edu-worksheet-creator

tw-edu-pbl-designer

tw-edu-feedback-writer

tw-edu-school-document

tw-edu-parent-communication

tw-edu-meeting-facilitator