10 分鐘用 Codex + Hyperframe：把圖片、PDF、官網變成宣傳片

每次想把一份簡報或官網截圖變成一支短影片，我都會在轉場、對齊、時間軸上耗掉一整個下午。直到我把 Codex 搭 Hyperframe 跑過一輪——10 分鐘，一支 9:16 的宣傳片就出來了，而且我幾乎沒碰時間軸。

30 秒概覽：Hyperframe 的核心概念是「把影片軌道轉成網頁結構」——用你熟悉的 HTML/CSS 元件來生成動畫，省掉繁雜的轉場與對齊。流程是：在 Codex 專案裝上 Hyperframe 外掛 → 餵它圖片、PDF 或網址 → 用自然語言下指令 → Codex 自動排版動畫、還會自我檢查文字尺寸與對齊並修正 → 輸出 MP4。

為什麼是「網頁元件」做動畫

傳統影片軟體把畫面想成一條條軌道，你要手動排關鍵影格、對齊每個元素。Hyperframe 換了個思路：既然網頁本來就很會排版、很會做動態效果，那就讓影片的每一幕用 HTML/CSS 的方式描述。對寫過一點網頁、或習慣用 AI 寫程式的人來說，這個心智模型直覺太多了。

實際流程：四步出片

1. 裝外掛：在 Codex 專案裡安裝 Hyperframe 外掛，把生成動畫的能力接進來。
2. 餵素材：把要入鏡的圖片、PDF 簡報或一個網址丟進去。
3. 下一句指令：例如「做一支 7 秒、9:16 的影片」或「把這 5 篇部落格各轉成一支短影片」。
4. 自動產出：Codex 自己理解需求、排版動畫，並偵測文字尺寸與對齊有沒有跑掉、發現問題自己修，最後輸出 MP4。

三個能直接套的案例

• 官網截圖 → 動態宣傳片：把首頁截圖丟進去，幾秒鐘的產品快剪就成形。
• PDF 簡報 → 逐頁影片：每一頁自動變成一段動畫，適合把靜態簡報變成可在社群播放的版本。
• 部落格網址 → IG／TikTok 快讀動畫：把文章連結丟進去，自動生成適合短影音平台的快讀卡片。

進階：用一份提示詞指南把品質拉滿

AJ 把 Hyperframe 50 多種動畫類型整理成一份提示詞指南，餵給 Codex 當參考，產出品質會明顯往上跳——AI 不用自己猜該用哪種動態效果，直接照指南挑。另外實測下來，某些場景用 Claude 4.8 搭 Hyperframe，效果比 GPT 系列更好，值得交叉試試。

結語

把「做影片」這件事從拉時間軸變成「下一句話＋餵素材」，是這套工作流最大的價值。對需要大量產出社群短影音、又沒有專職剪輯的團隊來說，這條路省下的時間相當可觀。