Codex 做動態圖表和短影片：不用 AE 也能產出可用視覺內容

by Rain Chu | 7 月 11, 2026 | AI, codex, OpenAI

Codex 不只是拿來寫程式，也可以變成一個會做視覺內容的 AI 製作助理。只要把需求講清楚，它可以幫你產出動態圖表、短影片、科普動畫、產品宣傳片，甚至把 HTML、CSS、動畫邏輯和素材組裝流程一起處理掉。

這件事最有趣的地方是，起步不一定需要 AE、PR 或完整剪輯能力。真正的門檻反而變成另一件事：你能不能把「我要什麼樣的畫面」說清楚。AI 會寫程式，但審美、節奏、鏡頭語言、授權和成本，還是要由人來管。

Codex 適合做哪一類動態內容

最適合交給 Codex 的，不是需要大量真人素材或複雜運鏡的商業大片，而是可用程式描述的視覺內容。例如動態圖表、數據比較、產品功能展示、技術概念解釋、醫學或科研科普、社群短片開場、簡報轉短影片。

這類內容的共通點是結構明確。你可以指定尺寸、時長、分鏡、配色、字體、圖表資料、動效節奏，然後讓 Codex 產出可預覽的 HTML 或影片工程。若再接上 HyperFrames 這種用 HTML 寫影片的工作流，AI Agent 就能把網頁式畫面轉成可輸出的影片片段。

提示詞不要只寫「幫我做一支影片」

很多人第一次用 Codex 做影片，會直接丟一句「幫我做一支 20 秒產品宣傳片」。這樣確實有機會跑出東西，但結果通常很大眾化，容易變成常見科技風、藍紫漸層、過度抽象的圖卡。

比較好的 prompt 要包含幾個層次：

• 目的：這支內容要解釋、銷售、比較、教學，還是吸引點擊。
• 時長和比例：例如 15 秒、20 秒，橫版 16:9 或直式 9:16。
• 視覺風格：例如蘋果式極簡、醫學科普插畫、冷白石墨黑、微藍加暖金。
• 分鏡節奏：每一段畫面幾秒，文字怎麼進出，圖表何時放大。
• 素材限制：能不能用外部圖片、要不要用 AI 音樂、是否需要字幕。
• 驗收標準：不要跑版、文字不能重疊、手機和桌面尺寸都要可讀。

如果你平常已經在用 Codex 做開發任務，可以把它想成「把產品需求文件換成影片需求文件」。我之前整理過 Codex 與 GPT-5.6 結合成 AI 代理 的方向，這類影片工作流其實就是把代理能力往內容製作延伸。

一個可重複的 Codex 影片 prompt

可以先用這個框架當起點：

請做一支 20 秒的產品介紹短片，比例 16:9。
主題是：把 Codex 和 HyperFrames 用在動態圖表與 AI 影片製作。

請輸出可預覽的 HTML 動畫，畫面要能之後轉成影片。

視覺風格：
- 蘋果式簡約
- 冷白背景
- 石墨黑文字
- 微藍科技感
- 暖金作為重點提示

結構：
1. 0 到 4 秒：用一句話說明痛點
2. 4 到 10 秒：展示 Codex 生成圖表和畫面
3. 10 到 16 秒：展示 HyperFrames 轉成影片流程
4. 16 到 20 秒：收斂成一句行動建議

動效：
- 文字淡入
- 圖表數字遞增
- 卡片左右滑入
- 重點詞放大但不要擋到內容

限制：
- 不要使用外部圖片
- 不要讓文字重疊
- 每個畫面都要有清楚留白
- 最後提供可修改的檔案結構

這種 prompt 的重點不是字多，而是把 AI 容易亂猜的地方先固定。尺寸、時長、配色、動效、節奏、素材權限都講清楚，Codex 才比較像製作助理，而不是自由發揮的設計師。

導演風格提示詞可以這樣用

做動態圖表或 AI 短片時，最容易失控的是視覺風格。只寫「要有電影感」太抽象，只寫「科技風」又很容易跑成藍紫色模板。比較穩的方法，是把風格拆成色彩、光線、鏡頭、構圖、材質和避免事項，讓 Codex 可以直接轉成畫面規則。

使用方式很簡單：先用前面的基礎 prompt 定義主題、時長、比例和分鏡，再從下面挑一組風格包貼到「視覺風格」段落。如果是商業簡報或產品介紹，建議先用 Apple Event Opening Film 式、Muji 式或 Aesop 式。如果是科幻感、城市情緒或詩性科普，再選 Denis Villeneuve 式、Wong Kar-wai 式、Tarkovsky 式或 Terrence Malick 式。

可直接貼給 Codex 的風格控制模板

請依照以下格式套用視覺風格，不要只模仿表面元素。

