最近这段时间，看到很多朋友用Codex+HyperFrames做AI视频，效果非常棒。我自己也试着做了一下，发现确实不错，虽然比别人专业玩视频的还有差距，但对我这种刚接触AI视频的新手来说已经是合格的产品了。所以今天写一篇新手入门向的教程，即使是没玩过AI视频的朋友，照着做也可以做到同样的效果。先放一下成品。废话不多说，下面进入正式教程。我用AI把一篇图文教程做成视频的完整过程，包括踩的坑和最终跑通的方案。最终效果：输入一篇图文或者文章，输出一个带配音、字幕、转场、特效的1080p视频，配音用的是我自己的声音。尹睦敦敦 1

用到的工具： Codex App（OpenAI的AI编程Agent） HyperFrames（AI视频合成框架） CosyVoice（阿里云百炼的语音合成+声音复刻）整体流程拆开就是6步：

1. 让Codex读取要做成视频的内容
2. 让Codex把教程提炼成配音脚本和分镜表
3. 用HyperFrames搭建视频项目（镜头、转场、字幕、特效）
4. 用CosyVoice克隆你的声音，生成配音
5. 按配音时长反推分镜节奏（解决音画同步）
6. 渲染输出MP4 0.基础建设——Codex和Hyperframes Codex 是 OpenAI 推出的 AI 编程助手。它可以理解成一个会写代码、会改项目、会修 bug 的 AI 程序员。普通 AI 只能告诉你代码怎么写，Codex 可以直接进入项目，帮你阅读代码、修改文件、运行测试、排查错误，甚至完成一个完整的小功能。当然，随着大家的开发和GPT模型的进化，Codex现在已经不只是用来编程，还可以用来做知识库搭建、生图等工作。为什么选择Codex？几方面的原因。 1）Codex可以直接用gpt账号登录和 Claude 相比， GPT对中国用户相对友好（至少目前是这样），我们的GPT账号可以直接登录Codex，并且plus和pro账号都自带额度，我只开了20刀的plus，每周的额度对我来说基本是够用的。如果一个plus不够，可以选择升级pro，或者多开几个plus。根据使用量选择

2）GPT的image2模型生图无敌这点很多朋友应该也深有体会，自从有了image2，以前万众宠爱的Gemini Nano Banana都不香了。用codex做视频，可以用image2完成生图，这也是一个巨大的优势。 Codex有App（图形客户端）和cli版本（命令行），目前我两个都在用，建议新手朋友用 App，有图形界面，对新手更友好。安装好Codex并完成登录以后，就可以新建一个项目，专门用来做视频了。

3）Codex+HyperFrames生成视频的成本很低。这也是非常重要的一点，我实测下来，我把文章生成视频，中间加上踩坑重复了大概5 次，只消耗了我GPT Plus 的5小时额度，周额度的15%。这比快乐马和seedance的成本低很多的，当然，HyperFrames生成的视频没有视频模型那么灵活。所以不同的方式适合不同的场景，但是对我来说，HyperFrames是性价比最高的选择。然后就到了基础建设第二步，Hyperframes。 HyperFrames 是一个 AI 原生的视频生成/渲染框架。简单说，它可以把 HTML、CSS、JavaScript 写出来的页面或动画，渲染成 MP4 视频。你可以把它理解成：让 Codex、Claude Code、Cursor 这类 AI 编程工具，用写网页的方式帮你做视频。比如你想做一个： “10 秒产品介绍视频，有标题淡入、数据图表动画、背景音乐，最后出现二维码。” AI 可以先写一份 HTML 动画页面，HyperFrames 再把这个页面逐帧渲染成视频文件。

配置HyperFrames 非常简单，完全不需要手动完成，只需要在我们Codex项目的对话框里告诉AI： AI就会自动帮我们配置好。完成了基础建设，下面就可以直接做视频了 1.读取图文或文章内容 Hyperframes之所以这段时间非常火，最大的原因是它做视频实在太简单了，我看很多朋友只需要对AI说一句话，比如「给我做一个编程技术的发展史」，它就会自动工作，并且可以带转场、字幕、特效等视频元素，做出来的视频质量很高。但我不是做这种玩票性质的视频，而是希望能把我平时写的公众号文章转化成视频，所以会比一句话生成视频复杂一些。比如我这次做的测试视频，就是把我上次做视频采集器的图文教程直接转成的，所以第一步是导入我的图文教程。我的教程原文在飞书云文档里。所以我安装了一个飞书cli的工具，直接在codex里调用。这时候它就会直接读取我的飞书文档，然后做视频。 1 这是一个专门用来研究AI剪视频的项目，主要依靠codex+hyperframes来进行工作

