ClipSketch AI：影片轉手繪分鏡自架工作台，把標記畫面變成分鏡與文案

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

ClipSketch AI 是一個你可以自己架在瀏覽器裡的影片創作工作台，做的是一件相當具體的事：把一段 Bilibili、小紅書或 Instagram 的影片連結丟進去，逐格標記你想要的畫面，再交給 Google Gemini 把這些畫面合成一張手繪風格的故事板，順便產出幾款社群文案與封面。它真正值得你在動手架之前停下來想清楚的，不是 AI 畫得好不好，而是你的影片連結、畫面與 API 預算會沿著什麼路徑流動，以及這個專案在授權與維護上的實際狀態。

它把哪幾件事串進同一個介面

單看功能，ClipSketch AI 想解決的是短影音二創流程裡的拼接成本。過去要把一支影片做成一組分鏡草圖加文案，你得在播放器裡手動截圖、修圖、把畫面貼到繪圖工具、再另外想文案。這個工具把幾個步驟收進同一個網頁介面：貼上分享連結之後，它先解析出可播放的影片網址，接著你在內建的播放器裡用鍵盤快捷鍵逐格前進，看到想保留的畫面就按 T 鍵打點，標記完的畫面再送去 Gemini 生成分鏡、文案與封面，最後全部存在你瀏覽器的本機資料庫裡。標記本身也能匯出成 TXT 時間軸標籤，或把打點的畫面打包成 ZIP 圖檔，方便丟給後製工具或歸檔備用，等於把「留下素材」這一步也設計進去了。

這條流程的價值在於「整合」本身。分鏡腳本、逐格標記、AI 繪圖、社群文案這幾件事，各自都有現成工具能做，但串起來的摩擦力很高；ClipSketch AI 把它們放進同一個畫面，讓你不用在四個視窗之間來回貼上貼下。不過整合也有代價，下面會談到：它把幾個環節交給了你不一定認識的第三方服務。

從原始碼的元件結構可以看出這條產線的分工。影片播放與打點由 VideoPlayer 與 TagList 負責，AI 產出的分鏡圖集中在 ArtGallery，背後則有 parsers、gemini、storage 三組服務分別處理連結解析、AI 呼叫與本機儲存。播放器針對直式（9:16）與寬螢幕做了版面適配，也支援行動裝置自動切成上下配置；整個專案用 React 19 加 TypeScript 寫成，搭配 Tailwind CSS 與 Vite，AI 部分透過 Google 官方的 GenAI SDK 呼叫，打包下載則交給 JSZip。

Pin

你貼的連結與畫面會經過哪些地方

這是 README 沒有講清楚、但你最該先知道的一段。我把解析模組 parsers.ts 拉開來看，發現預設的影片解析並不是「瀏覽器直接去抓」，而是所有請求都先繞進一個第三方公開 CORS 代理：https://cros.alphaxiv.cn/。也就是說，當你貼上一段小紅書或 Bilibili 的分享連結，這段連結會先送到 cros.alphaxiv.cn 這台由他人營運的伺服器，再由它去向原始平台抓取頁面與影片網址。alphaxiv 這個名稱容易讓人聯想到論文討論平台，但這台代理的實際營運主體並沒有在專案裡交代，等於你的連結會經過一個來歷不明的第三方節點。README 只用一句「特定的代理策略」帶過，實際的資料路徑比這句話具體得多。

再往裡看，不同平台還各自掛了第三方解析服務。Bilibili 的解析走的是 api.mir6.com 這組第三方 B 站解析 API，再透過 cros.alphaxiv.cn 轉發；Instagram 則是直接呼叫開源的 Cobalt 服務 api.cobalt.tools，不經過 cros 代理。這代表你貼進去的連結會經過至少一台、有時是兩台你無法控制的第三方伺服器（Bilibili 同時用到 cros 與 mir6 兩段），而這些服務一旦改政策、限流或下線，對應來源就會跟著解析失敗，這不是你自己改程式就能完全修好的部分。

倉庫裡其實附了另一個可自架的代理方案 edge-proxy.ts，讓你在 EdgeOne 這類邊緣運算平台自己跑一層轉發，把 Gemini 金鑰放在環境變數、並用白名單限制只能抓 api.mir6.com 與 www.bilibili.com。這是一個降低第三方依賴的途徑，但要留意兩點：它是部署到 EdgeOne 時才用的，預設的本機開發流程仍走 cros.alphaxiv.cn；而且白名單只涵蓋兩個 host，小紅書與 Instagram 的解析路徑並沒有被這層自架代理接管。換句話說，你可以透過自架邊緣代理降低一部分對外部 CORS 代理的依賴，但沒辦法完全消除。

一個 README 沒提的細節是，程式碼實際支援的來源比官方說法多。解析器的註冊清單裡同時有小紅書、Instagram、Bilibili 與一個通用備用解析器，但 README 與介紹文字多半只強調 Bilibili 與小紅書。如果你本來以為它只能吃這兩個平台，原始碼告訴你它的觸角更廣一些；通用解析器會嘗試從任意網頁的 OpenGraph 標籤或 mp4 連結裡抽出影片，不過每多一個來源，也就多一份對第三方服務與頁面結構的依賴，能不能順利拿到影片，終究取決於對方網站當下的狀態。

Pin

