Cinematic UI 2.0EN

文件 / 01

快速上手 Cinematic UI

為 Claude Code、Codex 或任何 agent 安裝 Cinematic UI skill，跑出第一個提示，並了解它只會在哪三種情況停下來問你。

Cinematic UI 2.0（Director’s Cut）是一個開源的 Agent Skill，讓 AI 像拍電影一樣「導」一個網站。你選一位導演和他的一部電影，決定畫面由什麼構成，給主角一條變化弧線，再為每個區塊寫分鏡表。接著 agent 會用捲動驅動的鏡頭和設計過的剪接把頁面做出來，並在看過實際算出來的畫面之後，才說作品完成。整個 skill 是純 Markdown、純 JavaScript 和 Node 腳本，不需要建置。

安裝

Claude Code

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

Codex CLI

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

其他 agent：讓它讀 SKILL.md 即可。方法、參考文件、kit 和腳本全都是儲存庫裡的檔案，只要 agent 讀得了檔案、跑得了 Node，就能照著做。

試片與算片需要的東西

試片與算片腳本要在你正在做的專案裡執行，請在該專案安裝瀏覽器驅動：

npm i -D playwright-core     # 使用已安裝的 Chrome 或 Edge
# 算影片才需要 ffmpeg

playwright-core 讓 screening.mjs 能替頁面的每一場拍照；ffmpeg 只有在你要用 render-film.mjs 把網站錄成 MP4 時才需要。只做網站、做試片，不裝 ffmpeg 也可以。

第一批提示

直接叫出 skill 的名字，再描述你要的東西：

/cinematic-ui 幫一個手沖咖啡訂閱品牌做首頁，要 Awwwards 等級
/cinematic-ui 用小津安二郎的方式拍這個 SaaS 的 landing page
/cinematic-ui 給我三個導演方向讓我選

第一句只給 brief，讓 agent 自己導。第二句指定了導演，skill 會照辦；如果它認為這個選擇會傷到產品，只會說一次，並提出它願意保留的機制。第三句是要求提案：三份企劃，各有不同的導演、媒材與 logline，每份一段說明加一個招牌鏡頭，等你選定後才開拍。

預設它會直接「導」：自己做決定、製作、試片，再把成品連同企劃書（treatment.md，整個製作唯一的工作文件）一起交給你。

什麼時候會停下來問

只有三種情況：

  1. 看不出產品是什麼。 產品或頁面範圍無從推斷時，它只問一次；其餘情況它自己決定並往前走。
  2. 需要素材。 這就是「素材通告」：一則訊息列出電影需要的東西，並附上它的建議。你可以自己提供、改用免費授權圖庫、同意由 AI 生成，或讓它改鏡頭用替身。沒有你的同意，它不會花生成額度。
  3. 有東西要對外發布。 凡是會發布、部署，或覆蓋專案以外檔案的動作，都會等你點頭。

其他的事它自己拍板。接下來可以讀運作原理了解核心想法，或讀製作流程看十個階段。