这里额外说一下，让它读取飞书文档的时候，要告诉它优先用飞书cli，否则它用默认的 web读取方式可能会读不到内容。这条命令会把文档正文、标题、图片token全部拉下来。图片需要单独下载，但这个过程它会自动完成，所以我们不需要额外操作，只要等待就好 每张图片都有一个token，逐个下载到本地的assets文件夹里。这些截图后面会作为视频里的画面素材。如果你的教程不在飞书，直接把Markdown文件和截图放到项目目录里就行，跳过这步。 2.提炼配音脚本和分镜拿到教程内容后，Codex会帮我们做两件事： 1）写配音脚本（narration.txt）不是把教程逐字念一遍，而是提炼成适合听的版本。教程可能3000字，配音脚本压到 300-500字，控制在1-2分钟以内。核心原则：抓主线，砍细节。保留"为什么做、怎么装、怎么配、怎么用、效果是什么"，去掉代码细节和重复说明。 2）设计分镜表（STORYBOARD.md）把配音脚本拆成若干个镜头，每个镜头对应一段话和一个画面。比如：

镜头时长画面配音 1 12s 标题卡+痛点文字 "你有没有这种感觉？刷到好视频想存文案，但流程很麻烦" 2 12s 插件界面截图飞入 "所以我做了一个免费的浏览器插件" 3 20s 设置页面截图+标注 "安装很简单，打开扩展管理页..." ... ... ... ... Codex会根据教程内容自动生成这些，你只需要审核和调整。这一步也是AI自动完成，但是这里有个坑，前面浪费了我很多时间。 Hyperframes默认是不会加配音的，但我明确要求它给我加配音，所以它第一次配音的时候没有明确的方向，又来问了我一遍。这里我一开始让它用edge-tts做了配音，但是这样配出来的效果实在太差劲，纯纯的机器味道。于是我就让它把配音稿发给我，我用「配音神器Pro」手动配了一遍，发给它合成。然后又进入了一个新的坑：音色好了很多，但是音画不同步很严重。虽然我是用它提供的配音稿，但是用别的工具完成的配音，和它本身生成的视频节奏不能完全契合，所以配音和视频里的配音字幕卡不上点，看起来很难受。经过一番考虑，我认为音视频分开工作自动化程度低，而且效果还不好，并且我更希望配音能用我的音色来增加一点活人感，而不是用预制人物的声音。然后方向就很明确了：用第三方工具，复刻我的音色，以后每次需要配音，让AI直接把配音任务发给第三方，再把返回的音频跟视频合成到一起。这里我问gpt有什么推荐，它说首选是Minimax，我之前也听说过，Minimax的配音模型很强，但我实际测试以后发现这个平台的界面全英语，对我这种语音水平低的孩子不

友好，而且没有试用token，所以用的不顺手。所以我就把配音模型换成了阿里百炼，主要是因为百炼给新用户送很多试用额度，我们测试阶段完全够用，另外百炼的声音复刻流程更加简单。只需要在这里上传一段录音，就可以完成声音的复刻。接下来，我们再复制刚刚复刻的音色的ID。

把复制的声音复刻的id发给ai，告诉它这是我们在阿里百炼平台复刻的音色ID，它就会记住。到这里还没完，我们还需要获取百炼平台的API key。这里我们就在API Key这里创建一个，然后复制。复制完成后，我们需要在终端里把API Key配置为环境变量这里没玩过命令行的朋友可能会有点挠头，其实没有这么复杂，如果实在不知道怎么操作，可以把上面这段内容复制或者截图发给AI，让它指导我们就行了。 1 export DASHSCOPE_API_KEY="你的百炼API Key"

