Open Design 是什麼？把 Claude Code、Cursor 變成設計助理的開源工具

先講清楚：它不是免費版 Figma

Open Design 這題很吸引人，但也很容易被講得太神。

它不是「免費版 Figma」，也不是按一下就有品牌級設計的魔法工具。比較準確的說法是：Open Design 想把你已經在用的 AI coding agent，像 Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode 這類工具，接進一套比較懂設計流程的本地工作台。

你給它一個設計任務，它會讓 agent 依照 skill、design system、沙盒預覽和匯出規則去產出結果。最後不是只得到一段文字，而是可能得到 HTML、PDF、PPTX、ZIP、Markdown 這類可以繼續處理的檔案。

這也是它最值得注意的地方。Open Design 本身不太像新的 AI 大腦，而像一個「AI 設計工作流外殼」。真正動手生成內容的，仍然是你電腦裡那些 coding agent 或你接上的模型 API。

它解決的不是「AI 會不會畫圖」

很多人用 AI 做網頁或介面，最常遇到的問題不是 AI 完全做不出來，而是它做得很像臨時 demo。

按鈕有了，卡片有了，漸層也有了，但排版、層級、品牌感、細節密度常常不穩。你叫它做 SaaS landing page，它就做出一個很像所有 SaaS landing page 的頁面。能看，但沒有記憶點。

Open Design 的切入點是把「設計前要問什麼」「應該套哪種 skill」「要用哪種設計系統參考」「產出後怎麼預覽與匯出」變成流程。這比單純丟一句 prompt 給 AI 更可靠一點，因為它不只是叫模型自由發揮。

對新手來說，這個流程本身就有學習價值。你會開始看到，一個比較像樣的 AI 設計任務，不能只寫「幫我做一個漂亮網站」，而是要講清楚受眾、用途、資訊層級、調性、交付格式和修改方向。

好不好上手？

如果你期待像 Canva 那樣打開網頁就用，Open Design 不是最輕鬆的那種。

官方 Quickstart 寫得很工程味：本機開發路線需要 Node 24、pnpm 10.33.x，主要建議 macOS、Linux、WSL2；Windows 原生多數流程可以跑，但 WSL2 比較穩。它也會偵測你電腦裡的 agent CLI，例如 Claude Code、Codex、Gemini CLI、Cursor Agent 等；沒有 CLI 的話，可以改走 BYOK API mode，也就是自己填模型 provider 的 key。

工具本身是開源的，GitHub 授權是 Apache-2.0。不過這不代表使用成本是零。你背後用的 Claude、OpenAI、Gemini 或其他模型，還是會照各自方案或 API 用量計費。設計任務常常會多輪修改，費用比問一個短問題更容易累積。

所以我會這樣判斷：

如果你完全沒有開發環境經驗，先不要把 Open Design 當第一個 AI 設計工具。你可以先看 demo、看別人的輸出，或等桌面版和安裝流程更穩。

如果你已經會用 Claude Code、Cursor、Codex 或 Gemini CLI，那它很值得試。因為它不是逼你換工具，而是把你熟悉的 agent 變成設計工作流的一部分。

跟 Claude Design 差在哪？

Claude Design 是 Anthropic 在 2026 年 4 月推出的官方設計實驗，定位很清楚：讓使用者用 Claude 做 designs、prototypes、slides、one-pagers 這類視覺產出。它能吃品牌系統、能對話修改、能匯出 Canva、PDF、PPTX、HTML，也能交接給 Claude Code。

Open Design 則走另一條路：開源、local-first、BYOK，並把設計生成交給你現有的 coding agent。

白話說，Claude Design 比較像官方整合好的設計產品；Open Design 比較像把這條設計流程拆開，讓你拿回本機、模型、agent 和匯出方式的控制權。

我不會說 Open Design 是完美替代。這句話太滿，也不太負責任。

