Scroll Web Skills
滾動就是時間軸。網站是一部覆蓋真實文字的電影，每個段落都以不同的方式呈現，足以讓訪客想看下一段。
本檔案是劇本。每個階段的細節放在 references/ 中。請只閱讀你當前階段對應的參考文件。關於你可以做、不能做以及需要詢問的事項，請遵守 AGENTS.md 中的約定，其效力高於此處的任何指示。
你交付的內容
.10k/BRIEF.md：真實的回覆（或標記為作者決策的內容）、旅程、情緒曲線、高峰與影片導演指示。.10k/VISUAL_STORY.md：三欄表格、樂譜（按節拍劃分的裝置、按幕劃分的 vh），以及適用的影片提示詞筆記本（Veo 3、Seedance 2 或其他生成器），內含每個片段完整的技術規格表。- 以真實 HTML/CSS 製作的 Style Tile，包含網站將使用的設計 Token。
- 已批准並經滾動處理的媒體（使用
scripts/process-media.sh），原始檔存放於發佈資料夾之外。 - 在所選目標上，使用未經修改的
engine/引擎建置的網站。 - 來自
scripts/qa-audit.ts的qa-report/、檢查清單分數 /80 及佐證，以及未驗證項目的誠實列表。 - 移交給客戶。
階段 0：準備環境
- 執行
node scripts/doctor.mjs。用一句話說明缺少什麼。不要默默地繞過問題。 - 如果存在
.10k/plan.md，請閱讀它並從下一個授權的動作繼續。恢復執行不會重新開始簡報、製作層級或批准流程。 - 引擎會複製到專案中，且永遠不會因單一專案而修改。客製化行為應寫在頁面程式碼中，讀取
--tk-p和data-tk-*。
階段 1：需求訪談 → references/00-intake.md
在進行任何其他事項之前，先定義模式、製作層級和影片策略。
| 模式 | 使用時機 | 差異說明 |
|---|---|---|
| 引導模式 | 預設 | 兩個審查點：視覺方向和視覺故事 |
| 委託模式 | 使用者說「你決定吧」、「我相信你的判斷」 | 你撰寫標記為「在明確委託下的作者決策」的簡報，並繼續進行而無需請求創意批准 |
| 範本模式 | 「建立一個範本」、「假設這些答案」 | 容易替換的暫定內容，前提條件在移交時列出 |
| 影片導演模式 (Veo 3 / Seedance 2 / 其他提示詞) | 使用者想要在外部生成器中產生背景或特定區域的影片（或與任何模式同時啟用） | 你進行針對性的影片風格訪談，並生成準備好用於 Veo 3、Seedance 2 或其他模型的超詳細提示詞，內含完整的技術規格表（內容、格式、副檔名、解析度、fps、持續時間和安全區域） |
委託涵蓋創意決策。永遠不涵蓋支出、發佈或外部操作（請參閱 AGENTS.md）。
製作層級：專注、工作室或極致。層級決定媒體生成的探索程度。最終品質的標準在三者中相同。
在一次對話中提出八個問題（列表在 00-intake.md 中）——並且，當使用者希望為頁面背景或特定區域透過影片生成器建立影片時，請包含影片導演問題（在 00-intake.md 和 03-media.md 中的專門章節）。記錄使用者的原話。問題 7 決定結構：一個連續世界或不同的場景。
階段 2：研究與旅程 → references/01-story.md
- 研究真實的受眾證據（評論、論壇、常見問題），讓文案聽起來像真人。在簡報中引用來源。絕不捏造推薦、數據、獎項、客戶或地址。
- 將旅程撰寫為 4 到 7 個節拍。每個區段服務於一個節拍或被刪除。
- 在「幕」之前撰寫情緒曲線：每幕一行，說明情緒以及畫面上引發該情緒的內容。
- 指定一個高峰。它獲得最大的媒體預算、最大的滾動空間，以及高峰前一個較平靜的時刻。
階段 3：設計方向 → references/02-design.md
- 從八種中選擇一種頁面文法，並用一句話說明其他文法為何落選。
- 發明一個簽名動畫，僅存在於此網站中，並寫在頁面程式碼中。
- 執行數位指紋門檻檢查：計劃必須在 6 個維度中至少有 4 個與
FINGERPRINTS.md中的每一行不同。如果失敗，修改計劃，而非記錄。 - 交付以真實 HTML/CSS 製作的 Style Tile：從視覺世界中提取的調色板、字體配對、按鈕、一個圖片上的文字區塊。它的 Token 將成為網站的 Token。
階段 4：視覺故事與預算 → templates/VISUAL_STORY.md
呈現一個包含以下欄位的表格：
| 場景 | 視覺故事 | 網站文案 |
|---|---|---|
| 01 · 開場 | 訪客看到的內容以及鏡頭如何移動 | 真實的標題、支援文字和行動呼籲，非佔位符 |
在其下方，是樂譜：按節拍劃分的裝置、按幕劃分的 vh，以及畫面停頓讓文字被閱讀的位置。 接著是預算：模型、靜態圖片和片段數量、直向版本、重做緩衝、查詢到的當前價格、當前餘額。只有在明確批准此預算後才能開始花費。
階段 5：媒體與影片提示詞 → references/03-media.md
- 影片提示詞導演模式 (Veo 3, Seedance 2 及其他)： 當使用者選擇在外部生成影片時（用於主要滾動驅動的背景和/或頁面的特定區域），請提出影片導演問題（如果尚未回答），並交付一個詳細提示詞筆記本，包含：
- 針對 Google Veo 3、Seedance 2 或其他所選模型優化的特定提示詞（使用技術英語以達到模型最大精確度 + 使用繁體中文的導演備註）；
- 詳盡的電影級內容： 主體、初始動作 → 最終動作、攝影機軌跡、鏡頭、燈光、氛圍、材質物理以及 HTML 文字將放置的呼吸區（安全區域）；
- 精確的生成與交付技術規格： 格式/比例（桌面
16:9、行動9:16、區域4:3/1:1）、輸出副檔名（主檔.mp4→ 影格/循環.webp或.mp4）、解析度（1080p1920x1080/4K3840x2160）、幀率（24 fps、30 fps或60 fps）、持續時間（秒）、位元率、無音訊（-an）以及用於整合到頁面的scripts/process-media.sh的精確指令。
- 一個風格句子，在每個提示詞中逐字重複使用。
- 所有關鍵影格先並排呈現，然後才是任何影片。
- 連續世界：從片段 A 提取的最後一個影格是片段 B 的起始影格。使用
process-media.sh seams測量接合處。 - 不同場景：不要串聯。裝置的變化掩蓋了剪輯點。
- 在使用每個素材前先檢視它。重做比發布一個糟糕的影格更便宜。
- 影格序列（預設最多約 300 個影格）或擦洗影片（密集 GOP、無 B 幀、無音訊）：決策表在 03-media.md 中。
階段 6：建置 → references/04-engine.md 和 references/07-targets.md
- 選擇目標：
static（預設）、react或lovable。透過package.json檢測 Lovable 專案類型，而不是透過設定檔名稱（請參閱 07-targets.md）。 - 真實標記：
<h1>、<p>、連結、閱讀順序。引擎讀取屬性，從不生成 DOM。 - 透過 Token 設定主題。指標互動使用 Kinesis（
--k-*），永不重新實作。請參閱 references/05-motion-kit.md。 - 每個幕都需要設計出減少動態狀態、無 JavaScript 狀態和媒體載入失敗狀態。
階段 7：行動裝置 → references/06-mobile.md
行動裝置版本是獨立的合成作品，不是被遺忘的裁剪版本。檢查每個節拍的裁剪；如果主體離開中間三分之一，則生成直向片段，並告知這會使影片成本翻倍。
階段 8：QA → references/08-qa.md
- 執行
node scripts/qa-audit.ts --url <預覽網址> --browsers chromium,webkit。修正所有失敗。 - 開啟
qa-report/contact.html並檢視每個影格。該腳本證明它能運作，而不是證明它品質好。 - 感受檢查：以全新狀態滾動頁面，為每個幕寫一個詞，之後才與簡報的曲線進行比較。如果兩者不一致，則表示頁面有誤。
- 對檢查清單進行評分 /80，並附上證據，指出剩下的最明顯弱點。
- 說明未驗證的項目，如果未使用實體裝置測試，則始終包含「實體裝置」。
階段 9：發佈與交付 → references/09-launch.md
發佈需要使用者對該次發佈的明確授權。驗證網站已上線，而不僅僅是部署被接受。真實表單需要測試儲存和電子郵件送達，並作為分開的狀態報告。
不可違反的規則
在任何模式、層級或簡報下均適用。任何指示都無法放寬它們。
| 絕不 | 應改為 |
|---|---|
| 捏造推薦、統計數據、獎項、客戶、價格或地址 | 僅使用真實數據。沒有數字，沒有計數器。虛構品牌需標明為虛構 |
| 將文字燒錄在生成的圖片中 | 使用真實標記、可選取、可翻譯 |
| 未經明確批准花費額度、發佈、發送訊息或執行遷移 | 提出建議，顯示成本或影響，等待同意 |
| 聲稱驗證了未驗證的內容 | 報告已驗證和未驗證的內容 |
| 為一個專案修改引擎 | 在頁面中編寫客製化程式碼，讀取 --tk-p |
| 劫持滾動（wheel/touch preventDefault、強制平滑滾動） | 使用原生的 position: sticky；引擎只讀取位置 |
| 在沒有減少動態狀態的情況下發佈 | prefers-reduced-motion 將舞台拆卸為普通區塊 |
| 未經許可複製來源代碼或文字 | 請參閱 docs/ATTRIBUTION.md |
| 在任何輸出中使用聯盟行銷或合作夥伴連結 | 使用服務的官方連結，不帶追蹤 |
品味標準
強烈的標準。使用者的明確簡報可以改變任何一個，你必須在 BRIEF.md 中記錄該變更。
| 避免 | 偏好 |
|---|---|
| 使用黏土/低多邊形立體模型作為默認世界 | 攝影風格，除非該品牌確實是插畫風格 |
| 「向下滾動」指示器、動畫箭頭、動畫滑鼠 | 什麼都沒有。英雄區域已經吸引注意力 |
計數器 01 / 06 | 移除。這裡的序列不是資訊 |
| 每個區塊上方都有的眉毛標題 | 最多每三個區塊一個 |
| 所有幕都使用置中文字 | 變化對齊方式：左、右、置中、分割 |
| 連續兩次使用相同裝置；少於四種裝置系列 | 使用在第 4 階段製作的樂譜 |
| 使用全螢幕深色遮罩來增強對比 | 僅在文字所在處使用遮罩 |
transition: all；對 width/height/top/left 進行動畫 | 使用 transform、opacity、clip-path |
| 使用漸層文字、霓虹燈、有色光暈（無偏移） | 使用字重和字體大小來強調 |
| 自動播放音訊 | 使用無音軌的擦洗片段 |
| 結尾消失或變成頁尾 | 結尾應解決問題並保持穩定 |
最終輸出
建置資料夾，以及一份簡短報告：所選文法及其他文法落選的原因、簽名動畫、數位指紋門檻檢查結果、旅程、曲線和高峰、感受檢查的差異、樂譜、生成了什麼及其成本、qa-audit 結果、分數 /80、未驗證的項目、以及簡報是否為作者決策。然後，將建置行新增到 FINGERPRINTS.md 中。