標題：Claude Design 開源了？Open Design 讓任何 Coding Agent 都變成設計引擎

你有沒有過這種經驗——打開設計工具，看著空白的畫布，腦子裡知道要做什麼，但手指就是不知道該從哪裡開始？

對很多工程師來說，這種感覺太熟悉了。你不是不會設計，而是缺乏一套有效的「設計流程」。而 Anthropic 在 4 月 17 日釋出的 Claude Design，正是要解決這個痛點——讓 AI 從「寫文字」變成「出設計稿」。它瞬間爆紅，但問題來了：它封閉、付費、鎖定 Anthropic 的模型和技能，不能自架、不能換模型、不能調整。

於是，另一個團隊做了一個決定：自己開源一個。

Claude Design 是什麼？為什麼大家這麼興奮？

先說清楚 Claude Design 到底做了什麼。

過去，我們用 AI 來生成文字、程式碼、甚至圖片。但 Claude Design 做的事情不太一樣：它讓 AI 「設計」——不是生成一張圖，而是產出一整套設計成品，從品牌色票、排版系統、完整的網頁原型，到一份可以拿去簡報的 pitch deck。

Anthropic 展示了一個工作流程：你跟 Claude 說「幫我做一個種子輪募資的雜誌風格 pitch deck」，它不會直接吐出一個 PPT 檔，而是先問你一連串問題——視覺方向偏好、品牌調性、目標受眾——然後開始執行一個完整的設計流程：選方向、生成佈局、建立設計系統、繪製頁面、輸出成品。每一個環節都是可以審查、可以校稿的。

這個能力讓整個設計社群和開發社群都炸了。HackerNews 上有開發者留言說：「這是我第一次覺得 AI 真的可以幫我做 design review。」也有人說：「Anthropic 終於做了一個不是 chatbot 的東西。」

討論中一個有趣的觀點是：Claude Design 證明了 LLM 的能力邊界不在於「能不能做設計」，而在於我們有沒有給它一個好的工作框架。同樣一個模型，寫文章是一種表現，但放在設計流程裡，就能產出完全不同的東西。

但它的限制也很明顯：只能在 Anthropic 的平台上用，只能用 Claude 模型，技能包無法擴充，而且是要付費的。對於只想試用、或者已經綁定其他生態系的團隊來說，這個圍牆花園並不友善。

開源的答案：Open Design

就在 Claude Design 引爆話題的幾週後，一個名為 Open Design（簡稱 OD）的開源專案出現了。專案的 README 開頭就說得很直接：

Claude Design 展示了當 LLM 不寫文章、開始出貨設計成品時會發生什麼。它爆紅了——但仍然是封閉原始碼、付費、雲端限定、鎖定 Anthropic 模型和技能。沒有 checkout、沒有 self-host、沒有 Vercel 部署、不能換自己的 agent。

OD 的目標很簡單：同樣的概念，同樣的「成品優先」思維，但沒有任何鎖定。

你可以用你自己電腦上的任何 coding agent——Claude Code、Codex、Cursor、Gemini CLI、Qwen、甚至你自己架的開源模型——透過 Open Design 的框架，把它變成一個設計引擎。

它怎麼運作的？

Open Design 不自己包一個 agent。它的哲學是：「最強的 coding agent 已經在你的筆電上了。」它做的事情是提供一個完整的框架，讓你的 agent 能夠執行設計任務。

整個架構是這樣的：

  1. Web 層：一個使用者介面，你可以輸入需求（比如「幫我做一個 SaaS landing page」）、選擇視覺方向、即時預覽成品。
  2. 本地 Daemon：一個後台程序，負責掃描你 PATH 上的 coding agent，自動偵測你裝了哪些 CLI 工具。
  3. 技能系統（Skills）：內建 31 組設計技能——從網頁原型、SaaS landing page、儀表板、行動 App、社群貼文到雜誌海報——每一個技能都是一組精心設計的 prompt stack，引導 agent 執行完整的設計流程。
  4. 設計系統（Design Systems）：內建 129 套品牌級設計系統——Linear、Stripe、Vercel、Apple、Notion、Figma——每一套都包含精確的色票、字型、間距規範。
  5. 視覺方向（Visual Directions）：5 種策展式的視覺風格——Editorial Monocle、Modern Minimal、Warm Soft、Tech Utility、Brutalist Experimental——每一種都有確定性的 OKLch 色票和字型堆疊。

