Build Your Exclusive Teaching Cockpit with Claude+NotebookLM+Github

你會學到

• 整合 Claude Code、NotebookLM 及 GitHub，打造專屬教學駕駛艙，解決備課與教學過程中多工具切換的困擾。
• 透過 AI 工具自動化生成教學網站，將簡報、互動、評量、資訊圖表等素材統整於單一頁面。
• 強調邊做邊修正的迭代優化過程，針對 AI 生成的內容和功能進行調整，逐步完善教學駕駛艙。
• 示範將教學網站部署至 GitHub Pages，並優化檔案大小以符合上傳限制。
• 最終目標是將整個「教學駕駛艙」的建置流程標準化並製作成一個可重複使用的 AI Skill，提升教學效率。
• 在 Claude Code 桌面版中，指定包含備課資料（如 PDF）的資料夾，讓 Claude 讀取內容。
• 指示 Claude 根據教材在 NotebookLM 中建立筆記本，並生成簡報（指定風格）、影片總覽及資訊圖表。
• 下載生成的素材，特別是將簡報 PDF 轉換為 1920x1080 解析度的 JPG 圖片，以優化網頁載入速度及容量。
• 要求 Claude 讀取所有素材，建立融合簡報輪播、互動視覺化、形成性評量、資訊圖表及浮動工具面板（抽籤、計時器、畫筆）的教學駕駛艙網頁。
• 預覽生成的網頁，並逐步向 Claude 提出修改需求，例如：調整畫筆工具位置、簡報改為手動翻頁、調整抽籤座號範圍、響應式設計等。
• 請 Claude 檢查教學駕駛艙網頁是否符合 GitHub Pages 的檔案大小限制（單檔 100Mbps，整站 1Gbps）。
• 建立一個專用於 GitHub 上傳的資料夾，僅包含網頁所需檔案（HTML, JPG），以節省空間。
• 將優化後的教學駕駛艙部署到 GitHub，並建立新的倉庫以便管理未來同類型的教學駕駛艙。
• 整理並優化整個建置流程，最終將此流程製作成一個可重複使用的 AI Skill。

教學金句

「我們在備課的時候會準備非常多的素材… 而我們在眾多工具之間切換相當不方便。」 「我把這個界面叫做教學駕駛艙。」 「你第一次在做的時候會遇到很多問題，沒有關係，我們就邊做邊修正，等全部做完之後我們可以統整一個修正過後的比較優化的流程，下次做就會好很多。」 「AI時代想要讓你的教學有效率，你就要學會使用這些工具啊。」 「將這整個教學駕駛艙的工作流程製作成一個skill，之後我只要說幫我製作成某某單元的教學駕駛艙，他就會自動幫我跑整輪生成教材。」

適用情境

這部影片適合納入 AI 輔助教學工具應用的進階課程模組，特別是針對中高階的教育工作者或教材開發人員。學員應具備對 Claude Code (或類似 LLM 應用)、NotebookLM (或類似知識管理工具) 和 GitHub Pages 的基本操作知識，或至少對這些工具的概念有初步理解。影片主要教授如何利用 AI 工具實現教學素材的自動化整合與部署，提升備課效率與教學互動性。

延伸主題

• 如何設計並實現更複雜的「教學駕駛艙」功能，例如整合學生名單、學習進度追蹤、自動化評分系統。
• 深入探討大型語言模型 (LLM) 在生成互動式教學內容及網頁設計中的 Prompt Engineering 技巧。
• GitHub Pages 的進階應用，例如自定義域名、CI/CD 流程整合、安全考量。
• 響應式網頁設計 (Responsive Web Design) 的原理與實作，確保教學駕駛艙在不同裝置上的良好使用者體驗。

---en---

What You’ll Learn

• Integrate Claude Code, NotebookLM, and GitHub to create a dedicated teaching cockpit, solving the problem of switching between multiple tools during lesson preparation and teaching.
• Automatically generate teaching websites using AI tools, consolidating presentations, interactions, assessments, and infographics onto a single page.
• Emphasize an iterative optimization process of “doing and correcting,” adjusting AI-generated content and features to gradually refine the teaching cockpit.
• Demonstrate deploying teaching websites to GitHub Pages and optimizing file sizes to meet upload limits.
• The ultimate goal is to standardize the entire “teaching cockpit” construction process and turn it into a reusable AI Skill to enhance teaching efficiency.
• In Claude Code desktop version, specify a folder containing lesson materials (e.g., PDF) to allow Claude to read its content.
• Instruct Claude to create a notebook in NotebookLM based on the materials and generate presentations (specifying style), video overviews, and infographics.
• Download generated materials, especially converting presentation PDFs to 1920x1080 resolution JPG images to optimize webpage loading speed and capacity.
• Ask Claude to read all materials and build a teaching cockpit webpage that integrates presentation carousels, interactive visualizations, formative assessments, infographics, and a floating tool panel (lottery, timer, drawing tools).
• Preview the generated webpage and progressively submit modification requests to Claude, such as adjusting drawing tool positions, changing presentations to manual page-turning, adjusting lottery seat number ranges, and responsive design.
• Ask Claude to check if the teaching cockpit webpage complies with GitHub Pages file size limits (100Mbps per single file, 1Gbps for the entire site).
• Create a dedicated folder for GitHub uploads, containing only necessary webpage files (HTML, JPG) to save space.
• Deploy the optimized teaching cockpit to GitHub and create a new repository to manage future teaching cockpits of the same type.
• Organize and optimize the entire construction process, ultimately turning it into a reusable AI Skill.

Teaching Quote

“We prepare a lot of materials when lesson planning… and switching between many tools is quite inconvenient.” “I call this interface a teaching cockpit.” “You will encounter many problems the first time you do it, that’s okay, we will refine it as we go. After finishing, we can summarize a revised and optimized process, and it will be much better next time.” “In the AI era, if you want your teaching to be efficient, you must learn to use these tools.” “By making the entire workflow of this teaching cockpit into a skill, next time I just say ‘help me create a teaching cockpit for [unit name]’, and it will automatically run the whole process to generate materials.”

When to Use

This video is suitable for inclusion in advanced course modules on AI-assisted teaching tool applications, especially for mid-to-high-level educators or curriculum developers. Learners should have basic knowledge of Claude Code (or similar LLM applications), NotebookLM (or similar knowledge management tools), and GitHub Pages, or at least a preliminary understanding of their concepts. The video primarily teaches how to use AI tools to automate the integration and deployment of teaching materials, thereby improving lesson preparation efficiency and teaching interactivity.

Related Topics

• How to design and implement more complex “teaching cockpit” functionalities, such as integrating student rosters, learning progress tracking, and automated grading systems.
• In-depth exploration of Prompt Engineering techniques for large language models (LLMs) in generating interactive teaching content and web design.
• Advanced applications of GitHub Pages, such as custom domains, CI/CD pipeline integration, and security considerations.
• Principles and implementation of Responsive Web Design to ensure a good user experience for the teaching cockpit across different devices.