scroll-world

scroll-world

打造一個由頁面滾動驅動鏡頭運動的 Landing Page：鏡頭從場景外部深入內部，再飛出並無縫潛入下一個場景，全流程連續流暢、毫無肉眼可見的剪接痕跡。視覺素材均由 AI 生成——靜態圖透過 Higgsfield（或 Codex）生成，影片鏈預設透過 Monid 渲染（按片計費的 Seedance 2.0；Higgsfield 額度作為備選方案）——而頁面只需根據滾動位置即時平滑播放預渲染好的影片短片。這與 Apple 產品的滾動瀏覽頁面採用的是同一套技術——鏡頭在真實移動，滾動只是掌控時間的播放。

你將生成的成果： N 個場景靜態圖 → N 個「深入 (dive-in)」鏡頭短片 → N-1 個無縫連接前後場景的「銜接 (connector)」短片 → 一個輕便的可攜式滾動播放引擎，能將整條短片鏈組合為單一連續的飛行畫面。

決定成敗的唯一鐵律： 接縫處必須做到逐幀完全一致。在生成任何 connector 短片之前，請務必先閱讀無縫連接鏈。在這個環節出錯是最常見的失敗原因，會導致場景轉換時出現明顯的突兀跳變（"pop"）。

不要假定任何特定的前端框架。位於 references/scrub-engine.js 的滾動引擎是完全獨立的原生 JavaScript（Vanilla JS），它會自動構建 DOM 並將 CSS 注入你指定的容器中，因此可以直接嵌入純 HTML、Next.js、Vue 或 Python 渲染的頁面等任何環境。此 Skill 的核心價值在於 Higgsfield 的工作流程、提示詞設計以及接縫處理技巧，而非綁死某個框架。

---

Step 0 — Bootstrap（初始化準備）

1. Monid CLI — 預設的影片鏈後端。 請檢查 monid --version、monid keys list（當前生效的 key）與 monid balance——影片鏈按片計費（單位 USD，Step 1.7 有詳細計費數據；1080p、N=6 的影片鏈約需 $27）。若找不到 CLI 或餘額不足以支付整條影片鏈，請主動說明並自動切回使用 Higgsfield 額度進行渲染——採用相同模型與流程，僅計費管道不同（Step 4 → Monid 後端）。
2. Higgsfield CLI — 即使走 Monid 路徑也依然必須配備：它負責渲染場景靜態圖 (gpt_image_2)，同時也是 kling3_0 NSFW 備選方案以及備用渲染鏈的執行工具。若 $PATH 中未包含 higgsfield，請依照 higgsfield-generate skill 進行安裝。若 higgsfield workspace list 驗證失敗，請提示使用者手動執行 higgsfield auth login（互動式 OAuth，無法自動執行），必要時再執行 higgsfield workspace set <id>。請確認額度足以涵蓋靜態圖（約 N 張圖片生成）——若影片鏈退回此處渲染，還需要額外加上 (2N-1) 次影片生成。
3. ffmpeg / ffprobe 需置於 $PATH 中（用於幀擷取與編碼）。
4. 影像處理工具：若需要浮動場景去背，請準備 PIL（python3 -c "import PIL"）或 cwebp/sips。此項選配——詳見 Step 3。
5. （選配）Codex CLI — 若 $PATH 中有 codex（≥ 0.125）且 codex login status 顯示已登入 ChatGPT，場景靜態圖可透過 Codex 內建的 image_gen（同樣是 gpt-image-2 模型）生成，費用將直接計入使用者的 ChatGPT 訂閱，省去 Higgsfield 額度——可在 Step 1.7 提供此選項，對應指令見 Step 2。若缺少 Codex，則直接不提供該選項。
6. 注意事項： macOS 預裝的是 bash 3.2（不支援 declare -A）；請勿在指令稿中使用關聯陣列 (associative arrays)。Higgsfield 的生成任務耗時約 3–8 分鐘/次——務必以後台解耦方式 (detached / background) 執行並進行輪詢 (poll)，切勿使用前台阻塞式呼叫。多媒體參數不支援使用任務 UUID (job-UUID) 作為參照——請直接傳入本地檔案路徑給 --image/--start-image/--end-image。不同影片模型支援的參數有所差異（例如 Kling 不支援 --resolution），且並非所有模型都支援始末幀條件控制 (start/end-image conditioning)——在批量執行前，請務必先透過 higgsfield model get <job_type> 確認所選模型的 schema，並參閱 Step 4 的模型對照表。

