給 Claude Code 與 Codex 的免費 skill
AI 做的網站都長一樣。你的不會。
Cinematic UI 讓你的 agent 像導演一樣做網站：先選一位導演和一部電影，替每個段落寫分鏡，渲染出來親自看過，才交給你。
git clone https://github.com/akseolabs-seo/cinematic-ui ~/.claude/skills/cinematic-ui分鏡表 · 本站首頁
- 01鏡頭：烈日下的佈景立面開場
- 02卡！鏡頭拉遠，佈景翻面揭露
- 03黑白的夢：預設網頁溶接
- 04你挑一個鏡次互動
- 05日以作夜：拖曳濾鏡調色
- 06放映室：樣片一卷卷播高潮
- 導演：楚浮《日以作夜》
- 媒材：手繪的佈景片，SVG + DOM
- 主角：這一個鏡頭
- 調色：烈日，然後日以作夜
不是套版。是一整組劇組，裝進你的 agent。
你剛剛看到的那一面牆，是一片佈景。這個網站本身就是用 Cinematic UI 拍的：導演、媒材、主角、調色、分鏡，每一項都寫下來、有理由，最後拿渲染畫面逐格檢查。翻過來，就是它的分鏡表。
一場夢 · 黑白
這個畫面，你一定看過。
叫 agent「做得高級一點」，回來的常常就是它：置中標題、兩顆按鈕、一團發光漸層、三張一樣的卡片。沒有人選過這些，只是預設值。
Cinematic UI 把這些列成「偷懶的剪法」清單，分鏡表裡只要出現一項，就整場重拍。
- 01開發產品真相、logline、受眾弧線
- 02選導演三位候選，留下一位，抽出 5–7 個機制
- 03選媒材畫面是什麼做的：墨、鉛筆、像素、印刷、攝影或 3D
- 04選角與素材主角和它的弧線；一次問清楚需要的素材
- 05劇本畫面上每一個字
- 06分鏡形式、骨架、每一場的分鏡表
- 07動態腳本用選定的媒材，粗剪整頁
- 08正式拍攝演員、場景、燈光、構圖、剪接
- 09放映樣片、放映室、筆記、重拍
- 10交片誠實報告：看過什麼、哪些是替身、還缺什麼
三個鏡次
不同產品，不同導演。
後兩個都是真的網站，由 agent 依產品各自選了導演；第一個是沒有導演時的樣子。按 1、2、3 切換。
兩份虛構簡報：台中的 24 小時動物急診醫院，以及給台灣中小企業的電子發票對帳軟體。
調色
日以作夜。
電影裡的夜戲常在白天拍，靠一片濾鏡變成夜。Cinematic UI 的調色也是選出來的：從選定的電影研究、從劇照量測，然後整套用上。內建十四套有出處的調色，任何一部片都能現場研究。
拖曳濾鏡，或用方向鍵
道具桌
工具都擺在桌上，沒有一個自帶風格。
套件只是器材：每個效果都從零開始，沒有一樣是預設打開的。兩個用它做的網站，不該有任何看得出來的共同點。
reel.js捲軸就是播放頭：場景、釘住的畫面、設計過的剪接type-fx.js四十四種文字演出，每一格都可重現grade.jsDOM 網站的調色：halation、顆粒、暗角looks.js寫實之外的媒材：水墨、素描、像素、網點plane.js把真實介面當成場景來拍的鏡頭stage.js片子真的需要 3D 時才開的攝影棚app.js後台模式：路由、狀態、快捷鍵screening.mjs樣片：三種視窗的接觸印樣與機械標記grade-from-stills.mjs把參考劇照量成一套調色find-footage.mjs從開放圖庫找合法的照片、影片、聲音
放映室 · 樣片
四個網站，沒有兩個像。
全部由 agent 用這個 skill 做出來。每一個都能點開現場版，也能讀它當時寫的導演筆記。
- 第 01 / 04潛影沖洗所米開朗基羅．安東尼奧尼《春光乍現（1966）》在暗房裡顯影的真實檔案照片：片基、聯絡表、纖維紙印片、顆粒與油性鉛筆；不用 canvas看現場 ↗導演筆記 →
- 第 02 / 04北辰動物急診醫院大衛．芬奇《索命黃道帶（2007）》一條連續手繪的 SVG 線、排版文字與 CSS 光（夜晚的鈉燈光池、紙面上的檢查燈光池）；不用 canvas、沒有照片看現場 ↗導演筆記 →
- 第 03 / 04勾稽庵野秀明《正宗哥吉拉（2016）》排版成型的會計文件（熱感電子發票證明聯、銀行明細、傳票、結帳表、帳本）與純黑片頭字卡；不用 canvas、沒有圖片看現場 ↗導演筆記 →
- 第 04 / 04回眸瑟琳．席安瑪《燃燒女子的畫像（2019）》即時擬真 3D 玻璃香水瓶，只用一支被端著走的燭火照明，香氣是程序生成的蒸氣著色器，DOM 裡有試香紙；沒有照片看現場 ↗導演筆記 →
本站所有作品都是虛構品牌；成品是真的，全部由 agent 使用這個 skill 做出來。
常見問題
要錢嗎？
不用。Cinematic UI 以 MIT 授權開源，免費使用。
哪些 agent 能用？
Claude Code 和 Codex CLI 直接 clone 進 skills 資料夾；其他 agent 只要能讀 SKILL.md 就能用。全部是 Markdown、JavaScript 和 Node 腳本，不需要建置。
一定要 3D 嗎？
不用。寫實 3D 只是其中一種媒材。片子是水墨、字體或攝影做的，就不開畫布。
它會擅自生成圖片嗎？
不會。它會先列出需要的素材，一次問你：自己提供、用免費授權圖庫、AI 生成（附工具、張數、大約費用），或改寫鏡頭。