---
title: "10 分鐘用 Codex + Hyperframe：把圖片、PDF、官網變成宣傳片"
seo_title: "Hyperframe 教學：用 Codex 把圖片、PDF 做成宣傳影片"
description: "Hyperframe 怎麼用？搭配 Codex，把圖片、PDF 或官網網址丟進去、下一句話，就能用 HTML/CSS 元件自動生成動畫、自我檢查並輸出 MP4。整理 10 分鐘做出宣傳片的流程與 3 個案例。"
author: "莊哲昀（AJ）"
tag: "AI 工具實戰"
date: 2026-06-20
canonical: https://www.ahadigit.work/blog/codex-hyperframe-image-pdf-to-video
source: "html"
---

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

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

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

[10 分鐘用 Codex + Hyperframe 把圖片 PDF 官網變宣傳片](https://www.youtube-nocookie.com/embed/qtedWLLmyU4)

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

傳統影片軟體把畫面想成一條條軌道，你要手動排關鍵影格、對齊每個元素。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 系列更好，值得交叉試試。

## 結語

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

> **想拿 Hyperframe 那份 50+ 動畫提示詞指南？**  
> 影片裡示範的提示詞，AJ 已整理成可直接套用的版本。[索取這份提示詞 →](https://www.ahadigit.work/prompts/request?slug=hyperframe)