換句話說，你只要在你的電腦上裝好 Open Design，然後打開瀏覽器，告訴它你要做什麼，它就會找到你裝好的 Claude Code 或 Codex，讓它們執行一連串的設計任務，最後在沙盒 iframe 裡即時呈現結果。

所有的運算都在本地完成，模型也可以用你自己帶的 API key（BYOK）。

支援哪些 coding agent？

目前 Open Design 會自動掃描並偵測 13 種 coding agent CLI：

如果你的 PATH 上沒有這些 CLI，也沒關係——Open Design 提供一個 OpenAI 相容的代理端點（BYOK proxy），你可以貼上任意供應商的 baseUrl 和 API key（Anthropic via OpenAI、DeepSeek、Groq、MiMo、OpenRouter、或你自己架的 vLLM），同樣的設計流程一樣可以跑。

打開引擎蓋：OD 的四個巨人肩膀

Open Design 不是從零開始造的。它站在四個開源專案的肩膀上，每個都貢獻了不同的關鍵拼圖。

Huashu Design（設計哲學）

設計流程的智慧核心來自 alchaincyf/huashu-design。它貢獻了：
– Junior-Designer 工作流程
– 5 步驟品牌資產協議
– 反 AI 垃圾的品質檢查清單
– 5 維度自我批評機制
– 「5 學派 × 20 設計哲學」的方向選擇器

這些全部濃縮在 OD 的 discovery.ts prompt 檔中。當你輸入需求時，agent 並不是憑空「畫一張圖」，而是先進行方向探索、品牌分析、品質校稿，最後才產出成品。

以 magazine-style pitch deck 為例，Huashu 的工作流程會這樣跑：品牌分析師（AI）先讀你的產品描述，提煉出核心價值；設計方向師（AI）根據市場定位推薦視覺風格；最後排版師（AI）依照雜誌級別的美學標準進行佈局——三層檢查才算完成。

Guizang PPT Skill（簡報模式）

簡報生成能力來自 op7418/guizang-ppt-skill，以保留原授權的方式完整整合進 OD。它提供雜誌風格的版面設計、WebGL 封面動畫、以及 P0/P1/P2 的品質檢查清單——確保每一頁簡報都有水準。

Open CodeSign（串流成品與預覽）

使用者體驗層借鏡 OpenCoworkAI/open-codesign——Claude Design 的第一個開源替代品。OD 繼承了它的串流成品循環、沙盒 iframe 預覽（內建 React 18 + Babel）、即時 agent 面板（待辦事項、工具呼叫、可中斷的生成）、以及 5 種匯出格式（HTML、PDF、PPTX、ZIP、Markdown）。

但有一個關鍵的差異：Open CodeSign 是一個桌面 Electron 應用，整合了自家的 pi-ai agent；而 OD 是一個網頁應用 + 本地 daemon，委託給使用者既有的 CLI agent。

Multica（Daemon 與執行環境）

技術架構基底來自 multica-ai/multica——負責 PATH 掃描式的 agent 偵測、本地 daemon 作為唯一特權進程、以及「agent 即隊友」的設計理念。

認真的工具：內建 129 套設計系統

Open Design 內建 129 套品牌級設計系統，這點非常值得細說。為什麼設計系統這麼重要？因為「設計」這件事，很多時候不是從零開始的——而是從一個好的起點出發。

每一套設計系統包含了精確的：
– OKLch 色票：這是一種更接近人類視覺的色彩空間，比傳統的 HEX 或 RGB 更適合在程式碼中進行顏色運算
– 字型堆疊：包含英文字型和中文字型的 fallback 設定，確保在不同作業系統上都能正確渲染
– 間距規範：8px 格線系統、元件間距、內容邊距

