製作影片實戰流程
日常工作就開著這頁。從「出需求」到「看 mp4 驗收」,照順序做就能產出一支教學影片。環境還沒弄好的先看「環境準備」。
0流程總覽:你只出現在頭尾
| 步驟 | 誰做 | 內容 |
|---|---|---|
| ① 出需求 | 你(人) | 用白話講「要一支介紹什麼的影片」 |
| ② 起草 draft | 你或 AI | 白話腳本 01-draft.md——自己寫、或叫 AI 起草你再改,都可以 |
| ③ 轉大綱 outline | AI | 把 draft 轉成結構化大綱(你 review 文字) |
| ④ 寫程式 feature | AI | 把大綱轉成自動化程式 |
| ⑤ 驗證 + 錄影 | AI | 冒煙測試(約 1–2 分鐘)→ 正式錄影(約 5–10 分鐘),自動跑 |
| ⑥ 更新紀錄 | AI | 自動 |
| ⑦ 技術檢驗 | AI | 確認跑得過、有產出、進度到哪 |
| ⑧ 最終驗收 | 你(人) | 打開 mp4 看,內容/節奏對不對;不滿意記下第幾秒哪裡怪,叫 AI 改 |
你(人)只出現在頭尾兩格:出需求、看成果。中間全是 AI。下面照順序教你每一步。
1第一步:需求怎麼變成 draft(總覽表的 ①②)
01-draft.md 是「這支影片要演什麼」的白話腳本,是整條流程的起點。它不一定要你親手寫——你出需求、AI 起草,都可以。不用管格式漂不漂亮,AI 會整理。
有兩種起手式,新手推薦先用第二種(你講需求、AI 先擬初稿、你再改),面對空白檔案比較不會卡:
起手式一 · 從零照範本填
照下面範本,一格一格填。填完就是一份合格 draft:
# {章節名} 白話腳本草稿
## 基本設定
- 預估時長:6-8 分鐘
- 主要角色:admin ← 用誰的帳號登入(admin/pm/executor/reviewer/auditor)
- 觀眾:新進工程師
- 前置條件:已用 admin 登入(影片不會出現登入畫面)
## 內容大綱
前置說明:
(先用旁白解釋這個功能是什麼、為什麼要有它。像老師開場那樣講。)
功能介紹:
用 PM 角色登入後
從左側選單點「合規框架管理」
進到頁面後幫我做頁面導覽:介紹表格、右上角「新增框架」按鈕、搜尋區塊
操作示範:
1. 點右上角「新增框架」
2. 彈出對話框,輸入名稱、版號、發佈機關、狀態、描述,按儲存
3. 進到版本管理頁,一樣導覽一下這個頁面
...(把步驟 1,2,3 列清楚就好)
## 想強調的概念
- 框架是所有專案的基礎,不要跟「資源庫」搞混
## 想避開的事
- 不要用太多英文術語、不要講 OSCAL 細節
起手式二 · 請 AI 先擬初稿,你再改(推薦新手)
不用從白紙開始——先用白話請 AI 幫你擬一份 draft 初稿,再讀、再挑不對的地方改。這正是產線精神:連草稿都能 AI 先擬、你來定。這招實際用過、成效不錯。
一個好用的起草 prompt 長這樣(照著改成你的功能):
我要做一支「合規框架管理」功能的教學影片,幫我先擬一份 01-draft.md 草稿。
先看這些再寫(別憑空編):
- 功能規格文件(FR-047 spec 手冊,在 BE 專案):
~/Projects/Billows/Audit-Manager/compliance-manager-be/docs/specs/v1.8.0/compliance-framework/compliance-framework-manage.md
- 前端頁面(FE 專案原始碼 + 頁面網址):
~/Projects/Billows/Audit-Manager/compliance-manager-fe/src/views/compliance-framework/ComplianceFrameworkManage.vue
頁面路徑:/compliance-framework/compliance-framework-manage
- 可參考已完成的章節:training/chapters/01-pm/01-framework/
這支影片:
- 給誰看:新進工程師(一般 user)
- 語氣:白話、簡單,不要提 OSCAL、不要太技術的詞
- 用 PM 角色登入操作,約 6-8 分鐘
影片內容至少要涵蓋(照功能實際有的來,沒有的跳過):
- 頁面導覽:列表長怎樣、每個按鈕/搜尋區塊是做什麼的
- 基本 CRUD 走一遍:新增一筆(每個欄位怎麼填)→ 查看 → 編輯 → 刪除
- 搜尋/篩選:怎麼找到剛建的那筆
- 常見錯誤情境挑 1-2 個:例如必填沒填、名稱重複時系統怎麼提示
- 收尾:這功能跟哪些功能有關聯、下一步通常做什麼
先幫我分析這個功能,列出「你打算演哪些段落、每段大概多長」給我確認;
我點頭後你再產出 draft 草稿;draft 產好也先給我看,
我 review 完才往下寫 outline。不要一路衝到底。
這個 prompt 為什麼好用(起草 prompt 的四個要點):
| 要點 | 為什麼重要 | prompt 裡對應的部分 |
|---|---|---|
| ① 先給料 | 讓 AI 有根據不亂編 | 指明 FR-047 spec 文件路徑(功能的權威規格)、前端頁面的原始碼路徑+頁面網址、點一支已完成章節當參考 |
| ② 講清楚受眾與語氣 | 直接決定旁白風格 | 給誰看(一般 user / 工程師)、不要用什麼詞(OSCAL、技術術語)、角色、預估時長 |
| ③ 列出內容底線 | 影片不會漏掉基本盤 | 頁面導覽(按鈕/搜尋是做什麼的)、基本 CRUD 走一遍(新增→查看→編輯→刪除)、搜尋/篩選、1-2 個常見錯誤情境、收尾(跟哪些功能相關、下一步) |
| ④ 要求分段停下確認 | 不要一路衝到底 | 先列「打算演哪些段落」給你點頭 → draft 產好先給你看 → 你 review 完才往下寫 outline |
換成你的功能時,那些路徑去哪找? 直接問 AI 最快——例如:「我要做『報表匯出』的教學影片,幫我找它的 FR-047 spec 文件(在 compliance-manager-be/docs/specs/v1.8.0/ 底下)跟前端頁面路徑,找到後照起草 prompt 的格式帶入。」AI 會自己去翻。
AI 產完初稿後,你的工作是「讀 + 改」,不是「接受」:哪段講得太抽象、哪個步驟它猜錯、哪裡漏了你想強調的重點,直接在
01-draft.md改掉,或再跟 AI 說「第 3 段太技術了,用更白的話重寫」。
好 draft ↔ 壞 draft 對照
同樣要介紹「新增合規框架」,這兩種寫法交出去,AI 產出的品質天差地遠:
| ✓ 好 draft(AI 能照著做出好片) | ✗ 壞 draft(AI 只能亂猜) |
|---|---|
| 步驟用 1. 2. 3. 列清楚 | 「介紹一下框架管理」(太籠統) |
| 講明在哪一頁、點哪個按鈕 | 步驟跳著寫、順序不清 |
| 有「想強調 / 想避開」給旁白方向 | 沒講用誰的角色、在哪一頁 |
| 先講功能是什麼、為什麼要有它 | 全是技術詞、沒說給誰看 |
好 draft 實例就是上面範本填出來的樣子——你可以直接打開 training/chapters/01-pm/01-framework/01-draft.md 看一份真的(它把「合規框架是什麼 → 頁面導覽 → 新增框架 1.2.3. 步驟 → 匯入版本 1.2.3. 步驟」講得清清楚楚)。壞 draft 就是把上面那些濃縮成一句「幫我介紹合規框架管理功能」——AI 只能自己瞎猜要演什麼、演幾步、給誰看,八成不是你要的。
寫 draft 的訣竅
- 想像你在旁邊教一個新人操作,你會講什麼就寫什麼。
- 步驟用
1. 2. 3.列出來,AI 才知道順序。 - 「想強調」「想避開」很重要 → 直接影響 AI 怎麼寫旁白。
- 可以先抄舊章節的 draft 來改,比從零寫快很多(見最後的 Hello World)。
影片要演「上傳檔案」時,檔案放哪?
有些功能要演上傳(匯入 PDF、上傳證據、匯入 Excel…)。上傳用的檔案統一放 training/fixtures/,AI 寫錄影程式時會從這裡取檔。
- 先看
training/fixtures/裡有沒有現成的(已有 SSP docx、匯入用 xlsx、BPMN 等真實範例檔),有就直接在 draft 指名用哪個。 - 沒有就把檔案放進去,然後在 draft 講清楚:「上傳檔案用
training/fixtures/xxx.pdf」。 - 檔名與內容要像真的(用真實業務語境命名,例如官方標準 PDF 的原名),不要取「測試用.pdf」——影片會被觀眾看到檔名。
教學視覺:draft 裡就用白話點好(詳見獨立頁)
影片不是乾錄操作——過程中會疊上字幕、全螢幕投影片、說明卡、導覽高亮等六種教學視覺,觀眾才跟得上;有沒有配對視覺,是「教學影片」和「無聲錄屏」的差別。你不用寫任何標記語法,只要在 draft 或跟 AI 對話時用白話講,例如「開頭用全螢幕解釋什麼是 XX」「進頁面後幫我做頁面導覽」。
六種視覺長什麼樣、什麼時候用哪種、怎麼下 prompt 指揮(含真實影片截圖對照)→ 開「教學視覺指南」,寫 draft 和 review outline 時搭配著查。
2第二步:下指令讓 AI 跑(總覽表的 ③④)
draft 定稿後,接下來就是用白話跟 AI 說「做到哪一步」,AI 會照做:
「幫我把
training/chapters/01-pm/01-framework/01-draft.md轉成 outline,轉完告訴我要 review 哪幾段。」「outline 我改好了,接著寫 feature、驗證能跑、然後錄影。錄完把 mp4 位置給我。」
用 Claude Code 時的捷徑:/training-chapter
在 Claude Code 裡有一個專用指令,把上面那些話濃縮成一行。輸入:
/training-chapter all 01-pm/01-framework
all = 幫我把 draft 轉 outline + 寫 feature(不含錄影)。子指令對照:
| 你打的指令 | AI 會做什麼 |
|---|---|
/training-chapter outline 01-pm/01-framework |
只把 draft 轉成大綱 |
/training-chapter feature 01-pm/01-framework |
只把大綱轉成程式檔 |
/training-chapter record 01-pm/01-framework |
只錄影 + 更新紀錄 |
/training-chapter all 01-pm/01-framework |
outline + feature(不錄) |
/training-chapter status 01-pm/01-framework |
看這章目前進度到哪 |
01-pm/01-framework這串叫「章節路徑」={Act 資料夾}/{章節資料夾},照章節實際的資料夾名填。
下指令三要點: ① 一次一章 ② 明確講到哪一步停(「只轉 outline」/「一路錄到底」)③ 卡住時把畫面現象講給它聽(「影片第 40 秒卡在儲存按鈕」),它會自己去查程式修。
放心交給它:outline 該長什麼格式、視覺標記怎麼寫,AI 自己知道(規範在 training/sop/producer-guide.md,它會照做)——你不用學格式,只要 review 它產出的文字內容對不對就好。
3第三步:錄影分兩階段(總覽表的 ⑤,⑥⑦ AI 自動接續)
不要一上來就跑完整錄影。 完整錄影含字幕、說明卡片、慢動作,一支要 5-10 分鐘;萬一流程第 3 步就演錯,你等 10 分鐘才發現,白等。所以拆成兩階段,先便宜地確認流程,再花時間正式錄:
這步可以整個交給 AI——直接說「幫我先跑冒煙測試,綠燈了再正式錄,錄完把 mp4 位置給我」,AI 就會照兩階段執行、失敗會停下回報。下面的指令是給你想自己在終端機跑(或看懂 AI 在跑什麼)時用的。
正式錄影前,先自己開那個頁面看一眼:列表裡有沒有醜資料(之前測試留下的「123」「asdf」之類)?有就先刪掉或叫 AI 清——它們會被錄進影片,觀眾看得到。
# 階段一:冒煙測試 —— 只驗「瀏覽器點得動、流程跑得完」,跳過所有教學視覺(快)
npm run record:smoke -- "@chapter-pm-framework"
# 階段一綠燈了,才跑階段二:正式錄影 —— 加上字幕/說明卡/慢動作(慢)
npm run record:chapter -- "@chapter-pm-framework"
為什麼要先冒煙? 這是實際踩過的教訓——先跑冒煙測試(跳過字幕特效、只驗 UI 操作,約 1-2 分鐘),最快驗出「登入狀態還有沒有效、按鈕點不點得到」,省得等 3.5 分鐘完整錄影才發現問題。冒煙綠燈,才叫 AI 跑正式版。
冒煙測試的兩個陷阱:① 冒煙模式會跳過「頁面導覽」那類純講解步驟(因為那些是教學視覺),只跑真正的點擊/填寫動作。所以冒煙過了只代表「操作跑得動」,不代表導覽卡片的位置對——導覽視覺對不對,要到階段二正式錄完看 mp4 才準。② 冒煙只跳過視覺,操作是真的跑——影片如果演「新增一筆 XX」,冒煙一次+正式錄一次,系統裡就會多兩筆資料(可能同名)。這是正常現象,錄完叫 AI 清掉多的那筆即可。
其他你會用到的指令
# 快速預覽「教學視覺」的時序(不用真的跑系統;時長 ≈ 這章所有視覺的總秒數,例如 19 個視覺約 2 分鐘)
npm run preview:overlay -- features/showcase/training/01-pm-01-framework.feature
# 看哪些章節錄影失敗率高
npm run stats:training
@chapter-框架名這個 tag AI 會告訴你該用哪個。錄好的 mp4 在test-results/videos/training/passed/,成品會被 AI 搬到reports/training-videos/chapters/。
實況:AI 回報長怎樣
下面兩段節錄自一次真實的錄影 session(做「遠端儲存設備」章節時的原始對話,精簡改寫),讓你先看過「順利時 AI 說什麼、出事時 AI 說什麼」,真的遇到就不慌。
順利的一輪——你只說了一句話,AI 自己跑完兩階段:
你:直接開始吧
AI:開始。先跑冒煙測試(跳過字幕特效、只驗 UI 操作,約 1-2 分鐘)——這會最快驗出登入狀態是否還有效、按鈕找不找得到,省得等 3-4 分鐘完整錄影才發現問題。
AI:冒煙測試全綠(25 步全通過)。現在跑完整錄影(含字幕特效+慢動作,約 3-4 分鐘)。錄影中會跳出一個瀏覽器視窗自動操作,請不要動它。
AI:錄影成功:25 步全通過,片長 2 分 22 秒。已把 mp4 搬到
reports/training-videos/chapters/,並更新這章的 status。請播放確認。
你在這一輪要做的事:等,然後看片。(AI 說「請勿動瀏覽器」時真的別動——那個自己會點來點去的視窗就是在錄影。)
出事的一輪——同一個 session 稍早,冒煙測試就抓到問題:
AI:冒煙測試很有價值——頁面打得開,但「產生 Token」按鈕找不到。我去看實際頁面確認原因,不用猜的。
AI:找到根因了:登入狀態已過期(存了 24 天)——頁面其實被踢回登入頁,所以後面才找不到按鈕。修法是重存登入狀態,我現在跑
auth:save。AI:登入狀態重存成功。重跑冒煙測試確認……全綠。接著跑完整錄影。
注意這一輪你一句話都不用說——AI 自己發現、自己查原因、自己修好、自己重驗。你要做的判斷只有一個:
- AI 像上面這樣有找到原因、有修、有重驗 → 讓它繼續。
- AI 同一個地方修了 3 次還是紅的,或它說「這是產品本身的問題」(例如按鈕點了沒反應、頁面報錯)→ 停下來,把它的回報貼給 Raymond(見「疑難排解與速查」的規矩)。
綠燈的數字長怎樣——順利時,AI 回報裡的關鍵數字會像這樣一路演進(節錄自一次真實的練習章節,35 步、成品 2 分多):
下指令後先驗證 → 35 steps (35 skipped) ← 「skipped」在這步是好事:
只檢查每一步都有定義、不真的跑
冒煙測試(13 秒)→ 35 steps (35 passed)
正式錄影(2 分半)→ 35 steps (35 passed) ← 錄完 AI 會給你 mp4 位置
看懂一件事就夠:三行的步數一樣、最後兩行都是 passed = 這章健康。第一行的 skipped 別緊張——那是「先對答案卷、不動筆」的檢查,不是失敗。
4第四步:驗收——打開 mp4 逐項勾(總覽表的 ⑧)
AI 做完技術檢驗(跑得過、有產出)之後,換你做最終驗收——打開成品 mp4(在 reports/training-videos/chapters/),照下面的 checklist 從頭看一遍。每一項都是「看影片就能判斷」的,不用懂任何技術;看到不合格的就記下「第幾秒+哪一項」。
內容對不對:
| 勾 | 檢查項 | 不合格長怎樣 |
|---|---|---|
| ☐ | 演的步驟就是 draft 要的 | 跳過了 draft 裡寫的段落、或多演了沒要求的操作 |
| ☐ | 沒有點錯地方 | 游標點了 A 按鈕、字幕卻說在做 B;或畫面出現錯誤訊息 |
| ☐ | 開場有先講概念再操作 | 一開始就狂點畫面,觀眾還不知道這功能是幹嘛的 |
| ☐ | 新名詞第一次出現有解釋 | 旁白突然冒出「控制項」「現況說明」這種詞,沒停下來說明它是什麼 |
節奏會不會怪:
| 勾 | 檢查項 | 不合格長怎樣 |
|---|---|---|
| ☐ | 每段操作前有字幕預告 | 畫面默默動了好幾步,觀眾不知道「現在在做什麼」 |
| ☐ | 字幕停留夠久 | 一行字沒讀完就消失,要按暫停才看得完 |
| ☐ | 重要畫面有停留 | 填完表單按儲存,成功畫面一閃就跳走,看不到結果 |
| ☐ | 概念投影片不連發 | 連續三、四張全螢幕投影片,看到想快轉 |
文字有沒有問題:
| 勾 | 檢查項 | 不合格長怎樣 |
|---|---|---|
| ☐ | 字幕沒有錯字、語氣像講師 | 出現錯字;或出現「請點擊儲存按鈕」這種命令式/「E2E 測試填寫表單」這種機器話 |
| ☐ | 說明卡片沒擋到操作 | 卡片剛好蓋住正在填的欄位或正要點的按鈕 |
| ☐ | 全螢幕投影片一頁讀得完 | 一頁塞了七八行字,停留時間內讀不完 |
| ☐ | 畫面上的資料像真的 | 出現「測試用123」「asdf」這種假資料被觀眾看到 |
每一段都要看完——不合格常出現在影片後半(前半 AI 通常調過)。全部打勾就收工;有沒過的 → 把「第幾秒+哪一項」講給 AI(例:「影片 1:23 那段字幕太快、3:05 點錯按鈕」),叫它改完重錄,重錄後照這張表再驗一次。
5多個章節怎麼合併成一支影片
一個功能拆成多章時(例如「合規框架」拆成管理、版本匯入兩章),每章各是一支 mp4。要交出一支完整影片時有兩層合併,都直接叫 AI 執行:
| 層級 | 情境 | 對 AI 怎麼說 |
|---|---|---|
| 同章多段合併 | 一章因跨角色/太長拆成多段(phase)錄,要併回一支 | 「把 XX 章 的幾段 phase 影片合併成一支」(AI 會跑 training/scripts/merge-phase-videos.sh,無損串接) |
| 多章合成課程片 | 把好幾章(甚至整套課程)串成一支帶片頭、目錄、章節卡的完整教學片 | 「把 XX 功能的幾個章節合成一支完整教學影片,加片頭和章節卡」(AI 會跑 training/scripts/build-training-video.js) |
- 合併不會動到原本的單章 mp4——單章保留、合併版另存,所以可以放心試。
- 成品位置一樣在
reports/training-videos/(單章在chapters/子資料夾、合成的完整課程片直接放在這層)。 - 多章合併前先確認每一章都各自驗收過——合完才發現第 2 章有錯,還是得回去重錄那章再合一次。
- 深究合併的完整流程(含 TTS 旁白等進階選項)→
training/guides/training-video-production.md。
規劃階段就想好拆法:出需求時就可以跟 AI 說「這個功能拆成 2-3 章,之後要合成一支」,AI 會在章節命名、開頭結尾的銜接上先做對(例如中間各章結尾不放『全劇終』式總結),合併時才順。
6你的第一支練習(Hello World)
照這個做一遍,你就上手了:
- 看
training/sop/producer-guide.md的「結構」章節(建立全貌)。 - 挑一支已做好的章節,例如
01-pm/01-framework,打開它的三件套看真實長怎樣。 - 複製範本開一支練習章節(先建父資料夾再複製):
mkdir -p training/chapters/98-練習 cp -r training/chapters/_template/ training/chapters/98-練習/01-test/ - 產一份簡單的
01-draft.md(用起手式二叫 AI 擬,挑一個很短的功能,2-3 分鐘就好)。 - 下指令:
/training-chapter all 98-練習/01-test - 預覽:
npm run preview:overlay -- features/showcase/training/98-練習-01-test.feature - 看得順就錄:先跑冒煙(自己跑
npm run record:smoke -- "@章節tag",或直接叫 AI「先冒煙」)、綠燈了才下/training-chapter record 98-練習/01-test正式錄。