Open Design 是一個旨在打破 AI 設計隨機性、將 AI 產出從單純的程式碼片段提升到品牌級設計成品(Artifacts)的開源框架。它並非一個獨立的 AI 模型,而是一個設計協作系統,讓開發者能利用電腦中已有的強大 Coding Agent CLI 來執行專業的設計任務。
這個專案解決的核心問題是 AI 設計常見的 AI-slop 現象,即 AI 經常產出美感平庸、配色隨機且缺乏品牌一致性的網頁。Open Design 透過將設計流程標準化,強迫 AI 在動筆前先進行需求對齊、選擇確定性的設計系統,並在輸出前進行自我審查。
核心運作機制
Open Design 的運作邏輯可以拆解為三個層級:
首先是代理接合層。它透過一個本地 Daemon 掃描系統路徑,自動偵測並接合多達 16 種 Coding Agent CLI(例如 Claude Code, Cursor Agent, Gemini CLI 等)。如果使用者沒有安裝 CLI,也可以透過 BYOK(Bring Your Own Key)模式直接連接 OpenAI 或 Anthropic 的 API。
其次是知識注入層。系統內建了 31 種技能(Skills)與 72 套品牌設計系統(Design Systems)。技能定義了產出的形式(如 SaaS 登陸頁、行動端原型、雜誌風簡報),而設計系統則提供了確定性的顏色、字體與間距規範。當 AI 開始設計時,系統會將這些 Markdown 格式的規範注入 Prompt 中,確保 AI 不是在憑感覺配色,而是在遵循特定品牌的設計語言。
最後是執行閉環層。使用者輸入需求後,系統會強制觸發一個發現表單(Discovery Form),要求使用者定義受眾、色調與規模,防止 AI 直接跳到生成階段而導致方向錯誤。生成過程中,AI 的計畫會以 Todo 列表形式即時串流,最終產出的 HTML 成果會在沙盒 iframe 中即時預覽,並支援導出為 PDF、PPTX 或 ZIP 檔。
技術亮點
該專案最值得關注的是其反隨機設計機制。它導入了初級設計師工作流,要求 AI 在產出成品前必須經過五維度自我批判(哲學、層級、細節、功能、創新),若得分不足則必須修正。此外,它將設計系統定義為可攜式的 Markdown 檔案而非複雜的 JSON,使得增加新品牌或新技能的成本極低,只需丟入一個資料夾即可。
對於想要擴展能力的用戶,它還整合了媒體生成管線,可透過 gpt-image-2 生成海報,或利用 HyperFrames 將 HTML 動態效果轉化為 MP4 影片,實現從靜態原型到動態展示的完整路徑。
適合誰使用
這個工具非常適合需要快速產出高品質 Mockup 的產品經理、前端工程師或 UI/UX 設計師。如果你已經在電腦上安裝了 Claude Code 或 Cursor 等 Agent,且不希望每次都花大量時間調整 Prompt 來修正 AI 的配色與佈局,Open Design 能提供一個標準化的生產線。
導入成本與風險
導入成本較低,可以直接下載 Electron 桌面版使用,或透過 pnpm 在本地啟動。但需要注意的是,由於它依賴本地 CLI 的 spawn 過程,不同作業系統(尤其是 Windows)可能會遇到路徑長度限制或權限問題。
最大的風險在於對本地環境的依賴。因為 Agent 擁有對本地檔案系統的讀寫權限(Read/Write/Bash),使用者必須信任所使用的 Agent CLI。此外,由於目前處於早期實作階段,部分精準的局部編輯(Surgical Edits)功能仍在開發中,目前的修改仍以對話式調整為主。
成熟度判斷
Open Design 目前是一個功能完備的早期實作版本。其核心的偵測、接合、注入與預覽閉環已經跑通,且擁有豐富的內建技能庫。它並非一個簡單的 Demo,而是一個具有完整架構(Next.js + Express + SQLite)的工具,但部分高階 UX 功能(如 AI 調整面板)仍在 Roadmap 中,建議將其視為強大的原型快速產出工具,而非最終的生產環境開發框架。