算法基础知识
2026/7/13 10:00:20
如果只看最终成片，很容易产生一种错觉：把参考图丢给 GPT-5.6 Sol，Codex 就能一次生成一个电影感网站。
但 Viktor Oddy 在 2026 年 7 月 10 日发布的这段 21 分钟视频，真正有价值的地方并不是“模型一键建站”，而是他把设计参考、图片生成、视频动效、前端实现和移动端检查串成了一条完整流水线。模型能力决定上限，输入材料是否清晰、约束是否具体、验证是否及时，才决定成品会不会落入常见的“AI 模板感”。
说明：本文所说的“技能”，是视频中出现的设计与开发实操技巧，并不是可以安装到 Codex 中的 Skill 扩展包。文中的提示词均根据视频内容重新整理，便于中文读者复用，不是逐字字幕。
先看结论：这不是一次生成，而是七段式工作流
| 阶段 | 要解决的问题 | 视频中使用或提到的工具 |
|---|---|---|
| 寻找参考 | 确定版式、视觉元素和配色方向 | Pinterest、SeeSaw、Land-book |
| 拆分参考 | 避免照搬，把不同参考分别用于布局、装饰和颜色 | Pinterest、Figma |
| 生成视觉 | 得到适合网页首屏的定制背景 | ChatGPT Images、Higgsfield |
| 生成动效 | 把静态视觉变成可循环的视频背景 | Seedance 2.0；Kling AI 作为备选 |
| 实现页面 | 先完成 Hero，再逐步扩展整页 | ChatGPT Codex、GPT-5.6 Sol |
| 视觉融合 | 处理视频尺寸、背景冲突和混合效果 | CSS、Figma 视觉试验 |
| 工程优化 | 解决视频倒放卡顿、响应式和移动端问题 | Canvas、requestVideoFrameCallback、Codex |
这条链路的核心不是堆工具，而是让每个工具只处理自己最擅长的一类问题：图片模型负责画面，视频模型负责运动，Codex 负责页面结构和工程实现，人负责拆解目标、给出约束并验收结果。
视频里讲到的 12 项关键技能
1. 先找参考，再让 AI 动手
视频开头首先强调：AI 仍然需要参考和指导。作者会从 Pinterest、SeeSaw 和 Land-book 等网站寻找视觉方向，其中 Pinterest 更适合发现概念化、实验性较强的设计。
这里的重点不是“找一个喜欢的网站让 AI 复制”，而是先建立审美坐标。没有参考时，“高级”“电影感”“未来感”都只是模糊形容词，不同模型会给出完全不同的解释；有了参考，版式比例、留白方式、形状语言和色彩关系才变成可见、可检查的约束。
可复用方法：每次至少准备三类参考：一张负责整体布局，一张负责装饰元素或动势，一张负责配色。不要让一张图承担所有要求。