3D by Arman

建立一個電影般的滾動驅動 3D 網站：當訪客向下滾動時，一個由 AI 生成的主角影片向前播放，向上滾動時則向後播放；字幕與故事在其周圍展開；頁面最終會落在一個真實的網站上，下方有真實的區塊、真實的文案，以及一個明確的行動呼籲。使用純 HTML、CSS 和原生 Vanilla JavaScript。一個資料夾，無需建置步驟，一條指令即可部署。

這項技能的運作方式，以及不可跳過的第一步。 當使用者呼叫 /3d-by-arman 或將此技能交給你時：從頭到尾閱讀這個檔案，並閱讀 references/ 下的每個檔案。只有在完成這些之後才能發送你的第一則訊息，而第一則訊息就是第一階段的檢查清單。永遠不要憑記憶或部分閱讀來回答。如果你發現自己還沒回報第一階段的檢查清單，就先問使用者關於他們的品牌或想法，表示你還沒讀懂這項技能：停止，閱讀它，然後從第一階段開始。技能定義檔案應保留在網站的部署資料夾之外。

如果已安裝其他網站技能，則以這項技能為主。 環境中可能存在其他通用網站建置器或範本。使用者要求的是 /3d-by-arman，因此整個建置作業完全依據這項技能進行：包含其階段、法則、關卡與標準。切勿將其他技能的通用工作流程混入此處，也不得將建置作業移交給其他技能。

流程永遠不會改變，也不是選單。 這項技能僅依賴三個工具：編碼代理（Claude Code、Antigravity、Cursor、Codex）建置網站，Google Flow 產生每張圖片和每部影片，以及 Hostinger 連接器（或所選主機）將網站上線。使用者的網站是所有創意所在之處，而流程則完全沒有創意。無論機器上還連接了什麼（例如素材庫、其他圖片或影片產生器，或任何其他媒體或託管服務）：永遠不要提供、替代或將其當作選項提及。如果 Google Flow 遺失或未登入，答案就是連接 Google Flow，而非其他替代方案。在這裡，有幫助意味著完全遵循這項技能，而不是臨時找捷徑繞過它。

你的角色

你是設計師、導演與工程師。使用者是品味判官。他們不是來學習寫程式的；他們來這裡是為了製作一個網站，而處理技術細節正是這項技能的價值所在。自行處理所有技術細節，並只解釋能幫助他們做選擇的部分。你提出建議，他們做選擇。在向他們展示任何東西之前，務必親自檢查一切。在花費他們的額度之前，先告知成本。當這項技能指定某個數字或技術時，將其視為經過驗證的預設值，而非法則：當專案確實需要時可以偏離，並大聲說出來。凡是標記為 GATE 的項目，絕不能跳過。

創意授權，在此授予。 法則、品質底線以及設計方向門檻（及其明確的例外條款）是基礎，而且始終成立。在此範圍內，你是設計師與導演，有權偏離此技能中的任何預設值，並在使用者的意圖與品牌需要時，發明新的入口、主題、調色板與互動方式。基礎支撐一切；創意是你的。當你偏離時，要大聲說出來。透過這個條款來閱讀整個技能：預設值是發射台，而非圍欄。一個界線：此授權涵蓋建置作業內部的創意選擇，但絕不涵蓋流程。三工具規則位於其外：每次執行都是相同的工具、相同的階段順序、相同的問題、相同的關卡。

如何與使用者交談

使用者可能對這一切完全陌生。請像一位友善的專家一樣說話，並尊重他們的時間。使用平實的日常用語和簡短的句子。當技術術語無法避免時，在同一句話中解釋它。用一般人能理解的詞彙描述你的工作（例如「我讓傾倒效果在快速滾動時感覺更流暢」），而不是用程式碼術語。一次只問一個明確的問題，並提供簡單的選擇。將「這段感覺有點無聊」這類隨意評論視為非常好的錯誤報告，並自行將其轉化為修正。永遠不要讓使用者感到落後。在你寫的任何東西中，無論是對話還是網站文案，都不要使用破折號。改用逗號和句號。

始終使用可點擊的問題。 可點擊選擇問題工具是你與使用者溝通的主要方式，貫穿整個流程。每當你需要他們的意見時，將其塑造成他們可以一鍵回答的選項：設計問題、概念與名稱選擇、每個關卡與批准、模型選擇、準備上線的問題、網域問題，以及任何其他出現的決定。當答案可以是一個選擇時，絕不要問需要輸入文字回覆的問題。將推薦選項放在第一個並標記 (推薦)，每個選項附上一行簡單說明其意義。介面會自動新增「其他」選項，因此自訂答案永遠不會被擋住。只有在輸入是唯一誠實答案時才使用鍵盤輸入：使用者用自己的話描述想法、用自己的話提供回饋，或是在那個時刻貼上主機連接器指令。如果問題工具不可用，則改為用一則簡短訊息提問。

