激活合約
適用於任何技術棧的網站/登陸頁面，或是由程式碼渲染的影片（作品集、宣傳片、發表短片），並採用運動設計師常用的視覺語言：滿版扁平色塊、超粗全大寫字體、單色 HUD 角落標記、節拍同步動態文字，或 3D Riso 印刷著色器。不適用於儀表板、文件網站或表單為主的應用。
嚴格規則
- 以下所有路徑均相對於此技能的資料夾（
SKILL_DIR）；請使用node "$SKILL_DIR/assets/palette/palette.mjs" …執行工具。 - 以使用者的語言回覆；網站/影片文案請使用專案的語言。
- 在開始設計或編碼之前，務必完成引導流程。絕不硬編碼十六進位色碼：所有顏色皆來自
palette.mjs的角色 token（ink、bone、action、machine、on-*、hud-on-*）。 - 欄位上的文字使用
on-<field>；切勿將forbiddenPairs組合用於文字/背景。 - 每個場景只使用一個招牌動作；交替強弱節奏；連續三個場景不得使用相同角色的欄位；關鍵姿勢至少停留 1 拍；只使用一種緩動系列。
- 網頁：僅對 transform/opacity 進行動畫；尊重
prefers-reduced-motion（靜止終態、無迴圈、無 pin）；暫停離屏畫布的動畫；僅在寬度 ≥1024px 時使用 pin；375px 寬度下不得出現溢出。 - 絕不虛構見證、指標或客戶；保留現有內容。
- 拒絕反套路清單中的內容（
references/design-system.md§8）。
決策閘門
| 情況 | 行動 |
|---|---|
| 字體驅動、扁平色塊 | 瑞士動態：使用 design-system.md、assets/web、assets/video |
| 3D、觸覺、海報/印刷 | Riso 著色器：使用 shader-print.md、assets/shader/ |
| 兩者兼具 | 混合模式：在扁平區域的動態文字後方使用著色器欄位（on-* tokens） |
| 已知品牌色 | `palette.mjs --brand "#HEX" --format css |
| 使用預設 | --list（顯示名稱、標籤、色票）→ --preset <name> |
| 驚喜我 | 從 README、文案、CSS、使用者詞彙推斷產業/氛圍 → --surprise --mood "<tags>" --seed <n>；說明原因；可透過 --exclude <name> 重新生成一次 |
| 網站 | 參考 references/web-techniques.md；將 assets/web/* 調整至目標技術棧 |
| 影片 | 複製 assets/video/reel-template/；參考 references/video-pipeline.md |
| 網站 + 影片 | 先將影片作為故事腳本，再從相同場景建置網站 |
執行步驟
- 偵測輸出類型（網站/影片/兩者）與技術棧；閱讀現有內容與品牌資產。
- 引導流程，每次只問一個問題：風格（瑞士動態 / Riso 著色器 / 混合模式 / 驚喜我），然後調色盤（品牌色 / 預設 / 驚喜我）。
- 字型來自預設的
fontPairing或design-system.md§2。BPM：建議使用 120（在 30fps 和 60fps 下每個拍子為完整幀數；60fps 下也可用 144/150）；其他節奏則將拍子四捨五入至整數幀。 - 使用標準節奏（§7）編寫場景表格：
# | scene | field role | signature move | beats。 - 從對應的資產開始建置。
- 品質檢查：網站 →
assets/qa/qa-screenshots.js（1440 + 390、溢出檢查、主控台），需在動畫穩定後才進行判斷；影片 → 測試幀、完整渲染、ffprobe、聯絡表。 - 回報結果以及無法驗證的項目（例如音訊不會被收聽）。
輸出合約
回傳：調色盤（含驚喜理由）與對比摘要、場景表格、已建立/修改的檔案、QA 證據路徑、已知限制。
參考資料
references/design-system.md— 角色、字體、時間、緩動、動作、節奏、反套路。references/palettes.md— 引導流程、預設、token 格式。references/web-techniques.md— GSAP/Lenis/canvas、無障礙、效能。references/video-pipeline.md— 確定性畫布 → 無頭瀏覽器 → ffmpeg、音訊。references/shader-print.md— WebGL2 光線追蹤、三色網點、錯位。