Open Design

Open Design是什麼

Open Design 是開源本地優先的 AI 設計工作空間，定位爲 Claude Design 的替代品。不捆綁 AI 模型，是直接調用你電腦上已有的編程 Agent，如 Claude Code、Cursor、Kimi、Codex 等 21+個，通過 SKILL.md 技能和 DESIGN.md 設計系統驅動工作流。可以在桌面端完成需求定義、視覺方向鎖定、產物生成與評審的完整閉環，輸出網頁原型、儀表盤、演示文稿、圖片及視頻，導出爲 HTML、PDF、PPTX 或 MP4。

Open Design的主要功能

• 開源本地優先：Apache-2.0 許可證，是 Claude Design 的開源替代品，所有數據保存在本地，無需依賴單一廠商雲服務。
• Agent 原生驅動：支持 21+ 種編程 Agent（Claude Code、Cursor、Kimi、Codex、Gemini、Copilot、DeepSeek 等），通過 MCP 協議一鍵接入。
• 技能系統：內置 259+ 個基於 SKILL.md 的可複用設計技能，拖入文件夾即可加載，Agent 可直接讀取執行。
• 設計系統：提供 142+ 個品牌級 DESIGN.md 設計系統（Linear、Stripe、Apple、Vercel 等），支持上傳截圖或 Figma 文件自動提取品牌規範。
• 多形態產物輸出：可生成網頁原型、實時儀表盤、演示文稿（Decks）、圖片、視頻及 HyperFrames 動態圖形。
• 多格式導出：產物支持導出爲 HTML、PDF、PPTX、MP4 等工程可直接使用的格式。
• BYOK 支持：自帶 API Key，兼容 OpenAI、Anthropic、Google、Moonshot、OpenRouter、自託管 vLLM 等任意端點。
• 四步設計閉環：Detect（自動檢測 Agent）→ Discover（30 秒需求問卷）→ Direct（鎖定視覺方向）→ Deliver（流式生成與預覽）。

如何使用Open Design

• 下載安裝：訪問 Open Design 官網 https://open-design.ai/ ，下載桌面應用（macOS / Windows），或源碼克隆 github.com/nexu-io/open-design 用 Node 24 + pnpm 安裝，也可 docker compose up 一鍵部署。
• 接入編程 Agent：安裝後運行 od mcp install <agent> 將本地 Agent（Claude Code、Cursor、Kimi、Codex 等 21+）一鍵接入 Open Design 的 MCP 服務器。
• 啓動守護進程：打開應用後守護進程自動掃描 $PATH 中的 Agent，加載 259+ 技能和 142+ 設計系統。
• 創建項目：在 Home 頁選擇產物類型（原型、儀表盤、演示文稿、圖片、視頻等），綁定一個 DESIGN.md 設計系統（如 Stripe、Apple 風格或自定義品牌）。
• 鎖定需求：回答 30 秒問卷（用途、受衆、調性、規模、品牌背景），快速對齊設計方向。
• 選擇視覺方向：從 5 個確定性視覺方案中挑選，系統自動鎖定 OKLch 色板、字體棧和佈局姿態。
• 生成與預覽：Agent 將產物寫入本地磁盤，在沙盒 iframe 中實時預覽真實 CSS 渲染效果。
• 評審迭代：通過內置的 5 維自評體系（哲學、層級、執行、特異性、剋制）對產物進行批判性優化。
• 導出交付：確認後導出爲 HTML、PDF、PPTX、MP4 或 ZIP，產物直接留在你的項目目錄中。

Open Design的核心優勢

• 完全開源免費：Apache-2.0 許可證，無訂閱費，可自由 fork 和自託管。
• 本地優先，數據自主：所有產物和項目數據保存在本地文件系統，不經過廠商雲端，隱私可控。
• Agent 無關，自由切換：支持 21+ 種編程 Agent（Claude、Cursor、Kimi、Codex 等），技能和系統不綁定特定模型，換 Agent 只需改一行配置。
• BYOK 成本控制：自帶 API Key，直接向所選提供商付費，無中間商抽成，支持 OpenRouter 和自託管模型。
• 文件即設計系統：基於 SKILL.md 和 DESIGN.md 的聲明式文件系統，技能和設計系統可複用、可版本管理、可在團隊間共享。
• 真實代碼渲染：輸出的是真實 CSS、真實字體和真實組件，不是畫布像素，產物可直接進入工程流程。
• 多形態一鍵產出：同一設計系統可流式生成網頁原型、儀表盤、PPT、圖片、視頻及 HyperFrames。
• 品牌遷移零成本：上傳截圖或 Figma 導出文件，Agent 自動提取爲 DESIGN.md，後續所有技能自動套用該品牌規範。

Open Design的同類競品對比

Open Design的應用場景

• 快速產品原型設計：使用 259+ 技能和 142+ 設計系統，通過自然語言描述快速生成 Web、桌面或移動端的高保真交互原型，真實 CSS 渲染可直接用於開發交接。
• 品牌視覺系統構建與遷移：上傳品牌截圖或 Figma 導出文件，Agent 自動提取爲 DESIGN.md，建立可複用的品牌規範，確保所有產物（原型、PPT、圖片）視覺一致性。
• 演示文稿與提案製作：使用 Magazine Decks 技能生成編輯級幻燈片，支持 WebGL 動效和雜誌排版，導出 PPTX 或 PDF 用於客戶彙報和融資路演。
• 營銷素材與多媒體內容生成：通過 Synthetic Matter 技能生成圖片、視頻及 HyperFrames 動態圖形，統一在聊天界面中完成從文案到視覺的產出。
• 實時數據儀表盤搭建：生成可交互的 Live Artifact，連接真實數據源構建內部監控面板、運營看板或 SaaS 後台界面原型。
• 設計系統標準化與團隊協作：將團隊的 DESIGN.md 和 SKILL.md 存入共享倉庫，所有成員通過同一套文件驅動產出，實現設計規範的版本化管理。