AI 這一層採用的是 BYOK（自己帶 API Key）模式，這點相對透明。分鏡圖用的模型是 gemini-3-pro-image-preview，文案用的是 gemini-3-pro-preview，兩者都由你在介面右上角貼入自己的金鑰來呼叫；程式碼裡也保留了切換到 OpenAI 陣營（DALL-E 3 與 GPT-4o）的彈性。要留意的是，你標記下來的每一格畫面會以 base64 影像送進 Google 的伺服器，費用與額度都算在你自己的 Gemini Key 上。針對系列內容或長專案，它還提供批次精修模式，可透過 Batch API 控制逐格重繪的成本，這對大量產出的人是值得先摸熟的省錢機制。文案產出之前，生成分鏡這一步還能選擇開啟思考模式，讓模型先把標記畫面分組，對節奏緊湊的教學類影片通常分組會更準確，相對也會多吃一點額度。如果你對「自己帶 Key、用量自己扛」這類工具的運作方式還不熟，可以參考我們整理過的免費與自帶金鑰 LLM API 相關討論。

相對之下，儲存層是真的留在本機。原始碼裡的 storage.ts 直接使用瀏覽器的 IndexedDB（資料庫名稱 ClipSketchDB），把你標記的畫面、生成的分鏡、文案、自訂角色圖與專案設定都存在你這台機器的瀏覽器裡，不會回傳給工具作者的伺服器。所以資料流的全貌是：解析層經過第三方代理、AI 層送到 Google、儲存層留在本機，三層的信任邊界並不一致，這是你決定要不要用之前要先在心裡畫清楚的一張圖。也因為產出都在本機，清除瀏覽器資料或換台機器就等於丟掉所有專案，這是它「本機優先」設計的另一面。

自架之前要先盤點的限制

最先該澄清的是授權狀態。README 底端寫著「MIT License」並附了一個連向 LICENSE 檔案的連結，但我把整個倉庫拉下來之後，根目錄並沒有這個檔案，GitHub 自動偵測的授權狀態也是 None。在沒有授權檔的情況下，原始碼雖然公開可見，預設卻是「保留所有權利」，修改、商用或再散布的法律狀態其實並未明確。這種「README 標了 MIT、倉庫裡卻沒有對應檔案」的情況並不少見，我們在另一個 同樣掛著 MIT 徽章卻查無授權檔的自架 AI 工具 裡也遇過，處理方式都一樣：把它當作「原始碼可見」而非「開源可自由使用」，真要商用前先去向作者確認授權。

維護活躍度是另一個會影響你敢不敢長期依賴的因素。這個專案星星數超過一千八、fork 兩百多，數字不算小，但主分支最後一次合併停留在 2026 年 1 月中，距今約七個月沒有新進展。對一個依賴第三方解析 API 與 Gemini 預覽模型的工具來說，停滯意味著當 mir6、Cobalt 或 Gemini 模型有任何變動，未必會有人出手修。高星數不等於活躍維護，自架等於你自己接手後續的相容性問題，這是把它當長期產線之前要先認帳的成本。

模型權限與費用門檻同樣要算進來。AI 繪圖呼叫的是 gemini-3-pro-image-preview 這類預覽模型，README 自己也提醒，遇到 403 錯誤時要去 Google Cloud 檢查你的專案是否取得該模型授權。換句話說，光有一把 Gemini Key 不一定夠，你還得確認這把 Key 在你的專案設定裡能存取這些預覽等級的模型，並且願意為逐格重繪、批量精修這類操作付出對應的 API 費用；預覽模型也可能隨 Google 政策調整用量限制或計價方式。

最後回到底層的版權位置。這個工具的核心用途是把別人發布在 Bilibili 或小紅書的影片拆成畫面再做成衍生內容，但「平台讓你看到」不等於「授權你拿來二創或商用」。工具提供的是產線，不是權利；要不要拿、能拿來做什麼，遵守的是原平台的條款與著作權規範，這個責任不會因為工具幫你省了截圖時間而消失。

日常高頻二創才值得自己架

綜合來看，ClipSketch AI 適合的是這樣的人：你本來就在高頻做短影音的二創或教學內容，受不了截圖、修圖、想文案的拼接摩擦，願意自己準備 Node.js v18 以上環境或用 Docker 跑一份，也接受影片連結會經過第三方代理、畫面會送進 Gemini、費用自己扛。如果你只是偶爾做一兩支，自己架這套的負擔恐怕大於效益；但若是你日常的產線，把流程收進一個介面、產出又留在自己瀏覽器裡，確實能省下可觀的切換時間。這類「自架一套 AI 工作流」的選擇，和我們聊過的 本機優先的 AI 桌面代理 屬於同一種「用基礎設施換控制權」的取捨。

如果你打算把它當作產線工具長期使用，也要把 AI 產出的穩定度與同類工具的替代性納入考量。同樣是 AI 生成視覺素材的應用，像 把大綱餵給 AI 生簡報 那類工具解的任務不同、但讀者要面對的「輸出品質得自己把關」是相通的；而 ClipSketch AI 多了一層「分鏡好壞取決於你標了哪些畫面」的人工判斷，標記得準、AI 才有材料發揮，至於實際生成出來好不好看，需要你自己跑過才知道。它還支援上傳自訂角色或頭像讓 AI 融合進故事板，對想經營個人風格或品牌形象的創作者是有用的額外能力，但這同樣建立在「你已經跑通基本流程」的前提上。

想動手的話，第一步很輕量：clone 倉庫、npm install、起一個開發伺服器，先貼一支你自己擁有、或確定可用的影片連結跑一次完整流程，看看解析、標記到生成的每一環是否順暢，再決定要不要長期架起來。官方也提供 earisty/clipsketch-ai 的 Docker 映像檔，給偏好容器化部署的人一條更快的路。動手前，請把上面那張資料流向圖與授權現狀先放進你的判斷裡，再決定它值不值得成為你日常工作流的一部分。