Open Design 最近會被注意到，不只是因為它開源，而是它把 Codex、Claude Code、Cursor、OpenCode 這些原本偏開發的 AI agent，拉進網站原型、儀表板、簡報與品牌視覺的工作流程。你下的不是單純生圖指令，最後拿到的是可以繼續修改、交給工程師，甚至直接執行的檔案。
先講一個很容易誤會的地方：Open Design 不是地端模型。它比較像一套跑在電腦上的 AI 設計工作區。你可以讓它呼叫雲端的 Codex、Claude、Gemini，也能串接 Ollama、LM Studio 或其他 OpenAI-compatible endpoint。軟體在本機、專案檔案在本機，不代表模型推論一定沒有離開電腦。
Open Design 是什麼？
Open Design 是一套 Apache 2.0 授權的開源、local-first AI 設計工作區。它本身不綁定單一模型，而是把你已經在使用的 coding agent 接進設計流程，從需求描述、視覺方向、設計系統、產出、預覽到交付，都在同一個專案裡完成。
- 製作網站與 App 原型
- 建立互動式儀表板與單頁工具
- 產生簡報、PDF、圖片與 HTML 影片
- 讀取既有網站、Figma 匯出檔或程式碼專案
- 用
DESIGN.md保存品牌色、字體、間距與元件規則 - 透過 MCP 讓 Codex、Claude Code 等 agent 直接讀取設計專案
我覺得它最值得看的不是「AI 幫你畫一個畫面」，而是它試著把設計變成可以版本控管的檔案。這和我之前整理的Loop Engineering 很接近：先產生，再看畫面、修改規則、重新執行，讓結果在迴圈中慢慢收斂。
Local-first 和完全地端其實不一樣
| 層次 | 資料在哪裡 | 需要注意什麼 |
|---|---|---|
| Open Design 應用程式 | 桌面程式、daemon 與專案檔案在本機 | 產出的 HTML、CSS、元件與設計系統由自己保存 |
| 雲端模型模式 | 檔案仍在本機，但提示與必要上下文會送到模型供應商 | 使用 OpenAI、Anthropic、Google 等服務時仍受各家隱私政策與費用影響 |
| 地端模型模式 | 透過 Ollama、LM Studio 或 vLLM 在自己的電腦推論 | 更吃記憶體、顯示卡與 context window，結果也取決於模型能力 |
官方隱私文件說明，專案、生成檔案與 BYOK 金鑰會留在本機；不過產品分析預設會在第一次啟動時讓你選擇是否分享，而部分安全與穩定性診斷可能持續啟用。真的在意機密資料，安裝後先進入 Settings → Privacy 檢查，不要只看到 local-first 就直接把客戶資料丟進去。完整內容可查看 Open Design Privacy。
Open Design 桌面版安裝教學
步驟一：下載正確版本
前往 Open Design 官方下載頁。截至 2026 年 8 月，穩定版是 v0.18.0，支援 macOS Apple Silicon、macOS Intel、Windows 10／11 x64；Linux 可使用 AppImage 或 Docker／Podman Compose。
步驟二：選擇執行 AI 的方式
Open Design 會掃描電腦上的 coding agent CLI。已經裝好 Codex、Claude Code、Cursor、Gemini CLI 或 OpenCode，通常可以直接選用；沒有 CLI，也能到設定頁加入自己的模型 API Key 或相容端點。
如果你還不熟 Codex 的桌面工作方式，可以先看Codex App GUI 特色整理。Open Design 的概念有點像把這張 AI 工作台再往設計端延伸。
步驟三：建立專案與設計系統
新增專案後，可以先選內建 Design System，也能丟入網站截圖、Figma 匯出資料或既有程式碼，請 agent 整理成 DESIGN.md。這個檔案可以記錄品牌色、字體、間距、圓角、元件和不該出現的設計，後續做網站、簡報或儀表板就不用每次重講。
步驟四：寫清楚第一份 Brief
不要只輸入「幫我做一個漂亮網站」。我會至少交代用途、使用者、頁面、主要動作、參考風格、裝置尺寸與不能做的事。例如：
為台灣 B2B 顧問公司建立首頁原型。
使用者是需要網站與 AI 工作流程的中小企業主。
第一個畫面要說清楚服務價值，主要動作是預約諮詢。
沿用專案 DESIGN.md，不要使用滿版漸層與過多卡片。
先做桌機與手機版，完成後檢查文字溢出與按鈕狀態。步驟五：預覽、修正與交付
生成後先看互動與響應式，不要看到第一張漂亮畫面就收工。Open Design 產出的 HTML、CSS 或元件可以繼續交給 coding agent 修改，再用 GitHub 保存版本，搭配 Playwright 做畫面與流程驗證。這兩段可以接著看GitHub 版本控管教學與Playwright 自動化測試教學。
如何把 Open Design 接進 Codex 或 Claude Code？
Open Design 提供 MCP server，可以讓外部 agent 直接讀取專案、技能、設計系統與檔案。一般 CLI 安裝方式是：
od mcp install codex
od mcp install claude
od mcp install cursormacOS 要特別注意，系統本身已有一個叫做 /usr/bin/od 的指令，可能蓋過 Open Design 的 CLI。官方建議桌面版使用者到 Settings → MCP server 複製完整設定片段，不要只在 Terminal 直接輸入 od。
MCP 的觀念和設定方式，可以搭配我整理的Claude Code MCP 教學閱讀。差別只是這次連接的不是 GitHub 或資料庫，而是你的設計來源檔。
Open Design 搭配 Ollama 地端模型
想盡量把推論留在自己的電腦，可以在 Ollama 先下載適合 coding 的模型，再到 Open Design 的 BYOK／Provider 設定選擇 Ollama，或填入 OpenAI-compatible endpoint。Ollama 常見本機網址是 http://localhost:11434/v1，模型名稱要和已下載的名稱一致。
ollama pull qwen3-coder
ollama list也可以先用 ollama launch codex 或 OpenCode 串好地端模型，再讓 Open Design 呼叫這個 agent。Ollama 官方建議 coding agent 使用至少 64K context window；硬體不足時，模型可能很會聊天，卻記不住完整設計系統和專案檔案。可參考 Ollama 與 Codex 整合文件。
這也是為什麼我不會把它宣傳成「完全免費取代 Claude」。Open Design 本身免費，但你仍要準備 coding agent、雲端 API 額度，或一台跑得動地端模型的電腦。成本只是從訂閱費，換成 API、硬體和自己維護環境。
Open Design 適合哪些人？
- Vibe coding 開發者：需要先把想法做成可執行原型，再接後端和測試。
- 設計與工程混合團隊：希望品牌規則能用檔案保存，減少設計稿和程式碼不同步。
- 接案工作者：需要快速做提案、網站方向、簡報與客戶預覽。
- 重視資料控制的公司：希望專案檔案留在內部環境，並自行選擇模型供應商。
- WordPress 開發者：可以先產出頁面方向與元件，再交給 Codex 或 Claude Code 實作成區塊、佈景主題或 Elementor 元件。
它目前比較不像傳統 Figma 的逐點向量編輯器，也不是 Lovable 那種把後端、資料庫、帳號和部署全部包好的代管平台。Open Design 更適合願意碰專案檔案、Git、coding agent 和設計規則的人。你得到比較高的控制權，也要承擔多一點設定與驗證工作。
如果你正在做自己的產品，Open Design 可以和PocketBase 開源後端形成一個很實用的組合：前者負責設計與前端原型，後者處理資料、登入與 API，再交給 AI agent 串起來。開源工具真正有價值的地方，不只是省錢，而是檔案、程式碼和資料不必全押在單一平台。
常見問題 FAQ
Open Design 是地端 AI 模型嗎？
不是。Open Design 是 local-first AI 設計工作區，負責連接 coding agent、模型、設計系統與專案檔案。模型可以來自 OpenAI、Anthropic、Google，也可以透過 Ollama、LM Studio 或 vLLM 在本機執行。
Open Design 可以完全離線使用嗎？
只有在模型、字型、素材和所需工具都部署在本機時，才接近完整離線。若選擇 Codex、Claude、Gemini 或其他雲端 API，提示和必要上下文仍會送到對應供應商。
Open Design 是免費的嗎？
Open Design 原始碼採 Apache 2.0 授權，桌面工具本身可免費使用。不過雲端模型 API、官方模型服務、部署主機或地端模型所需硬體，仍可能產生成本。
Open Design 可以取代 Figma 嗎？
它適合提示驅動的原型、網站、儀表板和可執行檔案，但傳統向量細修、成熟協作、元件管理與完整交付流程，Figma 目前仍比較穩定。兩者也可以搭配，不必硬選一邊。
Open Design 可以和 Codex 或 Claude Code 一起用嗎？
可以。Open Design 能偵測本機 coding agent，也提供 MCP server。安裝後，Codex 或 Claude Code 可以讀取 Open Design 專案、設計系統與檔案，再繼續進行開發、測試和版本控管。