其实我们也可以直接把API Key发给AI，让它帮我们配置，但这样会带来一些安全风险，所以不推荐这样用。以上步骤完成以后，就再去合成视频就比较顺畅了。另外要说明一下，这里之前的内容是给人看的。从第三步到第六步，是AI调用HyperFrames结合百炼API生成配音视频的工作过程，更适合AI阅读。所以把这个教程的链接复制发给AI去学习就可以了，看到这里的朋友们可以直接翻到文章末尾的总结部分。 3.用HyperFrames搭建视频项目 HyperFrames是一个用HTML+CSS+JS做视频的框架。你不需要会剪辑软件，只需要描述你想要什么效果，Codex会帮你写代码。初始化项目：项目结构：核心文件是index.html，里面用HTML定义每个镜头的画面，用GSAP（动画库）定义转场和特效。比如一个镜头可能长这样： 1 npx hyperframes init 项目名 --non-interactive 1 2 3 4 5 6 7 项目名/ ├── index.html        ← 视频主文件（镜头、动画、字幕全在这里） ├── hyperframes.json  ← 项目配置（分辨率、帧率、时长） ├── narration.wav     ← 配音音频 ├── music-bed.wav     ← 背景音乐 ├── capture/assets/   ← 截图素材 └── renders/          ← 渲染输出 1 2 3 4 <div class="scene clip" data-start="0" data-duration="12.3">   <h1 class="title">视频文案采集器</h1>   <p class="subtitle">一键提取，直接存进Obsidian</p>

data-start是这个镜头的开始时间，data-duration是持续时长。 Codex会根据分镜表自动生成完整的index.html，包括：截图以3D卡片形式飞入扫描线、脉冲环等科技感特效镜头之间的淡入淡出转场底部字幕逐段显示进度条检查项目：三个命令都通过了才能渲染。 4.用CosyVoice克隆你的声音这是整个流程里最关键的一步。用AI生成的配音如果是机器人声音，视频质量会大打折扣。CosyVoice可以克隆你的真实音色。准备工作：

1. 注册阿里云百炼平台
2. 录一段你的声音样本（10-20秒，干净无背景音，正常说话）
3. 在百炼控制台上传声音样本，创建音色
4. 拿到你的voice_id（格式类似：cosyvoice-v3.5-plus-bailian-xxxxx）
5. 获取百炼API Key 生成配音的脚本：

配置

1 2 3 npx hyperframes lint      # 检查语法错误 npx hyperframes validate  # 验证结构 npx hyperframes inspect   # 检查布局是否溢出 1 2 3 import dashscope from dashscope.audio.tts_v2 import SpeechSynthesizer, AudioFormat import o 1 2 dashscope.api_key = os.environ['DASHSCOPE_API_KEY'] voice_id = '你的voice_id'

按分镜拆分的配音文本注意：配音要按分镜分段生成，不要一整条生成。 这是解决音画同步的关键。

5.按配音时长反推分镜节奏这一步是我踩坑最多的地方。问题： 如果先做好视频（比如65秒），再贴配音（比如72秒），音画一定不同步。解决方案： 先生成配音，再按配音的真实时长调整每个镜头的data-start和data- duration。具体做法：

