工作流教學

從腳本到 Remotion 動畫
全自動化生產線

透過 ChatGPT 與 Codex App,一鍵生成 30 天補習班招生短影音,並自動轉換為高品質的 Remotion 程式碼。

1

產生 30 天企劃腳本

首先,將下方的「主要提示詞」複製並貼上到 ChatGPT,它會為你量身打造 30 天的短影音腳本表格。

30day.md
你是一位台灣補習班招生短影音企劃,請幫我設計一套「30 天短影音招生內容腳本」。

情境設定:
- 產業:國中數學補習班
- 地區:新北市
- 目標客群:國一到國三學生家長
- 平台:YouTube Shorts、Instagram Reels、TikTok
- 每支影片長度:30 秒
- 影片形式:不露臉,可用動態字卡、螢幕畫面、簡單圖解、字幕完成
- 語氣:台灣家長聽得懂,不要浮誇,不要像硬廣告
- 目標:讓家長願意私訊詢問、預約程度診斷或試聽

請依照以下五種內容型態,規劃 30 天內容:
1. 痛點型(10 支):打中家長焦慮,讓家長停下來。
2. 教學型(7 支):用簡單觀念證明老師有料。
3. 迷思破解型(6 支):拆掉家長常見錯誤認知,建立專業判斷。
4. 案例型(4 支):用模擬案例建立信任,不要過度誇大成果。
5. 招生型(3 支):自然導向私訊、試聽或程度診斷。

請輸出 30 天表格,欄位包含:
1. 天數
2. 內容型態
3. 影片標題
4. 開場 Hook,3 秒內吸引家長
5. 30 秒旁白腳本,使用自然台灣口語
6. 畫面建議,適合不露臉短影音
7. 字幕重點,列出 3 到 5 個畫面大字
8. CTA,結尾要自然,不要硬銷
9. 適合平台,YouTube Shorts / Reels / TikTok

腳本要求:
- 每支影片約 30 秒,只講一個重點。
- 不要寫得像補習班招生文案,不要太多成績保證。
- 要讓家長覺得「這間補習班懂孩子問題」。
- 每支影片都要可以獨立拍成 9:16 短影音。
- 請使用繁體中文,台灣用語。
查看 ChatGPT 生成結果範例 (script.md)
天數 | 內容型態 | 影片標題 | 開場 Hook | 30 秒旁白腳本...
Day 1 | 痛點型 | 國一數學突然變差,不一定是不用功 | 「國一數學掉下來,先不要急著罵不用功。」 | 很多孩子國小數學還可以,升上國一突然開始退步。這不一定是不用功,而是國中數學開始要求「理解題意、列式、推理」...
...

你會得到一個包含 30 天完整內容的 Markdown 表格。

2

轉換為 Codex 提示詞

當 ChatGPT 產出 30 天腳本後,在同一個對話視窗中,告訴它你想製作哪一天的影片,它就會幫你填入 Remotion 的生成模板。

Day
轉換指令
請幫我將剛剛生成的 30 天腳本中,【Day 1】的內容,填入以下模板中,並產出完整的提示詞,讓我可以直接複製到 Codex App 中生成 Remotion 動畫。

模板:
我在一個 Remotion 專案中,請幫我根據以下素材自動生成一支 9:16 短影片。

素材:
- 音檔:./public/voice.mp3
- 字幕:./public/subtitles.srt

腳本內容:
標題:[請填入表格中的 影片標題]
Hook:[請填入表格中的 開場 Hook]
核心內容:[請填入表格中的 30 秒旁白腳本]

畫面需求:
- 9:16(1080x1920)
- 長度依照音檔自動調整
- 使用字幕檔自動對齊字幕
- 不露臉
- 深色科技感
- TikTok 字幕風格(底部大字)
- 關鍵字高亮([請根據旁白提取 5 個關鍵字])

請完成以下任務:
1. 建立 Remotion Composition:[請根據標題生成一個英文 Component 名稱,例如 MathPainPointShort]
2. 解析 SRT,將字幕切段顯示(每段 <= 16 字)
3. 根據腳本語意切分場景,大約 5–6 個 scenes:
   - Hook(開場大字)
   - [請根據腳本內容規劃 3-4 個場景]
   - 結論([請填入 CTA])

4. 每個 scene 使用不同元件:
   - TitleCard
   - [請根據場景規劃合適的卡片元件,例如 ComparisonCard / StepCard / WarningCard 等]
   - FinalCard

5. 動畫要求:
   - 每個 scene 使用淡入 + 位移(translateY + opacity)
   - 字幕逐字或逐段出現
   - 關鍵字用 accent color(藍色或黃色)
   - Hook 要有 scale 放大效果

6. 視覺風格:
   - 背景:深藍漸層 #0B1020 → #111827
   - 主色:#3B82F6
   - 警示色:#EF4444
   - 字體:粗體 sans-serif
   - 卡片:圓角 + 半透明 + 輕陰影

7. 請輸出:
   - 完整 React / Remotion component
   - scenes 分段邏輯
   - 字幕同步邏輯(使用 srt 時間)
   - 可直接 render 的 composition

請不要使用外部素材,全部用 CSS / SVG / React 畫面完成。
3

在 Codex App 中生成動畫

ChatGPT 會回覆給你一份針對 Codex 寫好的提示詞(out.md)。只要複製它,貼到 Codex App 中,Codex 就會直接幫你把 Remotion 程式碼寫好!

ChatGPT 最終產出的格式範例 (out.md)
我在一個 Remotion 專案中,請幫我根據以下素材自動生成一支 9:16 短影片。

素材:
- 音檔:./public/voice.mp3
- 字幕:./public/subtitles.srt

腳本內容:
標題:國一數學突然變差,不一定是不用功
Hook:「國一數學掉下來,先不要急著罵不用功。」
核心內容:很多孩子國小數學還可以,升上國一突然開始退步。這不一定是不用功,而是國中數學開始要求理解題意、列式、推理...
...
已複製到剪貼簿!