風格名稱：
用途：
色彩：
光線：
鏡頭：
構圖：
材質：
避免：

請把這些規則套用到每一個場景，並在輸出前檢查文字可讀性、畫面留白、動效節奏和手機尺寸。

Denis Villeneuve 式

適合做大型系統、AI 架構、資料中心、未來城市、算力平台這類有重量感的主題。

風格名稱：Denis Villeneuve 式
用途：冷峻史詩感，適合科幻、巨型建築、AI 基礎設施、算力平台
色彩：低飽和沙色、混凝土灰、灰青色、深黑，禁止霓虹藍紫
光線：柔和定向光、體積霧、大面積陰影、低對比但黑位深
鏡頭：慢速推軌、廣角大全景、少手持、24fps 電影感
構圖：近對稱、巨量留白、小人物對比巨大空間
材質：混凝土、塵土、啞光金屬、煙霧、舊織物
避免：不要藍紫科技感，不要 HUD，不要快節奏剪輯，不要廉價未來感

Wong Kar-wai 式

適合做都市情緒、社群故事、創作者工具、夜間產品展示、情感型品牌短片。

風格名稱：Wong Kar-wai 式
用途：都市暖味情緒，適合夜景、人物孤獨感、創作者故事
色彩：深紅、琥珀暖光、綠色陰影，控制飽和度，避免企業藍紫
光線：實景燈光、霓虹反射、鎢絲燈、潮濕街道高光
鏡頭：長焦特寫、淺景深、輕微手持、慢動作碎片感
構圖：前景遮擋、玻璃反射、親密近景、不完美構圖
材質：雨水、玻璃、煙霧、舊牆面、織物、膠片顆粒
避免：不要賽博龐克，不要廉價霓虹，不要過度銳利，不要乾淨企業感

Tarkovsky 式

適合做哲學型科技反思、長篇研究、知識工作流、慢節奏概念片。

風格名稱：Tarkovsky 式
用途：詩性冥想感，適合哲學科技、研究筆記、長時間思考
色彩：灰綠、濕土棕、灰白天空、低飽和自然色
光線：自然陰天光、柔和漫射、弱對比、無人工炫光
鏡頭：長鏡頭、極慢推軌、靜止觀察式鏡頭、少剪輯
構圖：深空間、前後景層次、人物隱於自然或建築中
材質：水面、霧、灰塵、苔蘚、舊木、石牆、舊布料
避免：不要快剪，不要炫技轉場，不要賽博視覺，不要藍紫科技感

Terrence Malick 式

適合做自然、生活、醫學科普、教育、親和型產品介紹，畫面會比較有呼吸感。

風格名稱：Terrence Malick 式
用途：自然抒情感，適合生活科技、教育、醫學科普、溫柔品牌敘事
色彩：暖高光、柔和綠色、自然膚色、淡天空色、中低飽和
光線：日落逆光、自然陽光、柔和鏡頭炫光、空氣感
鏡頭：漂浮手持、輕微廣角、低機位觀察、慢節奏
構圖：非對稱自然構圖、人體置於風景中、前景層次豐富
材質：草地、亞麻、皮膚、塵土、水面、風吹布料
避免：不要商業廣告過度修飾，不要藍紫科技感，不要硬質 UI，不要炫技轉場

Apple Event Opening Film 式

適合做產品發布、SaaS 功能展示、硬體展示、正式感很強的開場短片。

風格名稱：Apple Event Opening Film 式
用途：精密發布會開場感，適合產品發布、功能亮相、硬體和 SaaS 展示
色彩：單色基底加一個克制點綴色，暖白、石墨黑、香檳金、暖灰
光線：工作室級受控照明、柔和鏡面高光、非數字炫光
鏡頭：微距到廣景的平滑過渡、慢推、精確環繞、視差控制
構圖：幾何抽象、層級清晰、留白充分、視覺秩序嚴謹
材質：啞光金屬、磨砂玻璃、液體表面、織物、微細紋理
避免：不要粒子特效，不要 glitch，不要彈性動畫，不要藍紫科技感

Muji 式

適合做安靜日常、效率工具、筆記 App、知識管理、個人工作流介紹。

風格名稱：Muji 式
用途：安靜日常極簡，適合效率工具、筆記 App、生活型產品、個人工作流
色彩：象牙白、米色、淺木色、柔灰、自然棕
光線：自然窗光、柔和陰影、溫暖環境光、無戲劇化光效
鏡頭：眼平視角、靜態鏡頭、緩慢推近、輕觀察感
構圖：功能性擺放、留白、非對稱、日常尺度
材質：紙張、木材、棉麻、陶瓷、磨砂塑料、亞麻布
避免：不要未來科技感，不要發光 UI，不要高飽和配色，不要商業炫技

