Communitygithub.com

SIX — 滚动沉浸式探索体验

使用 MuAPI 构建一款沉浸式滚动交互着陆页,访客滚动页面时,摄像机如同在场景之间无缝飞行穿越,无需剪辑,一气呵成。

SIX — 滚动沉浸式探索体验 是什么?

该技能(Skill)旨在帮助开发者利用 MuAPI 生成预渲染视频片段,构建一种通过滚动位置驱动的摄像机飞行穿越效果,打造沉浸式的 3D 世界着陆页。它支持任意行业或品牌,通过访谈用户获取主题、品牌套装和故事章节,自动生成连贯的 3D 场景和摄像机动画片段,并最终输出一个便携、框架无关的滚动擦除引擎。该技术原理与 Apple 产品页面的滚动浏览效果类似,核心在于通过精准的帧连接实现场景间的无缝过渡,从而避免视觉上的跳跃感。技能覆盖了从环境引导、图像与视频生成到最终页面集成的完整流程,并明确支持在 Claude Code、Cursor 或 Codex 等 AI 编码代理中执行。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add DeepDiveTechLab/six

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

SIX — 滚动沉浸式探索体验 是做什么的?

生成一个着陆页,其中滚动驱动摄像机:它从场景外部潜入内部,然后飞出并进入下一个场景,持续不断,无可见剪辑。视觉内容由 AI 生成(MuAPI);页面仅根据滚动位置擦除预渲染视频。这与 Apple 的滚动产品页面背后的技术相同——摄像机确实在移动,滚动仅控制时间轴。

您生成的内容: N 张场景静止图 → N 个“潜入”摄像机片段 → N-1 个“连接”片段(无缝衔接连续场景)→ 一个便携式擦除引擎,将整个链条播放为一次连贯飞行。

成败的关键规则: 接缝处必须帧级精确。在生成任何连接片段之前,请阅读无缝链条。弄错这一点是最常见的失败原因,并会导致场景间出现可见的“跳跃”。

不要假设前端框架。resources/scrub-engine.js 中的擦除引擎是自包含的原始 JavaScript(它在您提供的容器中构建自己的 DOM 并注入自己的 CSS,并通过 mountSIX 暴露自身),因此它可以嵌入纯 HTML、Next.js、Vue、Python 服务的页面等任何环境。本技能的价值在于 MuAPI 管道、提示词和接缝方法,而非框架。

文件映射: SKILL.md(本文件)→ scripts/pipeline.md(整个生成运行的复制粘贴 bash 脚本)+ scripts/knockout.py(背景移除)→ references/prompts.md(收录清单和每个提示词模板)+ references/muapi-model-roster.md(已验证的模型/层级/端点映射——如果以下内容需要审计,请阅读此文件)→ resources/scrub-engine.js + resources/index-template.html(可立即使用的引擎 + 最小页面)。


第 0 步 — 环境引导

  1. MuAPI CLI。 如果 muapi 不在 $PATH 中,请根据您环境的常用包管理流程安装它,然后运行 muapi auth configure(写入 MUAPI_API_KEY/其配置文件——交互式操作,如果它需要浏览器,则无法运行认证流程本身)。通过 muapi auth status 确认其工作正常。没有记录的 CLI 信用额度查询命令;如果批次因信用额度相关错误而停滞,请直接检查 muapi.ai 仪表盘。
  2. ffmpeg / ffprobe 在 $PATH 中(帧提取 + 编码)。
  3. 图像处理工具,用于背景抠图(如果您想要浮动场景):PIL(python3 -c "import PIL"),或 cwebp/sips。可选——参见第 3 步。
  4. jq 在 $PATH 中——在整个流程中用于解析 --output-json 响应并提取上传资源的 URL。
  5. 注意事项:macOS 自带 bash 3.2(没有 declare -A);不要在脚本中使用关联数组。MuAPI 生成需要数分钟——始终以分离方式(后台)运行并轮询(--async + muapi predict wait <request_id>),绝不要使用前端阻塞调用。MuAPI 的视频/图像端点接受托管 URL,而不是本地文件路径——这与 Higgsfield 的约定相反,也是最常见的迁移错误:每个本地参考图像(场景静止图,提取的边界帧)都必须首先通过 muapi upload file <path> --output-json --jq '.url' 上传,返回的 URL 才能传递给 --start-image/--end-image/--image-urls。确切的标志名称和分辨率/质量选项并非在所有模型中都统一记录——在批量处理前,请使用 muapi video from-image --help / muapi image generate --help 验证,并参阅 references/muapi-model-roster.md 以了解已经交叉检查过的内容。

第 1 步 — 访谈用户