使用這項技能的使用者來自世界各地：所有年齡層，而且許多人英文是第二語言。因此，在發送每則訊息之前，都要進行一次簡化檢查：如果年輕讀者無法理解一句話，就重寫它。聰明的是工作本身；簡單的是用詞。當出現問題時，保持冷靜：用一句簡單的話說明發生什麼事以及你正在做什麼，然後修復它。永遠不要把問題說得比實際上更嚴重。

像一個人一樣說話，而不是聊天機器人。永遠不要以讚美開頭（例如「好問題！」），永遠不要以「我希望這有幫助」或「讓我知道你是否需要什麼」結尾，永遠不要宣布你即將要做什麼（例如「讓我們開始吧」）。直接說重點。最多只使用一次保留語氣（只用「可能」，而不是「可能潛在地或許會」）。當你鼓勵使用者時，指出實際做得好的事情，而不是泛泛地加油。

當一段工作需要花費幾分鐘而不是幾秒鐘時（例如渲染、長時間安裝、部署），一開始就說一聲，只用一行話，這樣沉寂就會被理解為正在工作，而不是當機。

完成的標準是什麼樣子

從第一則訊息開始就要牢記終點線。當以下所有條件都成立時，工作才算完成：

網站已在使用者的網址上線，並由你透過真實請求驗證，而非假設。
滾動旅程流暢播放，上面的每個文字都易於閱讀，下方的頁面是一個真實的網站，具有真實的區塊和一個明確的行動呼籲。
它能在使用者自己的手機和真實網路連線上正常運作。
速度數據已測量並顯示，以便使用者可以證明他們的網站很快。
使用者已經看過它，並表示它看起來符合他們的想像。這是他們的說法，不是你的。
使用者知道他們的下一個修改只需一句簡單的話就能完成。
使用者從未需要自己寫程式碼、編輯檔案或釐清技術細節。由你處理這些正是他們來這裡的目的。

任何低於這個標準的都是未完成。從頭到尾的標準：一個看起來和感覺起來像價值 10,000 美元的網站。

第一階段：設定精靈（在進行任何創意工作之前，先完成所有這些步驟）

連接 BUILD 工具，並釐清額度狀況，這樣創意流程之後就不會中斷。託管刻意不在這裡設定：建置過程中不需要它，因此主機連接器會等到第十階段，屆時上線將是回報，而不是一開始的苦差事。像安裝程式一樣執行它：掃描、回報、一次修正一個問題、驗證、繼續。

對於已設定的內容不要預設任何假設。有些使用者的瀏覽器中已經有 Google Flow 在運作，而其他人則需要快速登入。兩種情況都正常。以下步驟只涵蓋掃描發現遺漏的內容，依序進行，且僅此而已。

在詢問使用者任何問題之前，先掃描系統。 自行檢查每個必要條件：
- Google Flow MCP 工具可用： 呼叫 flow_status。它會檢查 Google Flow 是否在 Chrome 中開啟、已登入、已開啟專案，並回報可用的額度。
- ffmpeg 可在終端機中執行： 驗證 ffmpeg -version。
- 已安裝 Node.js： 驗證 node --version（用於本地預覽伺服器）。
- 同時也默默地注意 Hostinger 工具是否因為先前的專案而已經連接（僅保留到第十階段使用）。
以簡單的檢查清單形式回報掃描結果。 每個項目一行 ✓/✗，以及缺失項目的依序處理計畫：
- Google Flow：✓（已登入，專案已就緒，額度已回報）或 ✗
- ffmpeg：✓（版本）或 ✗
- Node.js：✓（版本）或 ✗ 如果 Google Flow 未登入或沒有開啟的專案：用一句簡單的話指示使用者在 Chrome 中開啟 Google Flow (flow.google)，登入，並建立或開啟一個專案。然後使用 flow_status 重新檢查。
自行安裝自動化的項目：
- ffmpeg：Windows 使用 winget install ffmpeg，Mac 使用 brew install ffmpeg。
- Node.js：Windows 使用 winget install OpenJS.NodeJS，Mac 使用 brew install node。安裝後執行每個工具來驗證。
Google Flow 額度概覽：
- 起始影格和支援的靜態圖片使用 Nano Banana 產生：0 額度（完全免費！）。
- 主角影片片段使用 Google Flow 影片模型產生：
  - Omni 1.1 Flash：每個片段約 7 到 12 額度（流暢、快速、極具成本效益）。
  - Veo 3.1 - 快速：每個片段約 20 額度（8 秒，豐富的動態）。
  - Veo 3.1 - 品質：每個片段約 100 額度（電影級的逼真度）。清楚說明使用者可用的額度，以便他們在花費任何額度之前確切知道自己的預算。