這些不是隨便湊出來的。70 套來自 awesome-design-md 專案——一個由社群維護的知名產品設計系統彙整，涵蓋 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma、小紅書等品牌。另外 57 套來自 awesome-design-skills，直接整合進 design-systems/ 目錄下。

也就是說，你不需要從零開始定義品牌色。選一個你喜歡的品牌的設計系統——比如說 Linear 的簡約科技風，或者 Stripe 的專業藍紫配色——OD 就會自動套用對應的色票、字型和佈局規範。對沒有品牌手冊的個人開發者來說，這就像站在巨人的肩膀上。

如果你真的打開 Open Design，實際用一次，流程大概是這樣：

第一步：輸入需求
你在網頁介面輸入一個設計需求，例如：「幫我做一個雜誌風格的種子輪募資 pitch deck」。這不是一個簡單的 prompt——它會被送到 discovery 階段。

第二步：互動問卷
畫面跳出一個互動式的問題表單。OD 的設計方向挑選器會引導你選擇視覺風格（Editorial Monocle？Tech Utility？）、品牌調性（溫暖？冷靜？大膽？）、目標受眾。它會問你：你有品牌色票嗎？你有 Logo 嗎？你想強調什麼資訊？

第三步：Agent 開始工作
你的 coding agent 收到任務後，會在本地建立一個專案資料夾，放入種子範本、佈局函式庫和自我檢查清單。然後 agent 開始執行。

第四步：5 維度自我批評
OD 最有趣的一環是強制性的前測：agent 在產出任何像素之前，必須先執行五維度的自我批評——對自己的輸出進行品牌一致性、視覺層級、可讀性、技術可行性和創新性的評估。

第五步：產出成品
批評通過後，agent 產出一個單一的 <artifact>，立即在沙盒 iframe 中渲染。你不是拿到一個檔案，而是看到即時的視覺成果。

第六步：迭代
你可以繼續跟 agent 說「把這個按鈕移到左邊」「改用暖色調」「加一組數據圖表」。每次修改都經過同樣的品質檢查循環。

這個流程的核心思路是：不要讓 AI 憑空亂畫。每一個像素的產出，背後都有方向選擇、品牌規範和品質檢查在撐著。

跟 Claude Design 比，Open Design 強在哪、弱在哪？

強項

完全開源、本地優先。 這是最明顯的優勢。你可以自己 host、自己改、自己擴充。你的設計資料不會離開你的電腦。

模型自由。 不鎖定任何供應商。Claude Code、Codex、Gemini、Qwen、DeepSeek——你選哪個就用哪個。如果不滿意當前的模型，一鍵切換。

技能與設計系統可擴充。 31 組內建技能只是起點。任何人都可以寫新的 design skill，整合進框架。同樣的，129 套設計系統也可以持續擴充。

媒體生成整合。 除了靜態設計，OD 還整合了圖片生成（gpt-image-2）、影片生成（Seedance 2.0）、動態圖形（HyperFrames）——而且輸出的是真實的 .mp4 和 .png 檔案，放進專案資料夾裡。

OD 的 prompt-templates 資料夾中收錄了 93 組可直接複製使用的提示模板：43 組 gpt-image-2 的圖片生成提示（適用於海報、頭像、資訊圖表、插圖地圖）、39 組 Seedance 的影片生成提示（適用於 15 秒的電影級文字轉影片和圖片轉影片）、以及 11 組 HyperFrames 的動態圖形提示（適用於產品展示、動態文字、數據圖表、社群覆蓋層、Logo 片尾）。每一組都有預覽縮圖和來源說明。

這代表你不只是產出一份「設計檔案」——你可以在同一個工作流程裡產出社群貼文的圖片、產品展示的短影片、以及一個完整的 HTML prototype，全部在同一個聊天介面中完成。

弱項

需要自己裝 coding agent。 不是裝了 OD 就能直接用。它不會附 agent，你得先裝好 Claude Code 或 Codex 或其他 CLI。

