القائمة
教學駕駛艙完整生成技能。從備課 PDF 出發，自動上傳 NotebookLM 生成素材（簡報、影片、資訊圖表），下載並優化圖片，生成黑板粉筆風格的互動式教學駕駛艙 HTML，最後部署到 GitHub Pages。觸發情境：「做教學駕駛艙」、「產生駕駛艙」、「做互動教學平台」、「teaching cockpit」、「把教材做成駕駛艙」。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | teaching-cockpit |
| description | 教學駕駛艙完整生成技能。從備課 PDF 出發，自動上傳 NotebookLM 生成素材（簡報、影片、資訊圖表），下載並優化圖片，生成黑板粉筆風格的互動式教學駕駛艙 HTML，最後部署到 GitHub Pages。觸發情境：「做教學駕駛艙」、「產生駕駛艙」、「做互動教學平台」、「teaching cockpit」、「把教材做成駕駛艙」。 |
從教師提供的備課 PDF 出發，自動完成以下全流程：
當使用者說：
使用者需提供：
math-cockpit）3-1-triangles-polygons）這是最關鍵的階段，Claude 必須深入理解教材內容。
1a. Claude 讀取教材 PDF
# 使用 PyMuPDF 提取文字（因為 Read 工具可能無法讀取中文 PDF）
import fitz, sys, io
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
doc = fitz.open(r'<PDF路徑>')
for i in range(doc.page_count):
page = doc[i]
text = page.get_text()
if text.strip():
print(f'\n=== Page {i+1} ===')
print(text[:1500])
doc.close()
從教材中提取：
1b. NotebookLM 上傳
mcp__notebooklm-mcp__notebook_create（標題用單元名稱）mcp__notebooklm-mcp__source_add（source_type=file, wait=true, wait_timeout=300）mcp__notebooklm-mcp__notebook_describe（取得摘要）1c. 歸納教學重點 結合 Claude 理解 + NotebookLM 摘要，歸納出 5-7 個核心教學重點。每個重點需包含：
⚠️ 若 NotebookLM 認證過期，先執行
nlm login（可能遇到 cp950 編碼錯誤可忽略），再refresh_auth。
平行啟動（一次發出所有呼叫），每個都需 confirm: true、language: "zh-TW"：
| 素材 | 設定 |
|---|---|
| 授課簡報 | slide_deck, detailed_deck, focus: 粉筆黑板風格 20+ 頁，列出所有重點 |
| 學生自學影片 | video, explainer, whiteboard |
| 資訊圖表 × N | infographic, sketch_note, landscape, detailed，每個重點一張 |
focus_prompt 範本：
簡報：
製作國中數學「【單元名稱】」授課簡報，至少 20 頁以上，使用粉筆黑板風格 (chalkboard style)：深黑/墨綠色背板、手寫粉筆字體、白色與彩色粉筆線條、手繪圖形。內容須完整涵蓋以下重點：(1)【重點1】 (2)【重點2】...。每頁包含清楚的標題、定義、圖示與例題。
資訊圖表（每個重點）：
粉筆黑板風格資訊圖表 (chalkboard style：深色背景、手寫粉筆字、手繪圖形)。主題：【該重點】。呈現定義、圖示、性質、例題，16:9 橫向詳細版。
影片：
製作供學生自學使用的影片概覽，完整講解「【單元名稱】」的所有重點：(列出重點)。內容循序漸進，搭配圖形與例題說明，適合學生在家自學複習。
3a. 輪詢等待
studio_statusunknown 但有 URL 時不要下載，等 completed3b. 下載到本地
mkdir -p <project_dir>/assets
| 素材 | 下載到 |
|---|---|
| 簡報 PDF | <project_dir>/assets/授課簡報.pdf |
| 資訊圖表 | <project_dir>/assets/01_重點名.png ~ 0N_重點名.png |
| 影片 | <project_dir>/影片概覽_學生自學.mp4 |
3c. 簡報 PDF → 單張圖片
import fitz
doc = fitz.open(r'<PDF路徑>')
for i, page in enumerate(doc):
mat = fitz.Matrix(300/72, 300/72) # 300 DPI
pix = page.get_pixmap(matrix=mat)
pix.save(f'assets/slide_{i+1:02d}.png')
doc.close()
3d. 關鍵：PNG → 1920×1080 JPG
from PIL import Image
import os
for f in sorted(os.listdir('assets')):
if f.endswith('.png'):
img = Image.open(f'assets/{f}').convert('RGB')
img = img.resize((1920, 1080), Image.LANCZOS)
img.save(f'assets/{f.replace(".png", ".jpg")}', 'JPEG', quality=85)
⚠️ 這步驟是必要的！原始 PNG 解析度太高（~5734×3200），會導致瀏覽器渲染困難。
生成一個完整的單一 HTML 檔案，參考 C:\Users\user\.claude\skills\teaching-cockpit\TEMPLATE_REFERENCE.md 的架構。
核心架構：
HTML 結構：
├── <head>: CSS 全部內嵌（黑板粉筆風格 + 響應式 3 段 media query）
├── <body>:
│ ├── Header（木框風格，sticky）
│ ├── Mode Bar（教師/學生模式，密碼 math2026）
│ ├── 學習目標 chips
│ ├── 主題導覽 pills（錨點跳轉）
│ ├── 開場簡報翻頁器
│ ├── 每個重點 × N：
│ │ ├── 簡報翻頁器（手動 ‹ › 切換，display:none/block）
│ │ ├── Canvas 互動視覺化
│ │ ├── 形成性評量 2-3 題（記憶/理解層次）
│ │ ├── 資訊圖表（點擊全螢幕）
│ │ └── [教師模式] 教學提示
│ ├── 總結 Cheat Sheet
│ ├── 學生自學影片（video, preload=none）
│ ├── YouTube 教學影片（iframe 或佔位圖）
│ └── [教師模式] 常見錯誤、NotebookLM 連結
├── 浮動工具面板（右側）：抽籤器（可調座號）+ 計時器
├── 獨立畫筆按鈕（左下角）+ 左側垂直工具列
└── <script>: JS 全部內嵌（Canvas 互動、翻頁、工具、resize handler）
設計規範：
#1a2a1a、白色粉筆文字 #e8e4d8、黃 #ffd54f、粉紅 #ff8a80、淺藍 #81d4fa#8d6e4a 漸層loading="lazy" + .jpg 格式preload="none"window.addEventListener('resize', resizeCanvases)互動視覺化設計原則： 每個重點的 Canvas 互動要根據教材內容客製化。常見類型：
形成性評量設計原則：
翻頁器實作（非輪播）：
// 使用 display:none/block 切換，非 translateX 滑動
function carGo(id, idx) {
const imgs = document.querySelectorAll(`#${id} .carousel-inner img`);
imgs.forEach((img, i) => img.classList.toggle('active', i === idx));
}
角度弧繪製（使用叉積判斷方向）：
// 用叉積判斷弧的正確繪製方向
const cross = vA.x * vB.y - vA.y * vB.x;
ctx.arc(cx, cy, r, angleA, angleB, cross < 0);
凹多邊形（正確定義）：
部署前必須檢查：
| 限制 | 數值 | 檢查方法 |
|---|---|---|
| 單檔 < 100 MB | 拒收 | find . -size +100M |
| 單檔 < 50 MB | 警告 | find . -size +50M |
| 整站 < 1 GB | Pages 上限 | du -sh . |
原則：靜態檔（JPG、HTML）放 GitHub，影片放 YouTube。
建立獨立的 GitHub 部署資料夾（必要步驟！不要直接上傳工作資料夾）：
# 在專案目錄下建立 github-deploy 資料夾
mkdir -p <project_dir>/github-deploy/assets
# 只複製需要上傳的檔案（JPG + HTML）
cp <project_dir>/index.html <project_dir>/github-deploy/
cp <project_dir>/assets/*.jpg <project_dir>/github-deploy/assets/
# 確認大小符合限制
du -sh <project_dir>/github-deploy/
find <project_dir>/github-deploy/ -size +50M # 不應有任何結果
不上傳的檔案（留在本地工作資料夾）：
*.png（原始高解析度圖片）*.mp4（NotebookLM 影片）*.pdf（簡報 PDF）6a. 若倉庫已存在（如 math-cockpit）：
cd <repo_dir>
mkdir -p <unit_folder>/assets
cp <deploy_dir>/index.html <unit_folder>/
cp <deploy_dir>/assets/*.jpg <unit_folder>/assets/
# 更新首頁 index.html 加入新單元連結卡片
git add <unit_folder>/ index.html
git commit -m "feat: 新增【單元名稱】教學駕駛艙"
git push
6b. 若倉庫不存在：
gh repo create <repo_name> --public --description "國中數學教學駕駛艙"
# 建立首頁 index.html（單元導覽頁）
# 建立 .github/workflows/deploy.yml
# git init → add → commit → push
# gh api 啟用 Pages (build_type=workflow)
首頁導覽卡片模板：
<a class="unit-card" href="<folder>/index.html">
<h2>📐 【單元名稱】</h2>
<p>【重點摘要】</p>
<span class="badge">【年級學期】</span>
<span class="badge">【章節】</span>
</a>
GitHub Actions workflow：
name: Deploy to GitHub Pages
on:
push:
branches: [main]
permissions:
contents: read
pages: write
id-token: write
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/configure-pages@v5
- uses: actions/upload-pages-artifact@v3
with:
path: '.'
- id: deployment
uses: actions/deploy-pages@v4
最終回報：
| 選項 | 預設值 | 說明 |
|---|---|---|
| 簡報風格 | chalkboard | 可選 bento_grid / professional / anime 等 |
| 資訊圖表風格 | sketch_note | 與簡報統一風格 |
| 影片風格 | whiteboard | 可選 classic / cinematic 等 |
| 簡報頁數 | 20+ | 可自訂 |
| 形成性評量題數 | 每重點 2-3 題 | 記憶/理解層次 |
| 座號範圍 | 1-30 | 可調整 |
| YouTube 影片 | 佔位圖 | 使用者提供網址時才嵌入 |
pip install pymupdf pillownlm login → refresh_auth