比較好的說法是：如果你想要官方體驗、協作、組織分享、穩定產品路線，Claude Design 會更順。如果你想研究 AI 設計工作流、想接自己的 agent、想在本機專案裡玩 prototype，Open Design 比較有趣。

真正適合拿它做什麼？

我會先拿它做三類低風險任務。

第一是 landing page 初稿。不是正式上線頁，而是先把產品定位、區塊、視覺方向拉出來，看「這個想法有沒有畫面」。

第二是 dashboard 或 app prototype。這種任務很適合 AI，因為畫面有明確結構：sidebar、表格、圖表、狀態卡、操作區。Open Design 如果能把資訊層級先做出來，就算細節要人改，也已經省一段時間。

第三是簡報和提案草稿。它不一定能直接交給客戶，但可以幫你把「一堆散亂想法」先變成有頁面節奏的 deck，再讓人去修文字和設計。

我暫時不會拿它做正式品牌識別、客戶最終稿，或需要精準遵守公司設計系統的 production UI。這些地方還是要設計師和前端工程師接手檢查。

哪裡要小心？

第一，別被數字迷惑。官方頁面會寫有多少 skills、多少 design systems、支援多少 agent，這些數字更新很快，也很容易變成宣傳重點。對新手來說，重點不是「它有 31 個 skills 還是更多」，而是你第一次能不能穩定做出一個可修改的頁面。

第二，設計系統參考不等於品牌授權。Open Design 這類工具會提到很多品牌級 design systems，這可以幫你理解風格，但不代表你可以做出很像 Stripe、Notion、Vercel 的頁面拿去商用。學風格可以，直接像素級模仿就危險。

第三，local-first 不等於資料完全不出門。專案檔、artifact、資料庫可以在本機，但只要你接的是雲端模型，提示內容還是會送到模型 provider。公司內部資料、未公開產品、客戶素材，不要一開始就丟進去。

第四，它還在快速變動。像這種剛爆紅的 repo，README、Quickstart、支援清單和桌面版穩定度都可能很快改。適合試、適合學，不適合第一天就放進正式交付流程。

我會怎麼試第一輪

不要拿公司首頁，也不要拿真實客戶案。

我會先開一個玩具任務：

幫我做一個 AI 工具介紹頁。
讀者是剛開始學 AI 工具的人。
風格要乾淨、像工具百科，不要太像 SaaS 廣告頁。
需要首頁 hero、工具特色、適合誰、風險提醒、開始使用 CTA。
先做 HTML prototype，不需要接後端。

跑完先看三件事。

第一，Open Design 有沒有先問你足夠的問題，還是直接亂做。第二，產出的畫面是不是容易修改，而不是塞一堆看不懂的結構。第三，匯出的 HTML 或其他檔案能不能真的接著用。

如果這三件事都過關，它就不只是玩具，而是有機會變成你做初稿和學設計流程的工具。

我的結論

Open Design 最有價值的地方，不是它宣稱自己是 Claude Design 的開源替代品，而是它把「AI 怎麼做設計」這件事攤開給你看。

你會看到 skills 怎麼約束輸出、design system 怎麼影響風格、沙盒預覽怎麼降低修改成本、匯出格式怎麼讓結果離開聊天框。

所以我會推薦給已經在玩 AI coding agent 的人試試看。尤其是常做產品頁、後台 prototype、簡報初稿、side project demo 的人，這個工具很值得研究。

但如果你是完全新手，只想最快產生漂亮圖片或簡報，先不用急著裝。Open Design 比較像一座工作台，不是一個傻瓜按鈕。它好玩的地方也正在這裡：你不是只看 AI 產出，你是在學一套 AI 設計流程。

參考來源

Open Design GitHub：https://github.com/nexu-io/open-design
Open Design Quickstart：https://raw.githubusercontent.com/nexu-io/open-design/main/QUICKSTART.md
Open Design 專案介紹：https://opendesign.lol/
Anthropic Claude Design 公告：https://www.anthropic.com/news/claude-design-anthropic-labs