下载文件夹里堆满了 SaaS landing page 模板、Notion 模板、Astro 启动包——但真要用 AI 从零搭出一个带电影感动画的专业网站，仍然很难。X 创作者 Chesny 在一段 21 分钟的视频里把这条链路打通：先用 GPT-5.6 Sol（Chesny 在视频里称为 OpenAI 最新模型）跑设计，再用 Sora 2（画面里实际为 Higgsfield 的 Seedance 2.0 / Kling 3.0 模型）做动画，最后用 Codex 把网站搭起来、部署上线——他自己已经用这套工作流交付过 100 多个网站，覆盖电商等多个行业。
本文按 Chesny 视频里走过的 8 步走：先给 AI 一张「有的放矢」的参考图、用 AI 生成第一版设计稿、把设计稿做成会动的视频、用 Codex 搭出 Hero 区并嵌入视频背景、把落地页其余部分搭起来、把视频和卡片背景完美融合、做无缝 Boomerang 循环、最后独立建一个 About Us 页面——本文保留原作者归属与原文顺序，不外推视频之外的 Chesny 项目，也不补视频之外的官方数据。
今天就能跑的第一步：挑一个要搭的目标网站（个人作品集 / 客户项目 / 自营业务）——把「要交付什么、给谁看」这一件先想清楚，然后去 Pinterest/seesaw.website 各花 5-10 分钟找一张参考图——再按本文 8 步走一遍。本文 8 步里的工具组合是 ChatGPT 图像生成（GPT-5.6 Sol Medium / Ultra）+ Codex（Medium 模式先用、Ultra 模式收口）+ Higgsfield Seedance 2.0（动画）+ Codex 视频背景 + Boomerang 逻辑。
01 找灵感与视觉参考：先给模型一张「有的放矢」的图
Chesny 在视频开头强调了一个反直觉的事实——目前任何 AI 模型，都没法在脱离参考图的情况下凭空生成高质量设计。这条对习惯了 ChatGPT 一句话就能出稿的人来说很难接受，但当他尝试让模型自己发挥时才发现：让 AI 输出的「AI 感」恰恰来源于「没给参考」。
他给了三个具体的灵感来源：
- Pinterest —— 概念稿最丰富的首选来源
- seesaw.website —— 收录真实动效站点的合集（与 Pinterest 偏向概念稿不同）
- land-book.com —— 落地页参考库
走法是先在 Pinterest 上花几分钟滚动，筛选出适合自己细分领域的一张首页，放大截图保存——Chesny 在视频里给自己做设计工作室网站时就是这么做的：选一张参考图、用圆形装饰替代原图里的花朵、避开 AI 常见的紫粉配色、最终选定绿色作为主色。这一步的关键是给 AI 一张「具体可执行」的视觉目标，而不是让 AI 自创视觉语言。
应用场景：个人作品集、客户项目、自营业务网站——只要最终交付物是「带视觉设计的网页」就都用得上。Chesny 在视频里说自己已经把这套流程跑过 100 多个网站，覆盖电商等多个行业，前置投入是 5-10 分钟找参考，比让 AI 反复改稿省得多。
边界：参考图必须先于模型、不是单独输入；如果没有合适的参考图，先停下来去 Pinterest/seesaw/land-book 各找 5 分钟再开工，不要急着让 AI 自己发挥。
02 用 AI 生成第一版设计稿
工具选择上，Chesny 直接进 ChatGPT 图像生成——视频里他用的就是 ChatGPT（不是 Higgsfield 替代工具），模型选项是 GPT-5.6 Sol Medium（视频 UI 标签），也可以是 Ultra（贵但更精细）。上传三张参考图：
- 原始首页布局
- 装饰元素（圆形替花朵）
- 配色参考
Prompt 写法上，Chesny 给的建议很具体——像指导一位初级设计师、或在 Upwork 上写测试需求那样写。他在视频里直接展示了他用的版本：
Take the first image as a reference and redesign it to be about web design agency. So instead of flowers, add those circles on the left side and on the right side of the images so they fit very well into the design. I also changed the logo to be about my web design agency which is called motionsites.ai.
把这段 Prompt 发出去，让 AI 出多版结果。Chesny 的策略不是只发一次 Prompt 等结果——他会迭代三版：版本 A 保留原色、版本 B 换更口语化的指令、版本 C 才选定绿色版本。
这一步的关键判断：从多版结果里挑出与配色参考最贴合的那一版不要继续迭代细节。Chesny 反复强调：传给 AI 的素材越极简越好，——下一步要把文字按钮、文字、logo 全都去掉，只保留同构图、同尺寸的纯背景图（他让 AI 出 8K，去掉文字、按钮、logo），这一步就是为了让下一步的动画合成更干净。
边界：第一版设计稿不必完美，先把配色、构图、装饰元素三件定下来就够；细节交给后面的「动画」与「Codex」两个环节去做。
03 把设计稿做成会动的视频
动画合成是这条工作流里 AI 替代最彻底的一步。Chesny 在视频里说他没用 Sora 2 ——画面里实际打开的是 Higgsfield 的 AI 视频面板，可选模型为 Seedance 2.0 与 Kling 3.0，前者是 Chesny 本人实际采用的模型。两种生成模式：
- 无参考模式：仅靠提示词驱动动画（最简单的版本）
- 有参考视频模式：AI 模仿参考视频的运镜节奏与平滑度
无参考版提示词极简：animate this image，参数选 16:9、1080p、10 秒。Chesny 强烈建议补一句约束：do not zoom in or zoom out——避免镜头推拉导致动画显得「业余」。
有参考视频模式更可控。参考视频不必高质量——随便录一小段，只要让 AI 感受到期望的运镜平滑度即可。完整 Prompt 是：animate the first image the same way as the video attached, the motion should feel the same。
结果对比：无参考版的结果 Chesny 自评「能用、但效果一般」，最终用于本项目 Hero 视频背景；有参考版的结果更不可预测，他考虑用于网站其他页面（不一定首屏）。核心取舍：如果你已经有第一版的视觉风格 + 明确想要的运镜节奏，有参考模式更容易对齐预期；如果你只是想「让图动起来」先用无参考跑一版对比。
边界：参考视频不必清晰，关键是「让 AI 感受到你想要的运镜节奏与平滑度」；10 秒的短视频足够。
04 用 Codex 搭出 Hero 区并嵌入视频背景
Codex 这一步是整条工作流里最让 Chesny 惊喜的一步——他觉得这一步相当高效。进入 ChatGPT 内置 Codex 之后：
- New Projects → Start from scratch
- 命名：
web design agency（或自己网站的名字） - 模型选项：Ultra / Medium，——本次先选 Medium 跑通
先把第二步选出的设计稿简化：把多余装饰元素（圆圈等）去掉，让 AI 不必耗费精力去「理解这些圆圈是要保留还是要换」。Chesny 在视频里实际操作时把图像复制到 Figma 隐藏装饰圆圈、再复制为 PNG 作为参考上传——你不必用 Figma，直接拿现成工具去掉装饰、保存 PNG 即可。
字体处理是这一步的关键之一——AI 永远会回退到默认字体，这会让成品看起来千篇一律充满 AI 感。Chesny 在 Motion、Framer 等网站找了一款 Geist（Google Fonts 可导入），把字体引入代码（含 <link rel="preconnect"> 与 <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap">）整段保存下来，备用。
Hero Section 提示词是一次性把 4 件信息发出去：
build out this hero section, just the hero section, do not build the rest of the website, we'll do that later keep the background pure black use this color for accent colors（贴入从 Figma 按 I 取的强调色
#2D8F57） use this font（贴入 Geist 字体引入代码）
预览时直接看到 Hero 区已经一比一还原参考图，并且已经做好移动端适配，——Codex 的响应式是默认就有的，不需要你额外提示。Hero 搭好之后，把第三步生成的视频嵌进背景。Chesny 的提示词是：
add the video as the Hero background do not apply any overlay or transparency — AI tends to add a semi-transparent layer to keep text readable, but we don't want that here.
这条约束「不要遮罩」是本步的关键之一。AI 默认会为视频加一层半透明遮罩以保文字可读——但本工作流已经选了足够亮的字体与足够显眼的强调色，不需要遮罩。明确告诉 AI「不要遮罩」能避免视频背景被灰幕覆盖、失去电影感。
应用场景：任何想搭出 Hero 区作品的从业者都从这条开始。Chesny 在视频里特意强调「先只构建 Hero，不要急着让 AI 一次性搭整个网站」，——一次性建全站，往往要在响应式与创意之间妥协。
边界：Hero 区提示词一定要明确「just the hero section」——否则 AI 会自动把其他区块也搭出来，你就要在已经搭好的网站里反复调试，得不偿失。
05 把落地页其余部分搭起来
Hero 区搭好之后，让 AI 一次性把落地页其余区块也搭起来。Chesny 的指令是：
Build the rest of the landing page, so please add around 4 to 5 sections. Make them to be about us, feature sections, testimonials. Also I want some portfolio cards, and then let's have some other sections that you can come up with.
把区块数、类型（about us + features + testimonials + portfolio cards）说清楚即可——剩下的「其他区块」让 AI 自己发挥。
Chesny 在视频里说这一步让他相当惊喜，——他承认哪怕放在两个月前，也不可能仅凭一句「把网站剩下的部分做完」就拿到这样的结果。AI 交付了：评测分布（84% / 40+ / 4.9/5）三大数据卡 + 功能区（带动画与卡片样式）+ 作品集（排版不错，只需替换卡片内容）+ 流程区块（带动画衔接）。
应用场景：任何需要在主页外展示「我们是谁 / 客户怎么说 / 我们做过什么 / 我们怎么工作」的从业者，从这一步开始就能拿到一个完整可演示的 landing page 原型。
边界：上面所有结果都基于 Medium 模式生成——如果想更进一步，切到 Ultra 模式跑一次整体优化，效果会更精致。
06 把视频和卡片背景完美融合
Hero 区已经有视频背景了，但 Capabilities 区里的卡片还是静态的——Chesny 决定把同一段视频放到第二张 Capabilities 卡片（写着「Strategy. Clarity. Before pixels.」的那一张）作为背景，让两张卡片有一种「视频在背景里延续」的视觉呼应。
提示词两步：
- 放置视频：把视频放到那张卡片作为背景，铺满不被裁切
- 解决颜色不一致：视频偏黑、卡片色调偏深，融合不上；在样式里加
mix-blend-mode: exclusion（CSS 标准属性，等价于设计软件里的 Blend Mode → Exclusion），让两者色调完美融合
Blend Mode → Exclusion 是这段最关键的技法——Chesny 在视频里多次强调这条是「视频与背景色不一致的万能解法」。它不是只针对这段视频的临时解决方案，而是一条可以放进任何视频背景场景的工具，——只要你拿到一段视频、想让它和背景色调对齐，就直接上 mix-blend-mode: exclusion。
最后补一条把视频放大到约 150% 的提示词——视频被卡片裁切到只剩中心一小块时显得局促，150% 放大能让视频元素铺满卡片。
边界：mix-blend-mode: exclusion 在 Chromium / Firefox / Safari 现代版本上都支持，旧 IE 与老 Safari 不行——如果你要兼容旧浏览器，需要用其它视觉融合方案（如调整视频亮度或加上同色覆盖层）。
07 让视频无缝 Boomerang 循环而不是硬重启
视频加进 Hero 与卡片之后，会出现一个体验问题：视频播完一遍就硬生生地从头重新开始，——观众会意识到「这是一段视频、而不是一段无缝流动的画面」。Chesny 在视频里要解决的就是这条——正向播完之后自动反向播放，形成无缝循环。
第一次尝试：在提示词里加 video seeking 检查 + 通知浏览器更新。结果是颜色融合问题解决了（exclusion 起效），但倒播时仍卡顿。
第二次尝试：视频结束时隐藏 video 元素、由 canvas 接管显示、通过 requestAnimationFrame 按帧步进、到达末尾后切换反向。结果还是没解决卡顿。
第三次尝试：换一种思路——boomerang playback logic。这条技法的核心不在视频元素上做文章，而是不要去 seek video.currentTime、挂载时直接播放、依赖 requestAnimationFrame 与 play() promise。Chesny 在视频里特意说这条 non-obvious part——很多教程会让你在视频层手动控制，但手动 seek 是卡顿的根源。
实际效果：完美。Hero 区视频在播放结束后自动无缝倒放、衔接流畅无卡顿。把同一套逻辑套到 Capabilities 卡片视频上，倒放衔接依然平滑无延迟。
应用场景：任何有「视频背景 + 重复循环」需求的从业者都从这条开始——产品介绍页、个人作品集、艺术集展示页。这是 Chesny 在视频里最看重的一条经验，他自己也在视频里说「这一条解决了无数 AI 视频背景的卡顿问题」。
边界：依赖 requestAnimationFrame 与 play() promise，在现代浏览器上都可工作；在需要兼容旧浏览器的项目里需要手动降级到 setTimeout 控制。
08 独立 About Us 页面 + 响应式适配 + 最后边界
Hero、其余区块、视频背景、Boomerang 都搭好之后，主页就完成了。Chesny 在视频里额外建议建一个独立的 About Us 页面，——既能让客户在导航栏里看到「关于我们」、也能让全站结构更完整。
指令：
In the navbar you can see there is about us page. Let's build that complete page with around five to six sections and do not build any other pages just build that page.
后台切换到 Ultra 模式、清空使用记录——给 AI 最大的发挥空间。一次性生成结果质量很高：5-6 个 section 一气呵成、设计语言统一、不是通用模板。
响应式适配是默认就完成的——桌面端与移动端都做了完整优化，排版与性能都做了响应式优化。Chesny 在视频里说 AI 在响应式处理上做得比传统建站工具更全面稳定，——这一点也让他相当惊喜。
最后一条边界：本文 8 步完全按 Chesny 视频走过的路径——找灵感、AI 出图、动效合成、Codex 搭 Hero 并加视频背景、剩余区块、Capabilities 视频融合、Boomerang 循环、独立 About Us。不外推视频之外的 Chesny 项目：Chesny 在视频里提到的 motionsites.ai 是他个人在跑的产品（与本文演示的 web design agency 不是同一个网站），视频时长达 21 分 23 秒、本文不补视频之外的官方数据；不外推视频之外的模型差异：视频口播中的「Sora 2」与 GPT-5.6 Sol 模型选项（Medium / Ultra）等模型名称均按视频原值取，画面里实际打开的工具（GPT-5.6 Sol Medium 与 Higgsfield Seedance 2.0 / Kling 3.0）以 C 层画面证据为准。
原作者：Chesny（X @chesny）；本文转写自 Chesny 的 21 分钟 X 视频（2026-10-12 发布于 https://x.com/chesny/status/2109323894465446217?s=46），所有模型名/文件名/网站名/Prompt 写法均按视频原文取。