TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
Claudable：開源 AI 網頁應用產生器，用你的 Claude Code 與 Codex 在本機生成 Next.js 專案
Claudable 是一套開源的 Next.js 網頁應用產生器，本身不做 AI 推理，而是指揮你已登入的 CLI 程式代理（Claude Code、Codex、Cursor 等）在本機產生、預覽並部署應用。它把專案留在本機、部署接到你自己的 Vercel 與 Supabase，但要留意專案已停滯、代理預設全權動作等限制。
用 AI 摘要這篇文章：
Lovable、Bolt、v0 這類 AI 網頁產生器有一個共同的形狀：你開瀏覽器、打字描述需求，AI 在它們的雲端跑，產出的代碼也代管在它們那裡，直接部署到它們綁定的平台。Claudable 走的是另一條路。它是一套裝在你自己電腦上的 Next.js 應用，本身不做 AI 推理，而是去指揮你已經登入的命令列程式代理（CLI agent），例如 Claude Code 或 Codex，讓這些代理在你的本機產生專案、即時預覽、再部署出去。
這個差異決定了你該怎麼評估它。Claudable 常被一句話講成「Lovable 的免費開源替代品」，但這樣講會漏掉最關鍵的成本結構：它的 AI 運算和訂閱成本仍然來自你自己的 CLI 供應商，它真正提供的是一層本機指揮與預覽介面，把你本來要在終端機裡操作的程式代理，包裝成一個看得到畫面、能直接接 Supabase 與 Vercel 的產品流程。接下來是它實際的運作方式，以及裝之前要先知道的幾個現實限制。
它實際在做的事：本機指揮層，不是另一個模型
從技術定位看，Claudable 自己不是模型，也不打包模型。它是一套用 Next.js 寫成的網頁應用，另附 Electron 桌面版（支援 macOS、Windows、Linux），職責是接收你用自然語言描述的需求、交給本機的 CLI 代理執行、再把代理產生的代碼放進一個可以即時預覽的專案資料夾。它把抽象的「叫 AI 寫一個 app」拆成三個它自己負責的環節：管理專案與對話狀態、驅動代理產生與修改檔案、提供預覽與一鍵部署。產生的前端用的是 Tailwind CSS 加 shadcn/ui，所以介面預設有一定質感，不用你從零調視覺。
實際跑起來的流程是這樣的：先把專案庫複製到本機，執行 npm install（這一步會自動偵測可用連接埠、建立 .env、在 data/cc.db 建好 SQLite 資料庫），再 npm run dev 啟動開發伺服器。打開瀏覽器進到介面後，你選好要用的 CLI、用白話描述想要什麼應用（例如「做一個有深色模式的待辦清單」），Claudable 就把這個需求連同專案的目錄結構一起交給代理；代理邊寫邊回報它讀了哪些檔、改了哪些檔，介面右側即時顯示生成中的 Next.js 預覽。你可以一邊看預覽、一邊用追加訊息要求代理調整，例如改配色、加欄位或修正跑版，代理會在原專案上接著改，不需要你重新描述整個需求。滿意了，再把專案接到你自己的 Vercel 帳號部署、或接 Supabase 加上資料庫與登入模組。
這裡有一個值得先講清楚的邊界：本機的是「指揮」與「專案資料」，不是 AI 推理。Claudable 的專案資料（對話紀錄、專案設定、環境變數）存在本機的 SQLite 資料庫，它的 27 個依賴裡也沒有任何 analytics、Sentry 或 PostHog 這類遙測套件，這點對在意隱私的人是正向訊號。但你輸入的需求文字、以及代理讀寫的程式碼，最終仍會經過你那個 CLI 背後的雲端模型（例如 Claude Code 背後的 Anthropic 伺服器）。換句話說，它是一座本機的控制台，雲端 AI 的工作它沒有、也不想取代。
整合服務那一層也是同樣的邏輯。Claudable 支援接到 GitHub 做版本控制、接到 Vercel 做直接部署、接到 Supabase 拿到現成的 PostgreSQL 資料庫與使用者登入模組，但這三個整合全部用的是你自己申請的存取權杖（token），帳單和資料也落在你自己的帳號底下，Claudable 本身不經手。這是它和託管型產生器另一個結構性的差別：沒有一個平台在中間幫你代管代碼或代收部署費用，好處是你對整條鏈路有完整控制權，代價是任何一個環節出問題（權杖過期、額度用罄、服務變更條款）都要你自己排查。
五個代理的支援並不對稱
Claudable 官方列出的支援代理有五個：Claude Code、Codex CLI、Cursor CLI、Qwen Code、Z.AI GLM。但打開 lib/services/cli/ 目錄的原始碼，會看到兩種完全不同的接法。Claude Code 走的是 Anthropic 官方的 @anthropic-ai/claude-agent-sdk，直接在同一個 Node 進程裡用 query() 函式呼叫，等於是程式內的原生整合；GLM 的接法和它一樣，同樣透過 @anthropic-ai/claude-agent-sdk 的 query()，只是把端點改指向智證自己提供的 Anthropic 相容介面（api.z.ai/api/anthropic）。另外三個（Codex、Cursor、Qwen）才是透過 child_process.spawn 把各自的 CLI 二進位檔當外部子程序叫起來。
這個差別在實務上會有感。走 SDK 的那一條（Claude Code、GLM）在串流輸出、狀態同步、錯誤處理上能做得比較細，因為代理的行為是透過 SDK 型別直接拿到；走子程序的那三個，等於是讀代理印到終端機的文字再解析，比較容易受到代理版本變動影響。所以「支援五個代理」這句話要讀成：其中兩個是程式內的原生整合、三個是 CLI 橋接的次級路徑。Claude Code 仍是官方文件裡唯一標「推薦」的選項：它和 GLM 雖然同為 SDK 原生整合，但 Claude Code 是 Anthropic 自家的代理、也是預設值，官方把它排在最前面比較可能出於這層關係，而非整合機制本身贏過 GLM。
停滯的維護節奏、卡住的模型，加上預設全權動作的代理
比起功能介紹，幾個會直接影響你決策的現實限制更值得先講清楚。
專案目前處於停滯狀態。它的 main 分支最後一次提交停在 2026 年 3 月初，從那之後就沒有新的程式碼進版；整個專案也只有一個正式發布版本（v1.0.0）。GitHub 上 45 個未關閉的 issue 裡，有 2026 年 4 月有人問什麼時候支援更新的 Claude 模型、6 月有人反映示範用的 GIF 檔案太大（單一檔案近 70 MB），兩個都沒有官方回應。README 列的「即將推出」功能，包括原生 MCP 支援、對話與程式碼狀態的檢查點、從參考網址把現有網站複製成專案起點、多代理系統，至今都沒有落地。把這些放在一起看，現階段比較務實的預期是：它能用，但別把路線圖當成近期會發生的承諾。
模型支援卡在 2026 年 3 月的版本。更新的代碼顯示，它在 3 月初把 Claude 模型設成 Opus 4.6 與 Sonnet 4.6 之後就沒再動過，而前面提到那則詢問更新模型的 issue 至今未獲回應。這代表你現在裝起來的版本，不會自動跟上後續推出的模型；這類代理工具的生成品質很大程度綁定底層模型，模型停在舊版等於能力也跟著停格。想用更新版本，要等專案自己升級，或你自己 fork 出來改。
它預設讓代理全權動作。在 Codex 介面卡的原始碼裡，有一段寫死的系統指令，明確要求代理「不必等待確認就自主行動」（Act autonomously without asking for confirmations），並且宣告「你有完整權限」（You have full permissions）。這代表代理可以執行 shell 指令、建立與刪除檔案、跑建置與測試，不需要你逐動作同意。對一個要在本機動你檔案系統的工具來說，這是你要自己把關的安全邊界：在正式專案或敏感目錄上用它之前，先確認你信任那個代理的行為範圍，也確認你在用的是哪一個 CLI（不同代理的權限模型不同）。
免費的只有產生器這一層。根據官方文件的說明，Claudable 本身不收訂閱費，但它需要你已經登入的 CLI 才能做事，而那些 CLI 多半要錢：Claude Code 隨 Claude Pro 或 Max 方案提供、Codex CLI 隨 ChatGPT Plus 或更高方案提供、Cursor CLI 有免費額度但進階功能要 Pro 方案。Qwen Code 標榜完全免費開源是少數例外。所以你看到「免費」時，要理解免費的是這層指揮介面，不是整條 AI 生成鏈路；如果你還沒有任何一個 CLI 訂閱，實際成本並不是零。
和託管型產生器比起來，取捨在哪
把 Claudable 放回它所處的品類裡，取捨會看得更清楚。Lovable、Bolt、v0 這類託管服務的好處是打開瀏覽器就能用：AI 在雲端、代碼代管、部署一條龍，代價是你要照它的方案付費、專案也綁在它的平台上，離開時要自己想辦法把代碼搬走，平台一旦調整方案或限制，你的專案就連帶受影響。Claudable 把 AI 運算還給你自己的 CLI 訂閱、把專案留在你本機的資料夾、把部署接到你自己帳號的 Vercel 與 Supabase，代價是你要自己搞定本機環境（Node.js 20 以上、已登入的 CLI、Git），要自己承擔代理在本機全權動作的風險，而且得面對一個目前停滯、維護節奏不明朗的開源專案。一句話總結兩邊的差別：託管型用方便換控制權，Claudable 用控制權換自己來，也因此更適合把「不被綁住」看得很重的人。
| 面向 | 託管型（Lovable／Bolt／v0） | Claudable（本機指揮層） |
|---|---|---|
| AI 運算位置 | 服務商雲端 | 你 CLI 背後的雲端模型 |
| 代碼存放 | 服務商平台代管 | 你的本機資料夾 |
| 費用來源 | 服務訂閱 | 你既有的 CLI 訂閱 |
| 設定門檻 | 開瀏覽器即用 | 需自備 Node.js、CLI、Git |
| 專案活躍度 | 商業團隊持續維護 | main 停滯於 2026 年 3 月 |
本來就在用 CLI 代理的人最對味，追求零設定的人要猶豫
它最契合的，是本來就在用 Claude Code 或 Codex 這類 AI 程式代理、想多一層圖形介面和即時預覽來做原型或黑客松作品的人。你已經付了那筆訂閱、也習慣了代理的行為模式，Claudable 等於把你本來在終端機裡的流程，加上看得見的產品骨架（預覽、Vercel 部署、Supabase 資料庫與登入模組）。對這群人來說，多一個本機的視覺化指揮台是有增量的，而且因為產生的就是標準 Next.js 專案，你不喜歡這層介面時隨時可以把專案帶走、回到終端機繼續，不會被綁住。典型情境是週末想驗證一個點子：開 Claudable、用一句話描述要什麼、看代理把可運行的原型架起來，半小時內決定這方向值不值得再投入。
它比較不適合兩種人。完全沒有任何 CLI 訂閱、期待一個「打開就能用、零設定」的免費產生器的人，這條路對你的實際成本和門檻都比想像高；而打算把它當成穩定生產工具、長期依賴它持續更新的人，因為它目前停在 2026 年 3 月、模型支援也卡在當時的版本，未來能不能跟上模型與框架的演進還是問號；一旦 Next.js 或某個 CLI 推出不相容的更新，而專案又沒人維護，你得自己 fork 出來修。對後者，把它當成「可用、但要自己承擔維護風險」的開源實驗會比較健康，也建議同步追蹤它在 Claude 生態裡的相關工具作為備案。
授權方面，Claudable 採 MIT 授權，版權屬於 Opactor AI，可以自由使用、修改、再散布，這對想自行接手維護或拿來當底座的人是正面的前提。整體看，它的價值不在於「又多了一個免費產生器」，而在於它示範了一條把本機 CLI 代理包成可視覺化產品流程的路徑；只是這條路目前要你自己扛維護節奏和代理全權動作這兩個風險。如果你想用 UI 生成這條思路又偏好不同入口，也可以看看把 Codex 接進其他工作流程的做法，或參考 AI 設計類工具怎麼補上 Claudable 沒有涵蓋的介面產出環節。
