Claude Design 的開源替代品，支持 11 種 AI Agent，還內置了 72 套品牌設計系統
整理版優先睇
Open Design 係 Claude Design 嘅開源替代品，支援多種 AI Agent 同內置 72 套品牌設計系統，幫開發者用現有工具快速生成設計原型。
呢篇文章介紹咗一個叫 Open Design 嘅開源項目，佢係 Anthropic Claude Design 嘅復刻版，最大分別係唔綁定 Claude，你可以用自己電腦裝咗嘅任何 AI 工具（例如 Claude Code、Cursor、Gemini CLI）嚟生成設計，或者自備 API Key 接入兼容端點。數據只存喺本地，唔會上載去任何伺服器，項目目前有 12.2k Star，Apache 2.0 授權。
作者整理呢個項目嘅出發點係想解決 AI 生成設計常見嘅問題——輸出風格唔穩定，成日要改嚟改去。Open Design 嘅做法係喺生成之前就鎖定設計條件：首先填一份發現表單，問清楚目標平台、受眾、品牌調性等參數；然後揀一個視覺方向，系統內置咗五套預設風格，每套都有對應嘅品牌參考，例如 Monocle 雜誌感、Linear 冷色極簡風、Bloomberg 終端高密度等。生成之後仲要做自我審查，確保質素。
整體嚟講，Open Design 係面向已經在用 AI 編程工具嘅開發者，等佢哋可以用同一套工具順手生成設計原型，唔使另外開 Figma 或者等設計師出圖。不過佢嘅輸出係 HTML/CSS 代碼，唔係 Figma 設計稿，亦冇可視化拖拽編輯，所以唔係設計師嘅協作工具，而係「讓 AI 幫你將設計需求轉成可運行嘅前端原型」。
- Open Design 係 Claude Design 嘅開源替代品，支援 11 種 AI Agent，數據存本地，唔綁定 Claude。
- 生成前先用問答表單鎖定目標平台、受眾、品牌調性等條件，確保風格穩定。
- 內置 5 套視覺方向（雜誌感、冷色極簡、終端高密度、粗獷風、柔和暖色）同 72 套品牌設計系統。
- 31 個預設技能覆蓋界面原型、內容營銷、文檔等場景，可配合設計系統產生唔同視覺效果。
- 輸出 HTML/CSS 代碼，適合開發者快速製作設計原型，唔係畀設計師用嘅協作工具。
Open Design GitHub 項目
項目主頁，包含源碼、文檔同安裝指引。
背景與核心差異：開源復刻，唔綁 Claude
Anthropic 之前推出咗 Claude Design 做 AI 輔助設計生成，而 Open Design 係佢嘅開源復刻版。最大分別係唔限定你只能用 Claude——你電腦上裝咗咩 AI 工具（例如 Claude Code、Cursor、Gemini CLI）就用邊個嚟生成，或者自帶 API Key 接入任何兼容端點。
數據方面全部存喺本地，唔會上載去任何伺服器，對注重私隱嘅用家嚟講係一個優點。項目目前有 12.2k Star、1.4k Fork，授權係 Apache 2.0。
生成流程：先鎖條件，後出設計
為咗解決 AI 生成設計 風格飄忽 嘅問題，Open Design 要求喺生成之前先固定設計條件。第一步係填 發現表單：AI 開始寫任何代碼之前，系統會彈出一張表單，問你目標平台（網頁/移動/桌面）、受眾、品牌調性、顏色偏好等參數。呢啲答案會作為固定上下文貫穿成個生成過程，唔使每輪對話重新描述。
- 1 填問答表單：鎖定平台、受眾、品牌調性等參數。
- 2 選視覺方向：系統內置五套預設風格，每套都有品牌參考（例如 Editorial 模仿 Monocle、Modern Minimal 模仿 Linear）。
- 3 生成後自我評估：從五個維度做自我審查，配合內置質量檢查清單，過濾低質素輸出。
五套視覺方向包括 Editorial（暖色調+襯線）、Modern Minimal（留白冷色）、Tech Utility（等寬高密度）、Brutalist（粗獷大字）同 Soft Warm（柔和低對比）。每種方向都預設咗色板同字體組合，唔係畀 AI 自由發揮顏色，所以生成結果喺視覺上更穩定。
31 個技能 + 72 套品牌設計系統
技能（Skill）係 Open Design 裏面預設好嘅生成任務模板，話畀 AI 要生成咩類型嘅嘢同輸出規格。目前內置咗 31 個，覆蓋界面原型、內容營銷同文檔等場景。例如 mobile-onboarding 會生成三幀移動端引導流、saas-landing 係 SaaS 落地頁、team-okrs 係 OKR 評分表。
- 界面原型類：mobile-onboarding、gamified-app、dating-web、dashboard、saas-landing。
- 內容與營銷類：email-marketing、social-carousel、digital-eguide。
- 文檔類：pm-spec、invoice、team-okrs。
而 72 套品牌設計系統 以 Markdown 文件形式存儲，描述品牌嘅顏色、字體、間距同組件規範，作為生成上下文傳畀 AI。覆蓋範圍包括科技產品（Apple、Tesla、Notion、Figma）、金融支付（Coinbase、Mastercard）、消費品牌（Nike、Spotify）同 AI 工具（Anthropic、Mistral、ElevenLabs）。唔同設計系統會令生成結果嘅配色、字體同排版風格有明顯分別——揀 Tesla 就係冷白極簡，揀 Spotify 就係深綠暗色。
安裝同使用：幾步就起動
前提條件係 Node.js 24、pnpm 10.33.x，同最少一個已安裝嘅 AI 編程 CLI 工具（例如 Claude Code、Gemini CLI 或 Cursor Agent）。安裝步驟好簡單：先 clone 倉庫，然後 cd 入目錄，用 corepack enable 同 pnpm install 裝依賴，最後行 pnpm tools-dev run web 啟動 daemon 同 Web 界面。
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web啟動後系統會自動掃描 PATH 裏面已安裝嘅 AI CLI，列出可用 Agent。如果你冇裝任何 CLI，都可以喺設定度填 OpenAI 兼容 API 端點 同 Key。基本流程係：新建項目 → 揀 Agent 同技能 → 填問答表單 → 揀視覺方向 → 提交生成。產物會存喺本地 .od/projects/ 目錄，支援沙盒預覽 HTML，可以導出做 PDF 或 PPTX。
對象同限制：開發者快速原型工具
Open Design 係為咗已經用緊 Claude Code、Cursor 等工具做開發嘅人而設，等佢哋可以用同一套工具順手生成設計原型，唔需要再開 Figma 或者等設計師出圖。不過要注意，佢嘅輸出係 HTML/CSS 代碼，唔係 Figma 設計稿，亦冇可視化拖拽編輯。
呢個唔係畀設計師用嘅協作工具，而係「讓 AI 幫你將設計需求轉成可運行嘅前端原型」。項目仲喺快速迭代中，Electron 桌面版 喺開發緊，文檔相對精簡。建議上手時先用內置示例技能跑通流程，再替換成自己需要嘅設計系統同配置。
Anthropic 前排出咗 Claude Design，用嚟做 AI 輔助設計生成。Open Design 係佢嘅開源復刻版，核心分別係唔綁定 Claude——你電腦裝咗咩 AI 工具（Claude Code、Cursor、Gemini CLI），就用邊個嚟生成，或者自帶 API Key 接入任何兼容端點。數據放喺本地，唔上傳去任何伺服器。
項目目前有 12.2k Star、1.4k Fork，Apache 2.0 授權。
生成之前先鎖實設計條件
用 AI 生成設計最常見嘅問題係：輸出風格飄忽，改嚟改去。Open Design 嘅應對方法係喺生成之前就將設計條件固定實。
第一步填問答表單：AI 開始寫任何代碼之前，系統會先彈出一張發現表單，問目標平台（網頁/移動/桌面）、受眾係邊個、品牌調性、顏色偏好等參數。呢啲答案會作為固定上下文貫穿成個生成過程，唔係每輪對話重新描述。
第二步揀視覺方向：系統內置咗五套預設風格，每套都有對標嘅品牌參考：
• Editorial：Monocle、FT Weekend 嗰種印刷雜誌感，暖色調+襯線字體
• Modern Minimal：Linear、Vercel、Notion 嗰種冷色極簡風，大量留白
• Tech Utility：Bloomberg 終端風格，資訊密度高，等寬字體
• Brutalist：Bloomberg Businessweek 嗰種粗獷風，超大字號，無陰影
• Soft Warm：Apple Health、Notion 營銷頁嗰種柔和暖色，低對比度
每種方向都預設咗色板同字體組合，唔係俾 AI 自由發揮顏色，而係揀一個方向，生成結果喺視覺上更穩定。
生成後自我評估：產出完成後，系統要求 AI 從五個維度做一次自我審查先可以提交結果，配合每個技能內置嘅質量檢查清單，目的係過濾走明顯低質量嘅輸出。
31 個技能覆蓋嘅具體場景
技能（Skill）係 Open Design 裏面預設好嘅生成任務模板，話俾 AI 知要生成咩類型嘅嘢、輸出規格係咩。目前內置 31 個，覆蓋範圍：
界面原型類：
• mobile-onboarding：三幀移動端引導流，裝喺 iPhone 15 Pro 框裏面，包含歡迎頁、價值主張頁、登錄頁
• gamified-app：三幀遊戲化 App，暗色背景，今日任務列表帶 XP 進度條同關卡徽章
• dating-web：社交匹配儀錶板，左側導航、KPI 指標卡、30 天趨勢圖、雜誌感排版
• dashboard：管理後台 / 數據分析佈局，側邊欄 + 高密度數據展示
• saas-landing：SaaS 產品 Landing Page，包含 Hero、功能列表、定價、CTA 區塊
內容同營銷類：
• email-marketing：品牌發佈電郵，單列 table 結構，保證喺各電郵客戶端正常顯示
• social-carousel：三張 1080×1080 社交媒體卡片，跨卡連貫嘅大字標題
• digital-eguide：兩頁電子指南，封面 + 內容頁，帶引言塊同步驟列表
文檔類：
• pm-spec：PM 需求文檔，帶目錄同決策日誌
• invoice：單頁發票模板
• team-okrs：OKR 評分表
每個技能都可以配合設計系統同視覺方向使用，同樣係 Landing Page，揀 Tesla 風格設計系統同揀 Notion 風格設計系統，結果嘅視覺語言完全唔同。
72 套品牌設計系統
設計系統以 Markdown 文件形式儲存，描述品牌嘅顏色、字體、間距同組件規範，作為生成上下文傳俾 AI。內置覆蓋範圍：
• 科技產品：Apple、Tesla、Notion、Linear、Vercel、Figma、Cursor
• 金融支付：Coinbase、Binance、Mastercard、Revolut
• 消費品牌：Nike、Airbnb、Spotify、Starbucks
• 汽車：Tesla、BMW、Ferrari、Lamborghini、SpaceX
• AI 工具：Anthropic、Mistral、Replicate、ElevenLabs
揀唔同嘅設計系統，生成結果嘅配色、字體同排版風格會跟住變——揀 Tesla 就係冷白極簡，揀 Spotify 就係深綠暗色，揀 Notion 就係米白幼無襯線。
安裝同使用
前提條件：Node.js 24、pnpm 10.33.x，以及至少一個已安裝嘅 AI 編程 CLI 工具（Claude Code、Gemini CLI、Cursor Agent 等任何一個）。
git clone https://github.com/nexu-io/open-design.git | ||
cd open-design | ||
corepack enable && pnpm install | ||
pnpm tools-dev run web |
啟動後系統自動掃描 PATH 裏面已安裝嘅 AI CLI，列出可用 Agent。冇安裝任何 CLI 嘅話，都可以喺設置裏面填 OpenAI 兼容嘅 API 端點同 Key。
基本流程：新建項目 → 揀 Agent 同技能 → 填問答表單 → 揀視覺方向 → 提交生成。產物放喺本地 .od/projects/ 目錄，支援沙盒預覽 HTML，可導出做 PDF/PPTX。
寫喺最後
Open Design 面向嘅係已經在用 Claude Code、Cursor 等工具做開發嘅人——想用同一套工具順手生成設計原型，而唔需要再開一個 Figma 或者特登揾設計師出圖。
codex
佢嘅輸出係 HTML/CSS 代碼，唔係 Figma 設計稿，冇可視化拖拽編輯。呢個唔係設計師嘅協作工具，更加似係「讓 AI 幫你將設計需求轉成可運行嘅前端原型」。
項目仲喺快速迭代，Electron 桌面版處於開發中，文檔相對精簡。上手時建議先用內置示例技能跑通流程，再換成自己需要嘅設計系統同配置。
GitHub 項目地址：https://github.com/nexu-io/open-design
掃碼直達 ⤵️ 或加微信 sanmu1598
Anthropic 前段時間推出了 Claude Design，用來做 AI 輔助設計生成。Open Design 是它的開源復刻版，核心區別是不綁定 Claude——你電腦上裝了什麼 AI 工具（Claude Code、Cursor、Gemini CLI），就用哪個來生成，或者自帶 API Key 接入任意兼容端點。數據存在本地，不上傳到任何服務器。
項目目前有 12.2k Star、1.4k Fork，Apache 2.0 授權。
生成之前先鎖定設計條件
用 AI 生成設計最常見的問題是：輸出風格飄忽，改來改去。Open Design 的應對方式是在生成之前就把設計條件固定住。
第一步填問答表單：AI 開始寫任何代碼之前，系統先彈出一張發現表單，詢問目標平台（網頁/移動/桌面）、受眾是誰、品牌調性、顏色偏好等參數。這些答案作為固定上下文貫穿整個生成過程，不是每輪對話重新描述。
第二步選視覺方向：系統內置了五套預設風格，每套都有對標的品牌參考：
• Editorial：Monocle、FT Weekend 那種印刷雜誌感，暖色調+襯線字體
• Modern Minimal：Linear、Vercel、Notion 那種冷色極簡風，大量留白
• Tech Utility：Bloomberg 終端風格，信息密度高，等寬字體
• Brutalist：Bloomberg Businessweek 那種粗獷風，超大字號，無陰影
• Soft Warm：Apple Health、Notion 營銷頁那種柔和暖色，低對比度
每種方向都預設了色板和字體組合，不是讓 AI 自由發揮顏色，而是選一個方向，生成結果在視覺上更穩定。
生成後自我評估：產出完成後，系統要求 AI 從五個維度做一次自我審查才能提交結果，配合每個技能內置的質量檢查清單，目的是過濾掉明顯低質量的輸出。
31 個技能覆蓋的具體場景
技能（Skill）是 Open Design 裏預設好的生成任務模板，告訴 AI 要生成什麼類型的東西、輸出規格是什麼。目前內置 31 個，覆蓋範圍：
界面原型類：
• mobile-onboarding：三幀移動端引導流，裝在 iPhone 15 Pro 框裏，包含歡迎頁、價值主張頁、登錄頁
• gamified-app：三幀遊戲化 App，暗色背景，今日任務列表帶 XP 進度條和關卡徽章
• dating-web：社交匹配儀表盤，左側導航、KPI 指標卡、30 天趨勢圖、雜誌感排版
• dashboard：管理後台 / 數據分析佈局，側邊欄 + 高密度數據展示
• saas-landing：SaaS 產品落地頁，包含 Hero、功能列表、定價、CTA 區塊
內容與營銷類：
• email-marketing：品牌發佈郵件，單列 table 結構，保證在各郵件客戶端正常顯示
• social-carousel：三張 1080×1080 社交媒體卡片，跨卡連貫的大字標題
• digital-eguide：兩頁電子指南，封面 + 內容頁，帶引言塊和步驟列表
文檔類：
• pm-spec：PM 需求文檔，帶目錄和決策日誌
• invoice：單頁發票模板
• team-okrs：OKR 評分表
每個技能都能配合設計系統和視覺方向使用，同樣是落地頁，選 Tesla 風格設計系統和選 Notion 風格設計系統，結果的視覺語言完全不同。
72 套品牌設計系統
設計系統以 Markdown 文件形式存儲，描述品牌的顏色、字體、間距和組件規範，作為生成上下文傳給 AI。內置覆蓋範圍：
• 科技產品：Apple、Tesla、Notion、Linear、Vercel、Figma、Cursor
• 金融支付：Coinbase、Binance、Mastercard、Revolut
• 消費品牌：Nike、Airbnb、Spotify、Starbucks
• 汽車：Tesla、BMW、Ferrari、Lamborghini、SpaceX
• AI 工具：Anthropic、Mistral、Replicate、ElevenLabs
選不同的設計系統，生成結果的配色、字體和排版風格會跟着變——選 Tesla 就是冷白極簡，選 Spotify 就是深綠暗色，選 Notion 就是米白細無襯線。
安裝與使用
前提條件：Node.js 24、pnpm 10.33.x，以及至少一個已安裝的 AI 編程 CLI 工具（Claude Code、Gemini CLI、Cursor Agent 等任意一個）。
git clone https://github.com/nexu-io/open-design.git | ||
cd open-design | ||
corepack enable && pnpm install | ||
pnpm tools-dev run web |
啓動後系統自動掃描 PATH 裏已安裝的 AI CLI，列出可用 Agent。沒有安裝任何 CLI 的話，也可以在設置裏填 OpenAI 兼容的 API 端點和 Key。
基本流程：新建項目 → 選 Agent 和技能 → 填問答表單 → 選視覺方向 → 提交生成。產物存在本地 .od/projects/ 目錄，支持沙盒預覽 HTML，可導出為 PDF/PPTX。
寫在最後
Open Design 面向的是已經在用 Claude Code、Cursor 等工具做開發的人——想用同一套工具順手生成設計原型，而不需要再開一個 Figma 或者專門找設計師出圖。
codex
它的輸出是 HTML/CSS 代碼，不是 Figma 設計稿，沒有可視化拖拽編輯。這不是設計師的協作工具，更像是"讓 AI 幫你把設計需求轉成可運行的前端原型"。
項目還在快速迭代，Electron 桌面版處於開發中，文檔相對精簡。上手時建議先用內置示例技能跑通流程，再替換成自己需要的設計系統和配置。
GitHub 項目地址：https://github.com/nexu-io/open-design
掃碼直達 ⤵️ 或加微信 sanmu1598