为什么值得关注

它系统性地解决了将生成式视频集成到真实设计中的最困难部分——数值化接缝验证、非确定性输出处理、符合 CSP 的自包含构建、以及自动播放回退——而不仅仅展示 AI 输出。

适合谁使用

希望将 AI 生成媒体集成到生产环境中的 Web 开发者
希望用生成式视频扩展现有视觉语言的设计师
使用生成式 AI 流水线（如 Seedance、Higgsfield）的视频创作者
处理严格 CSP 和 iframe 自动播放限制的工程师

典型使用场景

用无缝循环视频替换着陆页上的静态英雄图像
围绕概率性 AI 视频生成构建确定性流水线
创建自包含、符合 CSP 的 Web 页面，所有媒体内联
将多个生成片段拼接成连续影片，无可见剪辑

项目优势

提供可复现的数值化接缝检查（平均像素差异 < 8），能捕获非确定性失败
记录真实成本（288 积分，216 可用）及坑点（如 CLI 丢失响应后任务仍计费，需手动收养孤儿任务）
强调对现有设计系统（调色板、文案、摄影）的忠实，而非 AI 的设计意见
提供完整的自包含构建流水线（1080p 母版、720p 网络版、内联字体/图像/影片），适用于 CSP 受限环境

使用前须知

非确定性输出需要预留预算：大约每三个接缝中就有一个需要重新生成
CLI 可靠性问题：丢失响应仍会计费，需要手动收养孤儿任务
在跨域 iframe 中，若未显式设置 `allow=autoplay`，自动播放无法工作；需用户手势回退
高积分成本（16 秒需要 288 积分）可能使随意实验的门槛较高

README 快速开始

Turning a static hero into an AI-generated flight film

How Claude Opus 5 replaced a landing page's static hero video with a continuous, seamless 16-second flight film — using the Higgsfield CLI, the scroll-world skill, and a numeric seam check that turns out to be the whole ballgame.

Read this first: what this actually is

Being precise about scope, because it changes what you'll get out of it.

This is not "an AI built a website from scratch." The site — Flight, a fictional whole-aircraft charter company — already existed. A human made it. What Opus 5 did was:

Study the existing site closely enough to extend it without breaking its visual language
Generate a continuous flight film with Higgsfield and wire it into the hero
Convert the page into a self-contained build that survives a strict CSP, and publish it

So this is a guide about AI-generated motion inside a real design, and the engineering around it. That's a narrower claim than "AI builds websites," and a more useful one — the hard parts here are the parts nobody warns you about.

A note on two tool names you may have seen attached to this work:

What it's often called	What it actually is
"Higgsfield MCP"	The Higgsfield CLI — `@higgsfield/cli` on npm, a `higgsfield` binary. Not an MCP server.
"Claude design"	The `artifact-design` skill, a Claude Code skill that calibrates design treatment. Here it mostly said don't redesign anything — see Part 6.

And scroll-world is a Claude Code skill wrapping the Higgsfield pipeline. This project used its generation method and its seam discipline, but not its scroll-scrub engine — the hero autoplays and loops; it isn't scrubbed by scroll. Don't expect the Apple-style scroll-driven camera here.

The result

	Before	After
Hero	5s static plate, looped	16.08s continuous flight film
Motion	essentially none, played at 0.6×	passenger boards → door seals → taxi → rotation → climb
Cuts	—	zero — every seam is frame-identical
Source	1280×720	1920×1080 master, 1280×720 web cut

The film opens on the exact frame the original hero opened on, then that frame starts moving. That single decision is what makes it read as an extension of the site rather than a replacement for it.

项目描述

How Claude Opus 5 turned a landing page's static hero into a seamless AI-generated flight film — Higgsfield CLI, frame-locked seams, and a self-contained CSP-safe build.

How-I-built-Flight-Website