Aesop 式

適合做高質感知識品牌、研究型產品、顧問服務、空間感強的品牌短片。

風格名稱：Aesop 式
用途：文學建築感，適合高質感品牌、知識服務、研究型產品、顧問簡報
色彩：炭黑、暖棕、琥珀、石灰灰、深綠、奶油白
光線：低調暖光、定向高光、柔和陰影漸變、室內氛圍光
鏡頭：緩慢建築式平移、靜物特寫、穩定觀察鏡頭
構圖：博物館式留白、層架陳列、低調奢華、秩序克制
材質：石材、深木、琥珀玻璃、紙張、陶瓷、皮革
避免：不要 flashy luxury，不要臨場式金色，不要藍紫科技感，不要誇張動效

這些風格包最好不要一次全部貼進同一個任務。每次只選一種主風格，再補一句「如果有 UI 或圖表，要保持文字清楚、留白足夠、不要遮住數據」。

Codex 生成第一版後，再要求它檢查三件事：文字是否重疊、動效是否太花、手機尺寸是否仍然可讀。

HyperFrames 和 Remotion 各有位置

Remotion 更像 React 影片工程，適合已經熟悉 React 的開發者。HyperFrames 則偏向讓 AI Agent 以 HTML 結構描述畫面，再輸出影片，對 Codex 這種代理工作流很自然。

也有人會用 Remotion 讓 Codex 生成動畫，這條路完全可行，只是如果你的目的不是長期維護一個 React 影片專案，而是快速把概念做成短片，HyperFrames 的心智負擔會更低。若你要跑本地或半自動化的 AI 影片管線，也可以對照 OpenMontage 本地部署實測 的做法。

真正要小心的是成本、品質和崩潰

AI 做動態內容很容易讓人興奮，但不要忽略三個現實問題。

第一是時間成本：幾秒鐘的視覺效果，有時可能跑十幾分鐘。若 prompt 太模糊，AI 反覆嘗試、安裝套件、重建專案、預覽失敗，時間就會被吃掉。

第二是穩定性：像「Turn this website into a 20-second product promo」這種看似方便的提示詞，遇到複雜網站或工具限制時，可能長時間執行後才報錯。比較穩的做法是先要求 Codex 做 5 秒原型，確認視覺方向和技術路線，再擴到 20 秒完整版本。

第三是美感：AI 會做出能動的畫面，但「能動」不等於「好看」。如果你沒有指定風格，它很容易產生通用科技模板。要改善這件事，prompt 裡要明確寫出參考方向、色彩限制、節奏限制、不要使用的元素，甚至要求它先給三套視覺方案再開始實作。

音樂和素材授權也要先想清楚

短影片通常會想加背景音樂，但 AI 音樂不是生成了就一定能商用，像 Suno 這類工具，不同訂閱方案會影響音樂權利歸屬，免費版本版權不是屬於製作人的，若內容是公司、商品、廣告或公開營利用途，音樂授權一定要先確認，之前整理 Tunee AI 和 Suno 對比 時，也能看出 AI 音樂生成越方便，授權問題越不能放到最後才處理。

我的建議流程

1. 先用一句話定義影片目的。
2. 寫出 4 到 6 個分鏡，不要一開始就要求完整大片。
3. 指定尺寸、時長、配色、字體和動效。
4. 先做 5 秒原型，確認風格後再擴展。
5. 要求 Codex 檢查文字重疊、版面跑位和預覽錯誤。
6. 最後才加入音樂、配音、字幕與輸出格式。

用 Codex 做動態圖表和短影片，現在已經不是玩具級別。它可以讓不會 AE 和 PR 的人快速做出第一版，也能讓工程師把資料視覺化變成可分享的內容。但越是自動化，越需要人把需求寫得精準。AI 負責執行，你負責判斷什麼才是好看的、能用的、可以公開的。

FAQ

Codex 可以直接做影片嗎？

可以協助做影片工程、HTML 動畫、動態圖表和可轉成影片的畫面，但通常還是需要搭配 HyperFrames、Remotion 或其他渲染工具完成輸出。

為什麼 AI 生成的動畫看起來很呆？

通常是 prompt 沒有指定視覺風格、節奏、動效細節和禁用元素。先要求三套風格方案，再選一套做原型，品質會穩很多。

HyperFrames 和 Remotion 要選哪一個？

熟 React 且要長期維護影片工程，可以選 Remotion。想讓 AI Agent 快速用 HTML 描述和渲染短片，HyperFrames 會更直覺。

AI 影片生成會很花 token 嗎？

會，尤其是長時間反覆生成、安裝套件、修錯和預覽。建議先做短原型，確認方向後再擴成完整版本。