Cinematic UI 2.0 Director’s Cut：是什麼，改了什麼

Cinematic UI 2.0（Director’s Cut）不再要求 AI「設計」一個網站，而是要它「導演」一個網站。這是一個開源的 Agent Skill，適用 Claude Code、Codex，以及任何讀得了 Markdown 檔案的 agent，採 MIT 授權，免費使用。

2.0 背後的想法

1.x 把電影當成參考資料：選一位導演、借他的氛圍，然後跑一條很長的流程，包括圖像打樣、核准關卡和各種合約，好讓結果不要偏離。這樣有用，但很笨重，做出來的網站常常還是一個穿著電影色票的高級樣板。

2.0 從一個空資料夾重新蓋起，圍繞一個不同的想法：網站是一部以捲軸為播放頭的電影。 區塊是場景，視窗是畫格，一次捲動是一個剪接或一次運鏡。Agent 的工作變成導演的工作：決定觀眾看到什麼、依什麼順序、從哪裡看、在什麼光線下、畫面由什麼構成，以及為什麼。然後在算出來的畫面上證明它。

整個 skill 靠一條規則：借電影的機制，不借電影的戲服。導演風格是一組決定：鏡頭站哪、一顆鏡頭撐多久、一次剪接怎麼落下。這些會變成結構與動態。片名、角色和道具不會出現在產品的 UI 上。

2.0 帶來了什麼

從頭到尾一次真正的製作。 Logline、選導演、選媒材、選主角、素材通告、劇本、分鏡表、Animatic、正式拍攝、試片、交付。只有一份工作文件 treatment.md，沒有階段關卡、沒有核准檔案、沒有 JSON 合約。
把導演寫成機制，不是氛圍。 四十多位導演被寫成他們實際在做的事，每位都翻譯成結構與動態，並點出偷懶版長什麼樣。試鏡時會記下另外兩位候選人為什麼落選。
媒材從電影推導。 擬真 3D 只是選項之一，旁邊還有水墨、鉛筆與水彩、賽璐珞描邊、像素、網點與 risograph、CRT 與霓虹、液態、漸變光、繪製的 2.5D、純字體和攝影。每一種 look 都是實測過的程式。
每一個區塊都有分鏡表。 每一場都有節拍、景別、鏡頭、運鏡、走位、光、剪接、長度、關鍵畫面和手機版剪法，再加上骨架，讓兩個網站不會暗地裡其實是同一部電影。
先問，再造假。 素材通告是一則訊息，列出電影需要的東西，每一項有三條路：你提供、它生成（附工具、數量與費用），或是改鏡頭。
合法的真實影像。 find-footage.mjs 去開放圖庫搜尋，拿回裁好的片段和 CREDITS.md。
觀眾有戲份。 每部作品有一個能演出產品承諾的互動，並留下後果。
沒有任何長相的 kit。 reel.js 管場景與剪接，stage.js 管 3D，looks.js 管其他媒材，props.js 管場景道具。每個效果都從零開始。
看過才算數。 screening.mjs 在三種視窗拍下每一場，標出空白畫格、死停格、被截斷的文字與溢出，再用原尺寸判讀五個畫格。
為 CJK 也為拉丁文字而做。 直排、手動斷行、中英混排規則，以及繁體中文、簡體中文、日文、韓文的字體選角。

拿掉了什麼

以圖像打樣為先的流程、階段關卡、核准 JSON、執行合約、收據與驗證器。2.3 MB 的設計 DNA 資料庫、directors-200 表格，以及效果、字體、色彩與構圖的目錄。大約兩百個檔案精簡成三十個。

2.1 到 2.8 又加了什麼

首個 Director’s Cut 之後，這個 skill 持續演進。目前的版本是 2.8.0。

2.1，Award Reel。 對照二十一個 Awwwards 得獎作品與十五個 CSS Design Awards 得獎作品校準，在企劃書加入「得獎檢查」，並新增 type-fx.js，一個有四十四種文字表演的字體部門。
2.2 與 2.3。 簡報模式，以及帶有動態圖像流派的影片模式，之後各自獨立成為自己的 skill。
2.4 與 2.5。 影片移到姊妹 skill cinematic-cut，簡報移到 cinematic-ppt，它們和本 skill 共用 kit 與作品紀錄。
2.6，調色要選角。 電影的色彩現在真的會落到頁面上：references/grades.md 收錄兩大類共十四種有出處的 look，再加上 kit/grade.js，以及量測參考影格的 grade-from-stills.mjs。
2.7，任何電影都能當場調研。 Look book 不再是選單。你指定的任何電影、描述的任何長相，都會被當場調研，每一條資訊都標上第一手、第二手、維基或推論。電影的世界與海報構圖語法也一併落到頁面。
2.8，App 模式。 儀表板、管理後台與控制台，以較小的預算來導：任務是播放頭，用招牌畫面取代 KPI 列，八種設計過的狀態，還有 app-screening.mjs。

怎麼測試的，以及它做不到什麼

把 skill 和一份客戶 brief 交給完全沒有其他上下文的全新 agent。2.0 當時它們做出了一個茶品牌首頁、一支二十秒的發表預告、一個完全不用 3D 的獨立書店訂閱頁，以及一個文案很多的顧問公司頁面。它們的摩擦紀錄、另一個模型的獨立審查，以及對其他 skill 的調查，都在發布前回饋進文件。

README 把限制寫得很直接：沒有在 Safari、Firefox、實體手機或螢幕閱讀器上驗證，流暢度無法在 headless 環境判斷；程序生成的 3D 在特寫常見的真實物件時仍然吃力；它拉高下限、拉開變化幅度，但不保證得獎。

試試看

git clone https://github.com/akseolabs-seo/cinematic-ui ~/.claude/skills/cinematic-ui

Codex 則 clone 到 ~/.codex/skills/cinematic-ui。然後請它做一個網站，或請它提案三個方向。快速上手有後續說明，示範作品則展示全新的 agent 用它做出了什麼。