文件 / 02
Cinematic UI 的運作原理
網站是一部以捲軸為播放頭的電影。了解 Cinematic UI 背後那條「借機制、不借戲服」的核心規則，以及它和一般「做高級一點」提示的差別。
核心想法
網站是一部以捲軸為播放頭的電影。區塊是場景，視窗是畫格，一次捲動是一個剪接或一次運鏡；訪客是觀眾、是剪接師，還有一次機會成為參與者。Agent 的工作不是裝飾版面，而是決定觀眾看到什麼、依什麼順序、從哪個位置、在什麼光線下、畫面由什麼構成、撐多久，以及為什麼。
整個 skill 只靠一條規則：借電影的機制，不借電影的戲服。
導演風格是一組決定：鏡頭站哪、一顆鏡頭撐多久、光藏住什麼、怎麼剪、畫面由什麼構成。這些會被翻譯成頁面上的結構、動態、媒材與材質。片名、角色、道具和台詞不會出現在產品的 UI 上，除非你明確要求致敬。
電影的決定被留下來，道具則留在片場。最後落到頁面上的，是開發者做得出來、訪客指得出來的東西。
劇組分工
電影裡的每個職位，在網站專案裡都有對應。製片是 brief，編劇是在任何版面之前就寫好的真實文案，導演是 agent 本身，只有一個觀點。主角是整支作品裡視線跟隨的那個對象，而且它必須改變。攝影指導決定媒材，燈光師安排光線，剪接師掌管捲動節奏與剪接，調色師掌管調色。聲音預設靜音，要你開口才會有。
跟一般做法差在哪
| 常見的「做高級一點」 | Cinematic UI |
|---|---|
| 選一個風格套到版型上 | 依產品的「戲劇問題」選導演，萃取 5–7 個看得到的機制 |
| 預設同一種長相（通常是亮面 3D 或玻璃） | 從電影推導媒材：水墨、鉛筆、賽璐珞、像素、印刷、霓虹、純字體、攝影，或 3D |
| 設計一個 hero，其餘填區塊 | 每一場都有分鏡：節拍、景別、鏡頭、運鏡、走位、光、剪接、長度 |
| 自己編假圖頂著 | 素材通告：一次問清楚：你提供、免費授權圖庫、AI 生成，還是改鏡頭 |
| 元素進畫面就淡入 | 單一時間軸；場與場之間的每個剪接都是決定 |
| 「看起來不錯」 | 試片：三種視窗的聯絡表、五格原尺寸檢查、具名修正 |
| 每個網站長得像親戚 | 作品紀錄＋骨架檢查，下一部必須和前三部不同 |
為什麼是機制，不是氛圍
企劃書裡每一句風格主張，都必須指出畫面上看得到的東西。「有氛圍」不是機制；「鏡頭鎖定在廣角構圖不動，只有一個元素在動」才是。每個機制都要通過兩個問題：開發者能不能照這句話做出來？觀眾能不能在畫面上指出來？
這也是這個 skill 沒有固定片單的原因。任何一部電影都可以被選為範本，並且當場調研。重點是從一段具體的片段萃取決定，而不是重複導演的名氣。