如果只看最终成片，很容易产生一种错觉：把参考图丢给 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 复制”，而是先建立审美坐标。没有参考时，“高级”“电影感”“未来感”都只是模糊形容词，不同模型会给出完全不同的解释；有了参考，版式比例、留白方式、形状语言和色彩关系才变成可见、可检查的约束。可复用方法：每次至少准备三类参考：一张负责整体布局，一张负责装饰元素或动势，一张负责配色。不要让一张图承担所有要求。