Open Design 開源專案完整解析：19 套 Skills、72 組設計系統，Claude Design 的免費替代方案
Open Design 是一款本地優先、開放原始碼的 AI 設計工具，定位為 Anthropic Claude Design 的免費替代方案。專案在 2026 年 4 月底上線 GitHub 後六天內拿下超過 20,000 顆星，目前內建 31 套可組合 Skills 和 72 組品牌級設計系統，支援 Claude Code、Codex、Cursor、Gemini CLI、OpenCode 等 11 種 coding agent，輸出格式涵蓋 HTML、PDF、PPTX 和 MP4。跟 Claude Design 最根本的差異在三個字：不鎖定。模型可換、技能可擴充、部署可本地也可上 Vercel，全部 Apache-2.0 授權。
這件事的背景是：Anthropic 在 2026 年 4 月 17 日推出 Claude Design，由 Opus 4.7 驅動，讓非設計師也能用對話產出原型、簡報和一頁式行銷素材。產品發布當天 Figma 股價下跌 7.28%，從 $20.32 跌至 $18.84。Claude Design 能從既有程式碼庫和 Figma 檔案自動萃取設計系統，再套用到所有新專案上，這是 Lovable、v0 等競品做不到的。但它是雲端限定、付費訂閱、綁定 Anthropic 模型和內部 Skill，沒有自架選項。
Open Design 的團隊 nexu 認為，市場需要的不是又一個 agent runtime，而是把既有的 coding agent 串成設計工作流的開放表面。他們的做法是：在本地跑一個 Node/Express daemon，自動偵測使用者 PATH 上的 Claude Code、Codex、Gemini CLI 等 agent CLI，再透過 Skill + Design System 的兩層抽象驅動設計產出。
Open Design 與 Claude Design 功能比較
| 維度 | Claude Design | Open Design |
|---|---|---|
| 授權 | 閉源，付費訂閱（Pro/Max/Team/Enterprise） | Apache-2.0，免費 |
| 底層模型 | 綁定 Claude Opus 4.7 | BYOK：11 種 agent CLI 可切換 |
| 部署方式 | 純雲端（claude.ai） | 本地 + Vercel 自部署 |
| 設計系統數量 | 未公開（由 Anthropic 內部維護） | 72 組品牌級系統（含 Apple、Stripe、Figma 等） |
| Skills 數量 | 未公開 | 31 套（原型、簡報、dashboard、行動 app 等） |
| 匯出格式 | ZIP、PDF、PPTX、Canva、HTML、Claude Code | HTML、PDF、PPTX、ZIP、MP4 |
| 設計系統萃取 | 可從 codebase / Figma 自動萃取 | 手動選擇或自訂 DESIGN.md |
| 社群擴充 | 不支援 | PR 提交 SKILL.md / DESIGN.md 即可 |
| GitHub 星數 | N/A（非開源） | 20,300+（截至 2026 年 5 月 4 日） |
架構解析：Skill × Design System 的兩層抽象
Open Design 的核心設計哲學是把「該做什麼」和「該長什麼樣」拆成兩個獨立維度。
Skill 定義的是任務類型。一個 Skill 就是一個含有 SKILL.md 的資料夾，遵循 Claude Code 的 SKILL.md 慣例，再加上 Open Design 自己的 od: frontmatter（mode、platform、preview type、design system 需求等）。31 套 Skill 按場景分成設計、行銷、營運、工程、產品、財務、人資、銷售八類。原型模式有 27 套（web-prototype、saas-landing、dashboard、mobile-app、gamified-app、social-carousel、magazine-poster 等），簡報模式 4 套（guizang-ppt、simple-deck、replit-deck、weekly-update）。
Design System 定義的是視覺語言。每個系統是一個含 DESIGN.md 的資料夾，標準化為九大區塊：color、typography、layout、components、spacing、motion、iconography、illustration、voice。72 組系統涵蓋 AI 與 LLM（Claude、Mistral、Ollama、xAI）、開發者工具（Cursor、Vercel、Supabase、Linear）、生產力（Notion、Figma、Miro）、金融科技（Stripe、Coinbase）、電商（Shopify、Airbnb）、汽車（Tesla、Ferrari）等品牌。
19 × 72 = 理論上超過 1,300 種 Skill × Style 組合。實際上不是每個組合都適用，但這個設計讓擴充的成本極低：社群貢獻一個 SKILL.md 或 DESIGN.md 就能解鎖新的輸出類型或視覺風格。
工作流程拆解
Open Design 的設計流程有五步，對應 Claude Design 的互動循環但多了結構化的前置步驟：
第一步，使用者在入口頁選擇 Skill、Design System，輸入一行需求。這個介面同時服務原型、簡報、行動端、dashboard 所有模式。
第二步，Turn-1 Discovery Form 自動彈出。模型在畫任何東西之前，先鎖定需求：surface、受眾、tone、品牌脈絡、規模。這是 Open Design 的反 AI 垃圾機制，靈感來自 alchaincyf/huashu-design 的 Junior-Designer 五步工作流和五維自我批評框架。
第三步，agent 從五個策展的視覺方向中挑一個（或由使用者選），開始生成。Live todo 卡片即時串流 agent 的計畫，使用者可以在過程中修正方向。
第四步，成品在沙盒 iframe 中渲染預覽。原型、SVG、Markdown、多檔 HTML 都支援。
第五步，匯出。HTML、PDF、PPTX、ZIP 一鍵匯出。簡報模式支援 slides.json 到 PPTX 的轉換；沒有 slides.json 的 Skill 會自動 fallback 到 PDF 轉頁面的方式。
一個值得注意的功能是 Claude Design ZIP 匯入：把 Claude Design 匯出的 ZIP 拖進 Open Design 歡迎頁，POST /api/import/claude-design 會解壓成真實專案，agent 從 Anthropic 停下的地方繼續編輯。這個設計很聰明，等於把 Claude Design 的付費使用者轉化為 Open Design 的潛在遷移者。
技術堆疊
前端用 Next.js 16 App Router + React，打包工具從 Vite 遷移過來。後端是 Node/Express daemon，負責偵測本地 agent CLI、載入 SKILL.md 和 DESIGN.md、管理專案狀態（SQLite）。有可選的 Electron 桌面殼，macOS 已簽章公證，Windows 有 NSIS 安裝程式（尚未簽章）。
多媒體生成整合了三個外部服務：gpt-image-2（Azure / OpenAI）做海報、頭像、資訊圖表；Seedance 2.0（位元組跳動）做 15 秒影片；HyperFrames（heygen-com）做 HTML 轉 MP4 動態圖像。
整個系統的入口是 pnpm tools-dev，一條指令啟動 daemon、web 和桌面。支援 Vercel 一鍵部署（vercel.json 隨 repo 附帶）。
生態系統脈絡：Agent Skill 正在成為設計基礎設施
Open Design 的出現不是孤例。2026 年上半年，AI Agent 的 Skill 生態系統經歷了一輪爆發：
VoltAgent/awesome-agent-skills 收錄了超過 1,000 個 agent skill，相容 Claude Code、Codex、Gemini CLI、Cursor 等平台。Anthropic 官方的 frontend-design skill 截至 2026 年 3 月已有超過 277,000 次安裝。Antigravity 的 awesome-skills 套件打包了 1,234 個 skill，一條指令裝完。
JetBrains 在 2026 年 3 月的文章中專門介紹了用 SKILL.md 打包簡報模板和設計規範的做法。op7418/guizang-ppt-skill（Open Design 的簡報模式基礎）和 bergside/awesome-design-skills（57 個設計系統的來源之一）是社群貢獻的代表。
這些跡象指向一個趨勢：設計能力正在從獨立應用（Figma、Canva）遷移到 coding agent 的 skill 層。Open Design 是第一個把這個概念包裝成完整產品的開源專案。
適用場景與局限
Open Design 目前適合三種人：獨立開發者需要快速出原型但請不起設計師；PM 需要視覺化 PRD 或 roadmap；技術部落客需要高品質封面圖和比較圖表。
局限也很明確。Open Design 還處於早期階段（截至 2026 年 5 月 4 日只有 3 次 commit），Issues 頁面已有超過 400 個 bug 回報，多數是 agent 相容性問題（不同 CLI 的 argv 格式不同）和 artifact 渲染失敗（模型產出文字但沒包在 <artifact> 標籤裡）。它不能像 Claude Design 那樣從 codebase 自動萃取設計系統，目前只能手動選擇或自訂 DESIGN.md。企業級可靠性需要時間驗證。
另一個結構性差異：Claude Design 的背後是 Opus 4.7 的視覺能力（解析度提升到 2,576px，是前代的三倍），加上 Anthropic 內部針對設計任務微調的 prompt stack。Open Design 用的是通用 coding agent，設計品質取決於使用者選的模型和 skill 的 prompt 品質。Brilliant 在 Claude Design 上做到「20 個 prompt 的工作量用 2 個 prompt 完成」，Open Design 目前沒有類似的效率基準。
更大的圖景：閉源與開源的拉鋸
Anthropic 在 2026 年 4 月的動作密集。4 月 16 日發布 Opus 4.7，4 月 17 日推出 Claude Design，4 月 29 日宣布與 Adobe、Autodesk、Blender、Ableton 的 MCP 連接器整合。公司年化營收已突破 190 億美元，在可追蹤的企業 AI 支出中佔 37%，超過 OpenAI 的 33%。
這個脈絡下看 Open Design，它代表的是開源社群對閉源平台壟斷設計工作流的回應。BYOK（Bring Your Own Key）的意義在哲學層面：設計能力不該被鎖在單一供應商的訂閱裡。
但開源的代價是碎片化。11 種 agent CLI 各有不同的參數格式、不同的 prompt 回應品質、不同的 token 限制。Open Design 的 daemon 需要為每一種 CLI 維護 buildArgs 函數，這個維護成本會隨著 agent 生態的演化持續增加。
筆者的判斷是：短期內（2026 年底前），Claude Design 在設計品質和易用性上會持續領先，因為 Anthropic 有動機把最好的視覺能力優先給自家產品。中長期看，Open Design 的模型無關性是真正的護城河，特別是在企業客戶因為資料主權考量需要本地部署的場景。
Open Design 跟 Claude Design 哪個適合我？
如果你是個人使用者且已有 Claude Pro/Max 訂閱，Claude Design 的體驗更完整、設計品質更高。如果你需要自架部署、想用非 Anthropic 模型、或需要深度客製化設計系統，Open Design 是目前唯一選項。
Open Design 可以用在正式產品嗎？
目前不建議。專案上線不到一週，bug 數量超過 400 個，多數圍繞 agent 相容性。原型和內部簡報可以用，面向客戶的正式產出建議再觀察兩到三個月。
Open Design 支援哪些 coding agent？
截至 2026 年 5 月，支援 11 種：Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen、GitHub Copilot CLI、Hermes、Kimi、Pi、Kiro。沒有 agent 也可以用 BYOK API 模式。
怎麼新增自訂的設計系統？
建立一個資料夾，裡面放一個 DESIGN.md，按照九大區塊（color、typography、layout、components、spacing、motion、iconography、illustration、voice）撰寫規格，提交 PR 到 nexu-io/open-design。
Claude Design 匯出的檔案可以導入 Open Design 嗎？
可以。把 Claude Design 匯出的 ZIP 檔拖到 Open Design 歡迎頁，系統會自動解壓成專案，agent 可以接著編輯。
引用來源
Author Insight
我們團隊在 Claude Design 上線第一天就開始測試，同時也在追蹤 Open Design 的開發進度。兩邊的設計品質差距目前是顯著的，Claude Design 背後有 Opus 4.7 的視覺理解能力加持，成品精緻度明顯高出一個檔次。但 Open Design 的架構選擇讓我印象深刻：不造輪子、不做 agent、只做中間層。這意味著未來不管哪家的模型最強，Open Design 都能切換。
對多數企業客戶來說，現階段用 Claude Design 做快速原型、用 Open Design 做內部工具的客製化部署，兩者並行是最務實的策略。如果你的團隊正在評估 AI 設計工具的導入策略，歡迎跟 Tenten 團隊預約諮詢，我們可以根據你的技術堆疊和資料主權需求，幫你規劃最適合的方案。