主题由用户陈述——以开放式问题、纯散文形式询问,切勿编造选择题。一个编造的行业列表会引导用户,并显得您在为他们的业务做决定;让他们用自己的话回答(他们的真实业务、客户的业务或任何想法)。将结构化多项选择(在 Claude Code 中使用 AskUserQuestion;在其他环境中使用简单的二选一问题)留给下面真正可枚举、风险较低的选择——艺术指导和品牌套装方法——即使在那里,也要表明他们可以走自己的路(“其他”)。只询问您无法合理默认的事项。涵盖:

  1. 主题(开放式询问,非多项选择)——“这个世界应该关于什么?您的业务、客户的业务或任何想法——一个词或一句话即可。” 获取行业/产品 + 一句话宣传语(例如“一家泡泡茶公司,从茶叶到最后一啜”),以及品牌名称(如果有);否则您将在下面提出一个。
  2. 品牌套装——提供三种路径,选择一种:
    • 从 URL 导入:自行获取页面(网络抓取)并读取可见的调色板、名称和色调——没有记录专用的 MuAPI 品牌套装导入器,因此这一步是您进行提取,而不是 CLI 调用。如果用户期望一键导入,请直说。
    • 用户直接提供调色板、名称和色调。
    • 您提出调色板和名称,并让用户批准。 捕获 4–6 个命名的十六进制颜色值、一个显示名称和一个或两个描述色调的词。
  3. 艺术指导——默认为“柔光哑光低多边形粘土立体模型,等距视角,移轴微缩模型,暖光。” 提供替代方案(扁平纸艺、光泽玩具、黏土动画、霓虹夜晚、照片级真实建筑)。无论选择什么,都将成为共享的风格前导,在每个场景提示中逐字重用(这是使世界具有凝聚力的关键)。
  4. 旅程(章节)——摄像机飞过的有序场景。根据主题自身的价值链条提出一组场景,并让用户编辑。5–7 个效果很好。波霸示例:农场 → 珍珠厨房 → 旗舰店 → 配送 → 社区广场 → 主打产品。每个章节需要:简短的主题描述(立体模型里面有什么)、一个标题、一个副标题、一行正文以及 0–3 个标签胶囊。最后一个章节通常是主打产品 + 行动号召。
  5. 移动版(Beta)— 始终询问此问题;切勿默默地同时生成两者。 作为二选一的选择(在 Claude Code 中使用 AskUserQuestion;在其他环境中使用简单的问题)询问:“是否也需要移动端优化版本?移动端支持处于 Beta 阶段 — 滚动擦除机制是桌面端原生特性;在手机上您会获得较轻量的编码和引擎强化,但纵向裁剪会截断 16:9 的画面,并且低端设备可能仍然会出现卡顿。” 选项:“仅桌面端” / “桌面端 + 移动端(Beta)”。Beta 免责声明必须向用户说明,而不仅仅是暗示。答案决定:
    • 是 → 生成 -m.mp4 移动端编码(第 6 步)并连接 clipMobile/connectorsMobile(第 7 步);运行完整的移动端质量保证(第 8 步)。如果任何场景的焦点主体偏离中心,提供 9:16 英雄变体的备用方案(额外 MuAPI 积分——请说明)。
    • 否 → 完全跳过移动端编码和连接。引擎的手机端强化(寻址合并、iOS 预加载、安全区域 CSS)无论是否选择移动版都始终开启——这不是“移动版本”,它只是页面的容错机制,因此仅桌面端的构建在手机上访问时仍然能够优雅降级。

视频模型不是访谈问题——默认使用 seedance-2-first-last-frame(global 层级)。如果用户提到了偏好,仅当该模型能够帧锁定接缝时才予以尊重——即它接受起始图像,并且对于连接片段,也接受结束图像(references/muapi-model-roster.md 中有已验证的名单)。此技能仅输出无缝结果,因此无法帧锁定的模型将被拒绝并说明原因,而不会替换使用——请改用名单中的模型。

保持滚动机制固定(连续飞越)——这是本技能的核心。请参阅 references/prompts.md 获取收录清单和文案结构。


第 2 步 — 生成场景静止图

每个章节一张图像,所有图像共享相同的风格前导以保持一致性。默认模型 gpt-image-2-text-to-image(清晰,擅长等距插画;返回纯色/白色背景,非常适合浮动立体模型“岛屿”)。如果简报偏重角色/卡通,则使用 nano-banana-pro;对于照片级真实建筑风格,则使用 google-imagen4-ultra(完整图像模型表请参阅 references/muapi-model-roster.md)。

提示形状(完整模板在 references/prompts.md 中):

<风格前导,每次相同>。在纯色 <背景色> 背景上,带有柔和的接触阴影。<调色板十六进制值>。无文字、无字母、无标志,居中,3:2。
主题:<此立体模型中包含什么>。
  • 同时并发运行所有 N 个任务,以分离方式执行。每个场景的命令:
    muapi image generate --model gpt-image-2-text-to-image --prompt "$(cat scene_i.txt)" \
      --aspect-ratio 3:2 --async --output-json scene_i.job.json
    id=$(jq -r '.request_id' scene_i.job.json)
    muapi predict wait "$id" --json > scene_i.json
    
  • 结果 URL 位于轮询输出的 .result_url(或 .output_url/.url——具体键名并未统一记录;检查一个响应并相应调整)下。使用 curl 下载。
  • 一次生成可能暂时失败——单独重新生成失败的那个;无需重启整个批次。
  • 在继续之前检查静止图。 它们必须看起来像是一个连贯的世界(相同的角度、调色板、光线)。如果一张风格不符,请使用 muapi image generate 再次重新生成它(一个新的调用,相同的前导)——不要使用 muapi image edit 并以前一张静止图为参考来“锁定”风格;编辑模式会融合/克隆该参考图像的实际场景,而不仅仅是匹配其风格。

