文件 / 03

製作流程：從 logline 到交付的十個階段

Cinematic UI 用十個階段完成一次真正的製作：企劃、選導演、媒材與調色、選角、劇本、分鏡表、Animatic、拍攝、試片、交付。

整個製作依固定順序進行，每個階段都以一份文字或一個算出來的畫面收尾。所有文字都寫在建置檔旁邊的同一份文件 treatment.md 裡。它保持精簡（分鏡表和文案是主體），也是用來核對成品的依據。

1. 企劃

先找出產品的真相：它是什麼、給誰用、最重要的那個行動是什麼、有哪些話可以誠實地說。如果產品或頁面範圍真的無從得知，agent 只問一次，否則就自己決定並往前走。

接著寫 logline：一句話，講有人想要什麼、什麼擋在前面、什麼改變了。再寫觀眾弧線：他們進場時相信什麼、離場時相信什麼。每一場戲都是為了把觀眾沿著這條弧線往前推。

2. 選導演

選一位導演和他的一部電影，或直接用你指定的。選擇依據是產品的「戲劇問題」（它需要信任、驚嘆、親密、速度、秩序，還是機智），而不是類型聯想。Agent 研究一段具體的片段，萃取五到七個機制。詳見導演與電影。

它不會等你開口，直接在企劃書裡開一場試鏡：三位候選人，各三行（解決這個戲劇問題的機制、一個招牌鏡頭、風險、不適用的情況），留下一位，並記下另外兩位為什麼落選。勝出者還要通過一個測試：競爭對手能不能原封不動拿去用？能的話，它還不算一個方向。

它也會讀作品紀錄（~/.cinematic-ui/filmography.md，每部作品一行）。新企劃必須說明自己和最近三部作品在導演、媒材、形式、骨架、字體、主角、互動、結尾這幾項當中，至少有四項不同。

3. 選媒材

依電影決定畫面由什麼構成：觀察而來的（攝影、實拍影像）、建構的（擬真 3D）、手繪的（線稿、賽璐珞、繪製多層次景深、水墨）、設計的（平面圖形、印刷、字體）、強化的（霓虹、顆粒、漸變光）、元素的（墨、液體、布料）、手作的（定格動畫）。3D 舞台只是其中一種，不是預設，企劃書裡一定會有一句「為什麼不用 3D」（或「為什麼用 3D」）。詳見媒材與質感。

調色。 電影的色彩本身就是機制的一部分，所以要「選角」。Agent 蒐集六到十二張該段落的參考影格，用 grade-from-stills.mjs 量測，然後寫下調色規格：顏色從哪裡來、黑位、高光、使用與禁用的色相、顆粒、look 數值。沒有影格時，就用 look book 的起始值，並標明這份調色「未量測」。詳見調色。

世界觀與海報。 美術設計（形狀、材質、花紋、製作年代感、陳設密度、片中的平面設計）會被轉成 UI 對照表：邊框、格線、卡片、按鈕、分隔線、表單和頁尾。海報（POSTER）那一行則記錄首屏、OG 圖、片頭字卡和片尾字幕從電影主視覺借來的構圖語法。道具、標誌和海報本身都屬於戲服。

4. 選角與素材通告

為主角命名：一個物件、一種材質、一個人物、一款像角色一樣行動的字體，或一道光。導演決定鏡頭怎麼看它，而產品的動詞決定它做什麼。一個負責歸檔、倒茶、部署或連線的主角，至少要有三個看得見的狀態：早早埋下、在轉折處回收、在最後一個畫面收束。只會旋轉的主角，只是臨時演員。

接著是素材通告：一則訊息列出電影需要的所有素材與各自的取得方式。標誌、產品、人物、截圖和數字這類真實的東西，要由你提供。Agent 在承諾任何特寫之前，還會做一次選角測試：把素材放到那個尺寸看一眼，撐不住就換更好的素材，或改鏡頭。

5. 劇本

此刻寫下所有看得到的文字：標題、內文、標籤、行動呼籲和片頭字卡。以產品為先，讓一個沒聽過這部電影的讀者也完全看得懂。

6. 分鏡

先決定形式：長捲動電影、分章節的作品、以流動文件為主再加幾個重點場景，或是多個頁面。由產品的資訊決定，不是每個網站都該是戲劇化的長捲動。

在排列每一行之前，先填得獎檢查（award pass），也就是導演的機制如何抵達每一個畫格：世界物件及它抵達的每個地方（載入畫面、剪接、按鈕、進度、游標、頁尾）、主角的各個狀態、作為第一個鏡頭的載入畫面、剪接用什麼做、唯一的強調色和它的意義、字體切換與極端的展示字級、儀表、訪客的動詞，以及各種觸發方式。它濃縮自二十一個 Awwwards 得獎作品。

然後每一場一行，從 hero 到片尾：節拍、文案、景別、鏡頭與角度、運鏡、走位、光與色、陳設密度、要做什麼、素材、剪出方式、長度、能量、關鍵畫面和手機版剪法。範例見 references/storyboard.md。

它還要寫下觀眾的戲份：一個能演出產品承諾的互動（動作、回應、留下的後果、以及鍵盤和觸控也能做到同樣的事），並設定骨架：能量的形狀、轉折落在哪裡、怎麼開場、怎麼收尾。

7. Animatic

用選定的媒材粗做整頁：真實文案、替身美術、分鏡表上的運鏡與剪接。手繪的片子用粗略圖層和剪影來排，攝影的片子用佔位影格，3D 的片子用灰色幾何體。捲一次看看。節奏與走位的問題在這裡改最便宜。起點是 kit 裡的 site-dom.html（不用 canvas）與 site.html（3D 舞台）。

8. 正式拍攝

一場一場拍。場景內的順序和片場一樣：走位、打光、材質、鏡頭、調色。建造或安放演員與場景，打光，設計畫格，再剪在一起。

9. 試片

把它算出來、看。screening.mjs 會在桌機、較矮的筆電和手機三種視窗拍下每一場，並排成聯絡表。接著用原尺寸打開五格：開場、主角最近的鏡頭、文字最密的閱讀區、主要控制項、手機版的招牌時刻。如果可以委派，就由一個全新的 agent 只憑聯絡表辦一場試映，說出產品是什麼、該做什麼、哪一格是高潮。筆記寫成具名的修正，重拍，再試片一次。

在任何東西被稱為完成之前，至少要有一次完整的試片，無障礙版本（--reduced）也要試片。

10. 交付

報告要說明看過什麼、沒看過什麼，導演、媒材與機制，調色、美術與海報這三個區塊是經過調研還是憑記憶寫的，每一個替身與每一個生成的素材，尚未結案的素材通告，以及怎麼跑起來。它絕不描述沒看過的畫面。最後在作品紀錄追加一行，這是這個 skill 唯一留在專案之外的檔案。