Communitygithub.com

SIX — 沉浸式捲動探索 (Scrolling Immersive Xploration)

打造一個「六」感沉浸式捲動探索頁面:當訪客捲動時,預先渲染的鏡頭會從場景外部飛入其內部,或沿著連續的弧形鏡頭從上一個場景流暢過渡到下一個,完全無剪輯,呈現一氣呵成的連貫飛行體驗。此技能會與使用者訪談主題、故事章節與品牌素材,然後使用 MuAPI 生成連貫場景與無縫鏡頭片段,並整合一個可攜式、不拘泥於任何框架的捲動觸發引擎。

SIX — 沉浸式捲動探索 (Scrolling Immersive Xploration) 是什麼?

這項 AI 技能旨在為任何產業或品牌,打造一個具沉浸感的「3D 世界」橫幅頁面,其核心技術是讓捲動行為驅動虛擬攝影機的運動。它透過一個預先設計的流程,先與使用者進行結構化訪談,以獲取主題、品牌色調、藝術風格(預設為柔和的低多邊形黏土立體模型)以及欲呈現的章節順序,然後全自動生成多個場景圖片與過場影片片段,在幀層級實現無縫銜接。 技能使用了 MuAPI 作為生成影像與影片的後端,並提供了詳盡的管線腳本 (`scripts/pipeline.md`) 來執行批次生成。生成的結果是一個純 JavaScript 的捲動觸發引擎 (`resources/scrub-engine.js`),它獨立於任何前端框架(如 React、Vue),可以直接嵌入任何 HTML 頁面。技能的核心模組包括:使用圖片生成模型(如 `gpt-image-2-text-to-image`)產出每個章節的一致風格場景圖,再透過指定影片模型(如 `seedance-2-first-last-frame`)生成「潛入」與「空中連接」的鏡頭片段,最後透過精準的幀對齊技術,消除場景切換時的突兀感。 此技能特別適合需要展示產品、服務或企業故事的品牌官網,透過類似 Apple 產品頁的「鏡頭移動」而非簡單的圖片輪播,提供極具視覺衝擊力的瀏覽體驗。它在桌面端表現最佳,但也可選購測試階段的行動版支援。對於開發者而言,這是一個將複雜的 3D 視覺動畫、AI 素材生成與前端整合的實用工具包。

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

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

SIX — 沉浸式捲動探索 (Scrolling Immersive Xploration) 是做什麼的?

產生一個著陸頁,其中 捲動驅動攝影機:它會從場景外部潛入內部,然後飛出並進入下一個場景,連續不間斷,沒有可見的剪輯。視覺效果由 AI 生成(MuAPI);頁面僅根據捲動位置來掃描預先渲染的影片。這與 Apple 產品頁面中使用的「捲動穿梭」技術相同——攝影機確實在移動,而捲動只是驅動了時間軸。

你會產生什麼: N 張場景靜態圖 → N 個「潛入」鏡頭片段 → N-1 個「連接」片段,這些片段無縫地連接連續的場景 → 一個可攜式的捲動掃描引擎,將整個鏈條作為一次連續飛行播放。

成敗的關鍵規則: 接縫處必須是影格完全一致的。在產生任何連接片段之前,請先閱讀無縫鏈結。搞錯這一點是最常見的失敗原因,會在場景之間產生明顯的「跳躍」。

不要預設任何前端框架。resources/scrub-engine.js 中的掃描引擎是獨立的 Vanilla JS(它會建立自己的 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. 行動版(測試版)——務必詢問此項;切勿在未告知的情況下同時生成兩者。 以兩個選項的選擇題形式提問(Claude Code 中使用 AskUserQuestion;其他地方用簡單的是/否問題):「是否也需要行動版最佳化版本?行動版支援目前處於測試階段——捲動掃描機制是桌面版原生的;在手機上你會得到較輕量的編碼和引擎強化,但直向模式會裁切 16:9 的畫面,且低階裝置可能仍然會卡頓。」 選項:"僅桌面版" / "桌面版 + 行動版(測試版)"。必須向使用者說明測試版免責聲明,而不僅僅是暗示。 此回答控制著:
    • 是 → 產生 -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 提取,上傳),提示詞 "continue gliding smoothly FORWARD into [scene i],never pulling back"(或在運動交接合約下進行表現性的中段鏡頭移動——請參閱攝影機文法),並且沒有 --end-image——一個廣角建立鏡頭的結束圖片會強迫攝影機後退,這是導致卡頓的首要原因。提取每個片段的最後一幀以饋入下一個片段。結果:每個接縫都是影格完全一致且攝影機絕不後退。沒有連接片段(跳過步驟 5)——這些片段本身就是旅程。將每個片段作為章節片段連接,使用 connectors: [] 和一個小的 crossfade(約 0.08)。即使沒有 --end-image,這些片段仍然會到達不同的房間(提示詞引導內容)。成本:嚴格依序(無法平行化)且速度較慢;室內場景更可能觸發內容過濾器,因此需要內建重新嘗試機制(每個片段嘗試 3 次)。

B) 潛入 + 空中連接——僅適用於立體模型 / 微縮 / 上帝視角的世界

一個「潛入每個場景」的片段 + 一個向上拉起並飛向外,然後飛向下一個場景的連接片段(步驟 5)。拉出在每個接縫處反轉攝影機方向(前潛入 → 後拉出)。在一個微縮/立體模型世界中,這表現為一種有意的「縮放」

...

[由於原始內容被截斷,此處省略了對應的翻譯結尾,但根據原文推斷,此處應完成對「B) 潛入 + 空中連接」模式及其後續步驟(步驟 5-8)的說明。翻譯將遵循相同的格式和規則。]

相關技能