我现在做这种视频，主要是在和 Codex 对话：先找选题，确认口播和分镜，开始制作，看预览提修改，最后导出和定时投稿。
代码和镜头编排也由 AI 完成。我把磨好的配色、字幕、镜头习惯整理进 Skill，把界面做成可复用组件，下一期就可以接着用。
这期从一段完整流程演示开始，拆开讲 Codex、Skills、HTML/CSS/SVG、React/TypeScript、GSAP、HyperFrames，以及配音、字幕和 FFmpeg 怎样配合；中间演示组件复刻、鼠标操作和“菜单多停两秒”的自然语言修改。
本片为原创制作流程讲解，使用 AI 合成旁白；对话为过程重演，界面为代码复刻与概念图，非实机录屏。开场压缩制作等待；简单视频在组件素材齐全时可以较快出一版，实际时间取决于片长、修改量和平台审核。
配乐：Wallpaper — Kevin MacLeod（incompetech.com），CC BY 4.0。许可：https://creativecommons.org/licenses/by/4.0/ 。音乐经剪辑、循环衔接、淡入淡出及旁白混音。
NoteGen：https://notegen.top
源码：https://github.com/codexu/note-gen
HyperFrames：https://github.com/heygen-com/hyperframes
章节
00:00 先看效果：从一句需求到成片与定时投稿
01:18 先讲清楚：代码生成视频是什么
02:28 Codex 负责把要求变成工程
03:23 把自己的风格整理成 Skill
05:03 HTML、CSS、JavaScript 怎样组成画面
06:05 React、TypeScript 和复刻组件
07:36 GSAP：让鼠标、界面和镜头按时间行动
08:44 HyperFrames：把网页画面渲染成视频
10:07 配音、字幕，以及 Python、FFmpeg
11:26 完整做一期：自然语言修改视频
12:38 把经验留给下一期
13:09 品牌片尾
