>
核心工具：HyperFrames 是什么？
HyperFrames 是 @HeyGen 开源的一个代码驱动的视频制作框架。有了它，你不用打开任何剪辑软件，直接写代码就能生成视频。
为什么配合 Codex 特别合适？两个原因：
2. HyperFrames 直接用 HTML 编写，天然为 Agent 设计。AI 写 HTML 比写任何其他格式都顺，出错少，迭代快。
因此这套组合搭配起来就是为视频创作而生。你描述清楚想要的画面，Codex 负责写代码，HyperFrames 渲染成片。
Step 1：在 Codex 里配置 HyperFrames
安装 Codex App
下载地址：https://chatgpt.com/codex/
安装 HyperFrames Plugin
进入 Codex App → 左侧栏点击 Plugins → 搜索 HyperFrames → 点击 「+」 添加即可。
配置完成，就可以开始视频创作了。
Step 2：写提示词——越具体越好
一份好的提示词，核心就是把你脑里的详细画面翻译成文字。写清楚以下内容：
| 要素 | 说明 |
|---|---|
| 动画类型/视频类型 | 功能演示、数据可视化、发布会预告、社媒短片等 |
| 时长和画幅 | 例如 10 秒、9:16 抖音画幅等 |
| 视频目标 | 一句话说明这个视频要讲什么、让观众理解什么 |
| 视觉风格 | 例如 Apple 风格、真实软件界面、极简科技感、电影感等 |
| 关键元素 | 必须出现的文字、图标、产品、数据、人物、素材路径等 |
| 动效要求 | 例如流式打字、淡入淡出、缩放转场、卡片展开、镜头推进等 |
| 声音要求 | 例如配乐、打字声、点击声、旁白、音效同步等 |
实战示例（苹果手机进化史开场动画）
用 [@HyperFrames] 做一个能说明 "Codex 调用 HyperFrames 生成视频" 的开场动画，默认画幅，时间不超过 10s。 目标是展示"我在 Codex 里用 HyperFrames 生成视频"的过程。 画面从真实感的 Codex 深色聊天首页开始，中央是 "What should we work on?"，下方是大号输入框。输入框里从第一个字开始像真人打字一样流式输入： "帮我用 HyperFrames by HeyGen 做一个 iPhone 历代机型的展示动画" 其中 "HyperFrames by HeyGen" 要像插件 mention/chip 一样显示，带小图标，并和普通输入文字有明显区分。 输入完成后点击发送，进入生成状态：画面中央出现 Codex 图标 × HyperFrames 图标，下方显示 "GENERATING ..."。这个阶段要有轻微的生成中动效，比如图标轻微呼吸、跳动或震动，点点闪烁，但整体要克制、有产品感。 生成完成后回到 Codex 聊天界面，出现一个视频预览卡片。卡片封面是 Apple 风格的深色产品预览，中央有 Apple 标志和播放按钮。鼠标点击播放按钮后，视频卡片丝滑放大到全屏，像正式视频被打开一样，作为进入后续视频的转场。 整体风格要拟真、克制、高级，接近真实 Codex 产品界面和 Apple 发布片里的软件操作镜头。界面切换用平滑的 fade in / fade out，所有动效都要清爽、利落、自然。 请使用 HyperFrames 实现，并确保可以稳定 render 成 MP4。打字、点击和 generating 的声音要作为真实音轨接入，不能只用浏览器实时音效。
Step 3：用 Image Gen 生成关键素材
做视频通常会花很多时间在准备视觉素材上——产品图、封面图、关键帧画面等。
Codex 内置了 GPT Image 2，可以直接在项目里生成你需要的素材，效果精美，风格可控。
触发方法： 输入 `$image-gen`
示例：
Step 4：用 AI 生成背景音乐
推荐 Suno 这个 AI 配乐生成网站，每天有免费额度，一次生成提供 2 个不同版本，质量不错。
提示词建议写清楚想要的风格和情绪，比如「有节奏感、史诗感、不要人声」。
示例：
这个工作流适合谁
核心心法： 用代码手搓视频真的很爽，视频创作的门槛已经被 AI 大幅拉低。
>
>
核心ツール：HyperFrames とは？
HyperFrames は @HeyGen がオープンソース化したコード駆動型動画制作フレームワークです。これを使えば、編集ソフトを開くことなく、コードを書くだけで動画を生成できます。
なぜ Codex との組み合わせが特別に適しているのか？2つの理由があります：
2. HyperFrames は HTML で直接記述され、本来 Agent 向けに設計されています。AI は HTML を他のどの形式よりもスムーズに書き、エラーも少なく、反復も高速です。
したがって、この組み合わせは動画制作のために生まれたと言えます。希望する画面を明確に説明すれば、Codex がコードを書き、HyperFrames が映像としてレンダリングします。
Step 1：Codex で HyperFrames を設定する
Codex App のインストール
ダウンロード先：https://chatgpt.com/codex/
HyperFrames Plugin のインストール
Codex App を開く → 左側のサイドバーで Plugins をクリック → HyperFrames を検索 → 「+」 をクリックして追加します。
設定が完了すれば、動画制作を開始できます。
Step 2：プロンプトを書く——具体的であればあるほど良い
良いプロンプトの核心は、頭の中にある詳細な画面を文字に翻訳することです。以下の内容を明確に書きましょう：
| 要素 | 説明 |
|---|---|
| アニメーションの種類／動画の種類 | 機能デモ、データ可視化、発表会予告、SNS ショート動画など |
| 長さと画面サイズ | 例：10秒、9:16 TikTok 形式など |
| 動画の目的 | この動画が何を伝え、視聴者に何を理解してもらうかを一文で説明 |
| ビジュアルスタイル | 例：Apple スタイル、実際のソフトウェアインターフェース、ミニマルなテクノロジー感、映画感など |
| キー要素 | 必ず表示するテキスト、アイコン、製品、データ、人物、素材パスなど |
| 動効果の要件 | 例：ストリーミングタイピング、フェードイン・フェードアウト、ズームトランジション、カード展開、カメラの押し出しなど |
| サウンドの要件 | 例：BGM、タイピング音、クリック音、ナレーション、効果音の同期など |
実戦例（iPhone 進化史オープニングアニメーション）
用 [@HyperFrames] 做一个能说明 "Codex 调用 HyperFrames 生成视频" 的开场动画，默认画幅，时间不超过 10s。 目标是展示"我在 Codex 里用 HyperFrames 生成视频"的过程。 画面从真实感的 Codex 深色聊天首页开始，中央是 "What should we work on?"，下方是大号输入框。输入框里从第一个字开始像真人打字一样流式输入： "帮我用 HyperFrames by HeyGen 做一个 iPhone 历代机型的展示动画" 其中 "HyperFrames by HeyGen" 要像插件 mention/chip 一样显示，带小图标，并和普通输入文字有明显区分。 输入完成后点击发送，进入生成状态：画面中央出现 Codex 图标 × HyperFrames 图标，下方显示 "GENERATING ..."。这个阶段要有轻微的生成中动效，比如图标轻微呼吸、跳动或震动，点点闪烁，但整体要克制、有产品感。 生成完成后回到 Codex 聊天界面，出现一个视频预览卡片。卡片封面是 Apple 风格的深色产品预览，中央有 Apple 标志和播放按钮。鼠标点击播放按钮后，视频卡片丝滑放大到全屏，像正式视频被打开一样，作为进入后续视频的转场。 整体风格要拟真、克制、高级，接近真实 Codex 产品界面和 Apple 发布片里的软件操作镜头。界面切换用平滑的 fade in / fade out，所有动效都要清爽、利落、自然。 请使用 HyperFrames 实现，并确保可以稳定 render 成 MP4。打字、点击和 generating 的声音要作为真实音轨接入，不能只用浏览器实时音效。
Step 3：Image Gen でキー素材を生成
動画制作では、ビジュアル素材（製品画像、カバー画像、キーフレーム画面など）の準備に多くの時間を費やすことがよくあります。
Codex には GPT Image 2 が内蔵されており、プロジェクト内で直接必要な素材を生成できます。品質は精美で、スタイルもコントロール可能です。
トリガー方法： `$image-gen` と入力
例：
Step 4：AI で BGM を生成
おすすめは Suno という AI 作曲サイトです。毎日無料枠があり、1回の生成で2つの異なるバージョンが提供され、品質も良好です。
プロンプトには希望するスタイルと感情を明確に書きましょう。例：「リズミカルで、壮大な感じ、ボーカルなし」。
例：
このワークフローに向いている人
核心の心得： コードで動画を手作りするのは本当に気持ちいい。動画制作のハードルは AI によって大幅に引き下げられました。
>