---

Step 1 — 訪問使用者

專案主題完全由使用者決定——請使用純文字提出開放式問題，絕不要使用人為捏造的多選題。虛構的行業選項會誤導使用者，顯得像是你在替使用者做決定；讓他們用自己的語言來描述（他們實際的業務、客戶的專案或任何靈感）。請將結構化的選擇題（在 Claude Code 中使用 AskUserQuestion；在其他環境中使用明確的二選一/多選一提問）保留給下方真正可枚舉、影響較小的選項——藝術風格、鏡頭風格以及品牌包訂製方式——即使在這些選項中，也要提示使用者可以自由發揮（例如「其他」）。只詢問你無法合理設定預設值的內容。需涵蓋：

1. 專案主題（使用開放式提問，非多選題）— 「這個世界應該關於什麼？您的業務、客戶的專案，或者任何奇思妙想——一句話或簡短詞組皆可。」 獲取行業/產品 + 一句話簡介（例如「一家波霸奶茶店，從茶葉採摘到最後一口」），以及品牌名稱（若無，後續由你提出建議）。

2. 品牌視覺包 (Brand kit) — 提供三種方式供選擇：

   • 從網址匯入：higgsfield marketing-studio brand-kits fetch --url <site> --wait（自動擷取名稱、色彩、語氣）。擷取後使用 brand-kits list --json 讀回確認。
   • 使用者直接提供：色卡 Hex 值 + 名稱 + 品牌語氣。
   • 由你提案：提出一套配色 + 名稱，供使用者確認。
     收集 4–6 個帶名稱的 Hex 色值、一個顯示名稱，以及一兩個品牌語氣關鍵字。

3. 視覺風格 (Art direction) — 預設為「柔和啞光 low-poly 黏土微縮模型 (clay diorama)、等角透視 (isometric)、移軸微型 (tilt-shift)、暖光」。也可提供其他備選（扁平紙雕、光澤玩具、黏土動畫、霓虹夜景）。一旦選定，即作為通用的風格前置詞 (style preamble)，原封不動地套用到每個場景的 prompt 中（這是維持整個世界視覺一致性的關鍵）。

4. 鏡頭風格 — 務必詢問；這是影片的靈魂所在，而非技術細節。 依感覺向使用者提問（在 Claude Code 中使用 AskUserQuestion；在其他環境中使用普通提問），將結果記錄為 CAMERA。各選項對應至 Step 4 的架構——Step 4 負責實現該選擇，絕不重新決定：

   • 「穿梭世界 (Fly through the world)」 — 鏡頭深入每個場景，拉起並飛出，橫跨微縮世界飛向下一個場景；視角不斷變化，帶有富有表現力的大幅度空中運鏡（這是旗艦 Demo 的經典視覺）。
     → 架構 B。推薦作為微縮模型/黏土風格的預設首選。
   • 「連續漫遊 (One continuous walkthrough)」 — 單一向前的平滑飛行鏡頭，直接穿越每個場景進入下一幕，中途從不拉遠；每個場景都保有表現力但始終向前的運鏡（參閱運鏡語法表）。
     → 架構 A。推薦作為寫實/真實感風格的預設首選。
   • 「固定等角滑動 (Locked isometric glide)」 — 鏡頭在整部影片中保持固定視角，如同 Emons 風格；世界在眼前/向後滑動，沒有旋轉，沒有揭幕感。
     → 架構 A + 在每個分段 prompt 中加入 fixed-iso 約束條款 (prompts.md)。
     各用一句話說明其利弊（B 在接縫處會反轉運鏡方向——在微縮模型中別具趣味，但在寫實風格中較突兀；locked-iso 最平緩且重新生成的成本最低；walkthrough 則介於兩者之間）。

5. 旅程規劃（章節區塊） — 鏡頭順次飛過的場景序列。依據主題本身的價值鏈提出一套規劃供使用者修改。5–7 個場景效果最佳。
   以珍珠奶茶為例：茶園 → 珍珠廚房 → 旗艦門市 → 外送過程 → 社區廣場 → 明星產品。每個章節需要：簡短的場景描述（微縮模型裡的故事內容）、小標題 (eyebrow)、大標題 (headline)、一行內文，以及 0–3 個標籤氣泡 (tag pills)。最後一個章節通常是明星產品 + 行動呼籲 (CTA)。

