投影片教學影片：網頁投影片配電腦念稿
2026年9月27日 · 更新 2026年9月28日 · 看到自 YouTube · 0 次瀏覽
把一篇文章做成 10 分鐘的教學影片：畫面是網頁投影片，聲音是電腦念稿，旁白念完一句就翻下一步。
文章是〈別讓 MCP 吃掉你 Agent 的 Context〉，影片用一間餐廳來比喻。一共 18 章、116 步，配 17 張 AI 畫的插畫。
怎麼做，誰做的
- AI 先交骨架：每一章講什麼、怎麼收尾。我看過才寫旁白
- 6 個 AI 分頭做投影片，一個負責一組章節
- Gemini 畫插畫：深藍底、細線稿，圖上不放字
- 電腦念稿（qwen3-tts）。念完再用語音辨識聽一遍，念錯就重念，最多 5 次
- 另外派一個 AI 當檢查員，自己重新量一次，不相信做的人說的
畫面怎麼動起來
畫面上的動畫都是 CSS 動畫：告訴瀏覽器「一秒內從左邊滑進來」，瀏覽器就自己動。整支片寫了將近 80 組。
每段旁白念完，停 0.2 秒翻下一步；一章結束，停 1.8 秒。
CSS 動畫照瀏覽器自己的時鐘跑，不會等人。所以不能一格一格拍，只能照正常速度錄影：10 分 23 秒的片，就錄 10 分 23 秒。錄的時候順便記下每次翻頁的時間，最後把旁白照時間貼回去。
卡過：一開始想一格一格拍，拍到大約 125 格就太久被中斷。少拍幾格，動畫又跟不上，拍到動到一半的畫面。
解法：改成照正常速度錄影。
AI 做到哪
做得到
- 6 個 AI 同時做 18 章，再合成一支片
- 自己念稿、自己聽寫檢查，115 段念稿全部通過
- 只重錄其中一章再接回去，長度一點都沒差
還要人幫忙
- 結構：第一版腳本每一句都通過檢查，整體卻被我打回「起承轉合寫的很失敗」。之後改成先交骨架
- 畫圖：它自己畫的廚師，我看了說「好醜完全看不懂」，才改用生圖
- 念稿偶爾會念壞、整句漏掉，要靠聽寫檢查抓出來重念
- 會謊報：有一個 AI 回報做了 1 個動畫，檢查員一量是 0 個
原始文章：〈別讓 MCP 吃掉你 Agent 的 Context〉
做法來自 ConardLi 開源的 web-video-presentation（garden-skills）
2026 年 9 月 27 日重錄
0 個讚