请参阅 scripts/pipeline.md 了解确切的批处理脚本。


第 3 步 —(可选)浮动场景

如果您希望立体模型浮动在氛围背景上,而不是位于实色盒子中,请使用 scripts/knockout.py(边界连接洪泛填充——保留与背景颜色匹配的内部颜色,例如奶油色墙壁)将平面背景抠除为透明。然后编码为 webp。如果您想保持简单,只需使页面背景与场景背景颜色相同并跳过此步骤。

这些静止图同时用作视频海报和懒加载后备,因此请保留它们。


第 4 步 — 摄像机架构(选择其一——这决定成败)

摄像机在场景之间如何移动是影响质量的最重要的杠杆。两种形态;根据美学选择。

视频模型——为整个链条选择一个

此技能仅输出无缝结果,因此唯一可用的模型是那些能够帧锁定接缝的模型:每个链接的片段必须接受 --start-image,并且连接片段还需要 --end-image。这种能力——而非偏好——是选择规则。完整证据链在 references/muapi-model-roster.md 中;此处总结:

模型层级起始/结束图像备注
seedance-2-first-last-frame (默认)global✓ / ✓--mode first-last — 一张图像 = 一段飞行/潜入(无结束图像),两张图像 = 一个连接片段。同一模型覆盖两种角色。
seedance-2-first-last-frame-fastglobal✓ / ✓同一模型,快速队列变体——低成本预览层级。在此首先运行整个链条以验证接缝,然后再花费积分进行完整渲染。
seedance-2-vip-first-last-framevip✓ / ✓NSFW / 内容过滤器回退方案——VIP 的过滤器波段不同,并且记录显示它能容忍参考图像中逼真的人脸,而 global/chinese 层级不行。用于单个顽固片段,而非整个默认链条。

chinese 层级不在名单中:first-last(双图像条件)在该层级上不可用,仅有单图像 i2v——因此它无法保持接缝。同样,跳过那些仅支持单图像媒体输入的模型(因为它只能控制生成,而不能延续镜头)。

规则:

  • 所有链接片段使用一个模型+层级。 每个渲染器/层级都有自己的运动/色彩/颗粒特征;中途混合虽然保持了位置连续性(帧仍然交接),但渲染特征的变化会表现为微妙的跳跃。唯一被认可的特例是用于单个顽固片段的 NSFW 回退方案(注意事项)——在一个 5 秒连接片段上略微的特征变化胜过缺少一个连接片段。
  • 默认使用 seedance-2-first-last-frame 在 global 层级上;尊重用户指定的偏好仅当该模型符合条件时(帧锁定)。如果不符合,请告知并改用支持的模型——切勿为了满足模型请求而交付非无缝的构建。
  • 管道脚本将模型/层级作为 $VMODEL/$VTIER,并且已经根据层级处理了相应的标志(scripts/pipeline.md)。

A) 连续前进式拍摄 — 推荐用于接地气 / 写实 / 漫游场景

一个摄像机只向前滑行,从第一个场景到最后一个场景,作为一次连续拍摄。顺序生成各个片段:片段 0 从场景 0 的静止图开始(向前滑入它);然后每个片段的 --start-image = 前一个片段的实际最后一帧(使用 ffmpeg 提取,上传),提示词 “继续平稳地向前滑入 [场景 i],永不后退”(或在运动交接契约下的表现性镜头中段移动——参见摄像机语法下方),并且没有 --end-image——一个宽景建立镜头的结束图像会迫使摄像机后退,这是造成卡顿的第一大原因。提取每个片段的最后一帧以提供给下一个。结果:每个接缝都是帧级精确的,并且摄像机永不后退。没有连接片段(跳过第 5 步)——这些片段本身就是旅程。将每个片段作为章节片段进行连接,使用 connectors: [] 和较小的 crossfade(~0.08)。即使没有 --end-image,这些片段仍然到达不同的房间(提示词引导内容)。成本:严格顺序执行(无法并行)且更慢;内部场景更可能触发内容过滤器,因此要预设备用方案(每个片段 3 次尝试)。

B) 潜入 + 高空连接片段 — 仅适用于立体模型 / 微缩模型 / 上帝视角世界

一个“潜入每个场景”的片段 + 一个拉高并向外飞出并飞向下一个场景的连接片段(第 5 步)。拉出在每个接缝处反转摄像机方向(向前潜入 → 向后拉出)。在微缩模型/立体模型世界中,这表现为有意的“变焦

…

[截断以进行翻译]

相关技能