6. 行動裝置版本 — 務必主動詢問；切勿暗中同時生成雙版本。 提供兩個選項供選擇（在 Claude Code 中使用 AskUserQuestion；在其他環境中使用普通提問）：
   「是否需要針對行動裝置優化的版本？行動裝置版本是第二條獨立的鏡頭鏈，採用 9:16 豎屏 原生渲染——專為手機螢幕構圖，而非直接裁剪橫屏影片——這大約會增加一倍的 Higgsfield 額度消耗（請註明預估數量）。」
   選項：「僅桌面端 (Desktop only)」 / 「桌面端 + 行動裝置端（原生 9:16 — 約 2× 額度）」。必須向使用者明確告知額度成本，而非僅僅含糊帶過。
   選擇結果的影響：

   • 是 → 渲染平行的 9:16 豎屏鏡頭鏈，並作為行動裝置端變體交付（Step 6 / pipeline.md §6b）：豎屏起始畫布 → 9:16 深入 short & connector（接縫幀鎖定基於其專屬渲染）→ 寬 720 的 -m.mp4 編碼 → stillMobile 豎屏 Poster。串接 clipMobile/connectorsMobile/stillMobile（Step 7）；執行完整的行動裝置端 QA（Step 8）。需預留約 2N-1 次額外影片生成 + NSFW 重新生成的額度。
     切勿預設將中心裁剪版本作為行動裝置端版本交付——若額度無法支撐豎屏渲染鏈，請主動說明，並提供裁剪編碼版本（pipeline.md §6）作為須經使用者確認的明確標示權宜之計。
   • 否 → 完全跳過行動裝置端編碼與程式碼串接。引擎針對手機的強化優化（Seek 合併、iOS 預熱、安全區域 CSS）將始終保持開啟狀態——這不屬於「行動裝置端版本」，只是確保頁面在手機造訪時不會破版——因此僅桌面端的構建也能優雅降級適配。

7. 預算 — 依成本展示渲染引擎，在渲染任何內容前即確定。 呈現渲染梯隊（使用 AskUserQuestion），接著計算並向使用者報告 N 個場景的預估總費用——N 張靜態圖 + (2N−1) 個影片短片 [若含行動裝置端則影片數 ×2] + ~15% 重新生成緩衝——獲得同意後再開始生成。

   • 影片梯隊（僅列出可用清單——所有選項均會進行接縫幀鎖定，Step 4）：

     梯隊	模型	粗估成本
     草稿 / 預預覽 (Draft / previz)	seedance_2_0_mini (720p)	約為 Standard 的 ¼
     標準 (Standard，預設)	seedance_2_0 (1080p)	基準線
     備選 (Alternate)	kling3_0 (原生 720p)	≈ Standard；不同視覺質感 + 內容過濾策略

     Draft 同時兼作預預覽 (previz) 路徑：低成本跑完完整影片鏈，確認整個旅程節奏後，再用 Standard 重新渲染最終分段（pipeline.md 附註）——當餘額較緊時建議主動提示此選項。

   • 後端 — Monid 是影片鏈的預設計費管道（Step 0.1；程式碼串接見 pipeline.md → Monid 後端）。同樣的 Seedance 2.0，按片計費以 USD 結算而非額度。計價公式按 Token 計算：width × height × 24 × seconds / 1024，費率為每 1M Token $7 (480p/720p) 或 $7.7 (1080p)——實測：1080p 8 秒深入短片 ≈ $2.99，5 秒銜接短片 ≈ $1.87；720p ≈ $1.21 / $0.76；480p ≈ $0.28 / $0.35。一個 N=6 的桌面端影片鏈在 1080p 下約需 $27 / 720p 下約需 $11，對比 Higgsfield Plus 月費版（約 $32 / $16）——單片成本便宜約 15%，與 Plus 年費版持平；對於單次專案構建在結構上更為划算（按需付費，無月度過期限制）。在 Monid 上，Draft/previz 梯隊即為同一 Endpoint 切至 480p——無須更換模型，因此 previz→最終版在機制上保證模型一致。請對照估算費用顯示 monid balance；當使用者更偏好使用其訂閱額度、餘額不足或必須使用 kling3_0（僅 Higgsfield 提供）時，退回使用 Higgsfield 額度（依上述各模型梯隊）。兩者底層採用相同的模型（seedance_2_0 對應 Monid 的 seedance-2.0），因此在另一管道接續完成未完的影片鏈是合理的救急方案——但服務堆疊有所不同，跨提供商的接縫特性未經測試：請目測...