品質取決於 agent。 OD 的 prompt stack 再好，最終執行的是你選的 agent。如果你用一個小模型，產出品質會明顯下降。

門檻不低。 要讓 OD 順利執行，需要一些 Node.js 環境設定、本地 daemon 啟動、可能需要 Vercel 部署。不是「打開瀏覽器就能用」的那種零門檻產品。

誰適合用 Open Design？

工程師 / 獨立開發者

如果你一個人做專案，不想花錢請設計師，但也不想交出一個讓自己難堪的 UI——OD 是很好的起點。你只要會裝 CLI 工具、會跑 pnpm，就能產生有一定品質的設計成品。對台灣很多 solo founder 和 side project 開發者來說，這是一個非常實際的解決方案。不需要花時間學 Figma，不需要外包給 freelance 設計師，只要會寫 prompt 就能產出可用的東西。

小團隊 / 新創公司

沒有專屬設計師的團隊，可以用 OD 快速產出初稿。不是要取代設計師，而是讓工程師有個參考點——至少不會在第一批使用者面前丟臉。在產品早期階段，速度比完美更重要。有了 OD，你可以在幾個小時內從概念到可展示的 prototype，而不是花一週等設計稿。

對設計流程感興趣的人

就算你本來就是設計師，OD 展示的「方向探索 → 品牌建立 → 品質檢查 → 迭代」流程，本身也有參考價值。它強迫 AI 在做任何事情之前先思考——這是一個值得學習的設計思維。設計師可以從中學到如何把設計流程拆解成可重複的步驟，這對於建立團隊的設計系統非常有幫助。

如何上手？

如果你想試試，步驟並不複雜：

  1. 確保你有一台裝了 Node.js 的電腦
  2. 確認你的 PATH 上至少有一個支援的 coding agent CLI
  3. Clone 專案：git clone https://github.com/nexu-io/open-design
  4. 執行 pnpm tools-dev
  5. 打開瀏覽器，開始輸入設計需求

如果你沒有裝任何 coding agent，也可以設定 BYOK proxy，透過 OpenAI 相容的 API 端點來跑。

完整的快速入門指南在專案的 QUICKSTART.md 裡，有繁體中文版本的 README。

讓社群來幫它成長

Open Design 的核心開發團隊來自 nexu-io，一個專注於開源 AI 工具的組織。他們在 GitHub 上明確歡迎貢獻——不管是新的 design skill、新的設計系統、還是更好的 prompt stack。

如果你對這個專案感興趣，可以做的事情很多：
– 貢獻一組你常用的設計系統（品牌色票 + 字型 + 間距規範）
– 撰寫新的 design skill（一個結構化 prompt 就能讓 agent 學會新的設計工作類型）
– 回報 bug 或提出功能建議
– 幫翻譯繁體中文文件（已經有繁體中文版 README 了）

對比 Claude Design 的封閉生態，OD 的社群驅動模式或許才是更可持續的選擇。

這不只是工具，而是一個時代的轉變

回到一開始的那個問題：當你面對空白的設計畫布時，你真正缺少的是什麼？是工具？是技術？還是「知道該怎麼做」的那個流程？

Claude Design 證明了 AI 可以完整執行設計流程——不是取代設計師，而是讓每個人都有機會產出合格的設計成品。而 Open Design，讓這個能力不再鎖在單一平台裡。

這不只是某個專案或某個工具的誕生，而是整個時代在轉變的證據：設計正在從「專業技能」變成「其他人也能觸及的流程」。就像程式碼從 machine code 進步到高階語言一樣，設計也在經歷同樣的抽象化過程。

至於這個轉變是好是壞？現在說還太早。但有一件事是確定的——無論你是工程師、設計師、還是創業者，學會跟 AI 協作設計，這扇門已經打開了。

你會選擇留在 Figma 裡手動拉方塊嗎？還是打開 terminal，讓你的 coding agent 幫你加速？

不管選哪一邊，這都不再是一個「要不要」的問題，而是一個「什麼時候開始」的問題。工具就在桌上，鑰匙就在手上。