1. 用ffmpeg读取每段配音的时长
2. 按顺序累加，算出每个镜头的开始时间
3. 更新index.html里的时间参数
4. 背景音乐也要延长到匹配总时长 3 model = 'cosyvoice-v3.5-plus' 1 2 3 4 5 6 7 8 9 10 11 12 13 14 segments = [     {"id": "seg1", "text": "你有没有这种感觉？..."},     {"id": "seg2", "text": "所以我做了一个免费的浏览器插件..."},     # ... ] for seg in segments:     synth = SpeechSynthesizer(         model=model,         voice=voice_id,         format=AudioFormat.MP3_24000HZ_MONO_256KBPS     )     audio = synth.call(seg['text'])     with open(f"generated-voice/{seg['id']}.mp3", 'wb') as f:         f.write(audio) 1 2 3 4 5 6 import subprocess, re

读取每段音频时长

for seg_file in sorted(glob('generated-voice/*.mp3')):     result = subprocess.run(         ['ffmpeg', '-i', seg_file, '-hide_banner'],         capture_output=True, text=True

这样每个镜头的时长就是对应那段配音的真实时长，不会出现"画面已经切走了但配音还在说"的问题。 6.渲染输出一切就绪后，渲染MP4：渲染需要FFmpeg。如果系统没装，可以用Python包imageio-ffmpeg自动下载一个：然后把它的路径加到PATH里：渲染完成后，输出文件在renders/目录下，1920x1080，30fps，带音频轨。然后总结一下这个过程里我踩过的坑 1. 飞书文档需要权限飞书CLI需要先配置好认证。具体的认证过程在这里就不讲了，可以和AI切磋来完成。如果文档是私有的，确保CLI已经登录。直接用curl或浏览器抓取飞书文档基本不可能，因为有鉴权。 7 8 9     )     match = re.search(r'Duration: (\d+):(\d+):(\d+.\d+)', result.stderr     # 提取时长，累加计算每个镜头的start时间 1 2 3 4 5 npx hyperframes render --output renders/最终视频.mp4 --quality draft --quality draft 是草稿质量，速度快，用来预览。确认没问题后可以用 --quality high 出正式版。 1 pip install imageio-ffmpeg 1 2 import imageio_ffmpeg ffmpeg_path = imageio_ffmpeg.get_ffmpeg_exe()

重点说一下，如果在我们工作的过程中如果要读取或者修改飞书文档，需要明确告诉AI 「使用飞书cli/feishu cli/lark cli」，避免浪费时间。 2. 本地配音模型基本上都不行试过Kokoro（本地TTS模型），中文支持不好，phonemizer报错。试过macOS自带的 Tingting语音，能用但像机器人。最终选了百炼CosyVoice声音复刻，效果不算很好但勉强够用。有条件的话，可以试试MiniMax。 3. 音画不同步是最大的坑第一版做法：先做好65秒视频，再贴上我用第三方做的72秒配音。结果完全对不上。第二版做法：先用第三方生成配音，按配音时长反推视频节奏。问题解决。教训：永远是配音先行，视频跟着配音走。 不要反过来。 4. FFmpeg不是默认安装的 HyperFrames里面需要用到（处理音视频的开源工具，很多剪辑软件、转码工具、AI 视频工具，背后其实都在调用它）但是macOS 不自带FFmpeg ，所以初次使用 HyperFrames的时候需要先安装。可以用imageio-ffmpeg这个Python包可以自动下载一个可用的FFmpeg二进制，不需要系统级安装。最终工作流总结以后我做新视频，固定流程就是： 1 2 3 4 5 6 7 8 9 1. 准备图文教程（飞书/Markdown + 截图）    ↓ 2. Codex提炼配音脚本 + 分镜表    ↓ 3. CosyVoice用你的音色分段生成配音    ↓ 4. 按配音时长计算每个镜头的时间参数    ↓ 5. Codex用HyperFrames搭建视频（镜头+转场+字幕+特效）

整个过程我不需要打开任何剪辑软件。从图文到视频，全程在终端里完成。非常方便和丝滑。最后放一下我的项目文件架构，仅供参考。感谢大家阅读，如果对本文内容有什么疑惑或者对其他AI使用方式想要交流，欢迎留言我是敦敦，多年获客操盘手，如果你对流量获客有任何想法或者困惑，欢迎和我聊聊。 10 11    ↓ 6. 渲染输出MP4 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 项目文件结构参考 video-project/ ├── DESIGN.md                 ← 视觉风格说明 ├── SCRIPT.md                 ← 配音脚本 ├── STORYBOARD.md             ← 分镜表 ├── VOICE_PROFILE.md          ← 音色配置（voice_id、模型、不含API Key） ├── narration.txt             ← 配音原文 ├── narration.wav             ← 最终配音音频 ├── music-bed.wav             ← 背景音乐 ├── index.html                ← HyperFrames视频主文件 ├── hyperframes.json          ← 项目配置 ├── package.json              ← 依赖配置 ├── capture/ │   └── assets/               ← 截图素材 ├── generated-voice/          ← 分段配音文件 │   ├── seg1.mp3 │   ├── seg2.mp3 │   └── manifest.json ├── scripts/ │   └── generate_bailian_voice.py  ← 配音生成脚本 └── renders/   └── 最终视频.mp4