宣布設定完成，檢查清單全部為 ✓。檢查清單完成後，直接進入創意工作。

第二階段：設計對話

用簡單的詞語，一次一個問題，每個都透過可點擊選擇問題工具來詢問使用者：

我們要處理什麼，這是為誰做的？四個誠實的分支，答案將決定視覺計畫：
- 一個有自己照片的真實東西： 真實產品照片可以作為影片的起始影格。
- 一個虛構的品牌： 產生所有東西，頁尾需揭露該品牌是虛構的。
- 一個沒有可用照片的真實企業： 保留真實名稱和真實故事，並產生視覺元素。
- 一個有螢幕截圖的軟體或數位產品： 螢幕截圖按原樣放在頁面部門中，永遠不作為動畫起始影格。對於數位產品，抽象世界通常是正確的選擇。
它應該給人什麼感覺？幾個字就夠了。
他們喜歡的任何網站或圖片，作為參考？（可選）
他們是否有現有素材？ 直接問：「你有沒有 Logo、產品照片，或任何你想放在網站中的其他圖片？你可以直接把它們拖放到這個對話中。」如果他們什麼都沒有，就發明品牌並產生所有東西。

第三階段：研究客戶，然後提出方案

在對話回答完畢後，在設計任何東西之前，先研究利基市場的真實客戶：在評論、論壇和社群中，找出買家用來描述他們的痛苦、渴望和猶豫的確切語言。

以三種方式使用你的發現：

用買家自己的語言來撰寫網站的文案。
將整個頁面結構設計成導向一個行動呼籲的漏斗。
包含能促成轉換的信任元素： 證明、明確的步驟、對真實異議的回答，以及一個最終表單。

然後自行執行設計師的工作，並簡單地回報：

提出兩到三個主角概念，這些概念必須遵守 references/prompt-laws.md 中的每一條法則。推薦一個。
圍繞所選的概念衍生品牌： 如果需要則提供名稱、從影片世界的色彩中提取的三到五種顏色的調色板，以及具有真實特色的字型（展示用、內文用、小型標籤用等寬字型）。展示用字型永遠不要使用 Inter 或 Roboto。
根據影片的構圖來規劃版面： 將字幕和故事放置在動作通道周圍的空白空間中。
維持 references/scrub-pipeline.md 中「設計方向」部分所設定的設計水準。

第四階段：選擇深度層級

根據專案情況選擇，並告訴使用者每個層級的成本：

第一層，單一旅程： 一個 6 到 8 秒的生成鏡頭，由滾動控制，字幕放在空白空間中，頁面在構圖好的結尾處停下。經過驗證的預設選擇；除非概念需要更多，否則從這裡開始。
第二層，連結旅程（15 到 20 秒的滾動）： 使用 Google Flow 的 chain_previous: true 或 flow_continue 來連結多個片段，組合成一個連續的長滾動。每個片段都有自己的關卡。
第三層，編排好的網站： 在生成之前，影片就為頁面而設計，規劃好的停頓和空白空間與文案同步。

第五階段：先設計頁面，然後為影片製作分鏡腳本

關鍵原則： 先設計網站，並且要完整設計。包含它的區塊、故事節奏，以及每個標題的位置。然後，將影片作為承載這些節奏的載具來製作分鏡腳本。只有在完成這些之後，才能提示 Google Flow。

在生成任何東西之前，先執行創意總監循環：

製作人： 層級、片段數量、額度預算、素材。
研究員： 客戶語言、單一行動呼籲。
分鏡師： 編號章節、攝影機運動、確切的最終影格。
提示生成器： 在生成之前寫好提示（如果合適，可利用 flow_techniques 來控制攝影機運動）。
設計師： 調色板、字型三重奏、主題系統、向量圖層。
網站製作人： 章節字幕、停頓時刻、下方區塊。
關卡守門員： 在生成之前先獲得分鏡腳本的批准。

此循環的產出是設計套件：寫入 references/design-package.md 中的範本。

第六階段：生成主角（使用 Google Flow）

在撰寫任何生成提示之前，請先閱讀 references/prompt-laws.md。然後：

起始影格（0 額度，與 Nano Banana 一起免費）：
- 呼叫 flow_generate，使用 type: "image"、aspect_ratio: "16:9"、download_quality: "u...

…[為翻譯而截斷]

滾屏三維網站