Claude Design 的開源替代品，支持 11 種 AI Agent，還內置了 72 套品牌設計系統
整理版優先睇
Open Design 係 Claude Design 嘅開源替代，支援多種 AI Agent 同內置 72 套品牌設計系統，等開發者用現有 AI CLI 工具直接生成前端原型
呢篇文章介紹咗 Open Design，一個由社區開發嘅開源項目，旨在復刻 Anthropic 嘅 Claude Design。作者首先交代背景：Anthropic 推出 Claude Design 做 AI 輔助設計生成，而 Open Design 嘅核心區別係唔綁定 Claude——你用電腦裝咗咩 AI 工具（Claude Code、Cursor、Gemini CLI），就用邊個嚟生成，或者自帶 API Key 接入任意兼容端點。數據全部存喺本地，唔會上傳到任何服務器，目前有 12.2k Star 同 Apache 2.0 授權。
文章整理咗 Open Design 嘅主要功能同用法。生成之前要先鎖定設計條件：系統會彈出一張發現表單，問目標平台、受眾、品牌調性等參數，然後揀五套預設視覺方向之一（例如 Editorial、Modern Minimal），每個方向都有對應嘅色板同字體組合，確保輸出風格穩定。生成之後 AI 會做自我審查，過濾低質素產出。
除咗基本流程，文章仲詳細列出咗內置嘅 31 個技能（Skill），涵蓋界面原型、內容營銷、文檔三大類，例如 mobile-onboarding、saas-landing、email-marketing 等。另外有 72 套品牌設計系統，以 Markdown 形式儲存，包括 Apple、Tesla、Notion、Spotify 等知名品牌。整體結論係：呢個工具適合已經用…
- Open Design 係 Claude Design 嘅開源復刻，唔綁定特定 AI，支援 Claude Code、Cursor、Gemini CLI 等多種 Agent，數據只存本地
- 生成前透過發現表單鎖定平台、受眾、品牌調性等參數，再揀視覺方向（共五套），確保產出風格一致
- 內置 31 個技能模板，覆蓋界面原型、內容營銷、文檔三類場景；另有 72 套品牌設計系統，可自由配搭
- 對開發者嚟講，可以用同一套 AI CLI 工具順手生成原型，減少切換 Figma 或等設計師出圖嘅時間
- 安裝需要 Node.js 24 同 pnpm，克隆倉庫後執行指令即可啟動；輸出係 HTML/CSS 代碼，適合快速 prototyping
Open Design GitHub Repository
開源項目主頁，包含源碼、安裝說明同完整文件
背景與核心區別：開源、本地、多 Agent
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 嘅應對方式係喺 生成之前就將設計條件固定住。
- 1 第一步填發現表單：AI 開始寫任何代碼之前，系統彈出一張表單，問目標平台（網頁/移動/桌面）、受眾係邊個、品牌調性、顏色偏好等參數。呢啲答案會作為固定上下文貫穿整個生成過程，唔使每輪對話重新描述。
- 2 第二步選視覺方向：系統內置五套預設風格，每套都有對標嘅品牌參考——Editorial（Monocle 雜誌感）、Modern Minimal（Linear/Notion 極簡風）、Tech Utility（Bloomberg 終端）、Brutalist（粗獷風）、Soft Warm（柔和暖色）。每個方向都預設咗色板同字體組合，唔係自由發揮。
- 3 生成後自我評估：產出完成後，系統要求 AI 從五個維度做一次自我審查，配合每個技能內置嘅質量檢查清單，目的係過濾掉明顯低質素嘅輸出。
呢個流程確保咗生成結果喺 視覺上更穩定，唔會每次輸出都唔同風格。
31 個技能 + 72 套品牌設計系統：豐富嘅生成模板
技能（Skill）係 Open Design 裏面預設好嘅生成任務模板，話畀 AI 要生成咩類型嘅嘢、輸出規格係點。目前內置 31 個，覆蓋三大類：
- 界面原型類：mobile-onboarding（三幀移動引導流）、gamified-app（遊戲化 App）、dating-web（社交配對儀表盤）、dashboard（管理後台）、saas-landing（SaaS 落地頁）
- 內容與營銷類：email-marketing（品牌郵件）、social-carousel（社交媒體卡片）、digital-eguide（電子指南）
- 文檔類：pm-spec（需求文檔）、invoice（發票）、team-okrs（OKR 評分表）
每個技能都可以配合 設計系統同視覺方向使用。例如同樣係落地頁，揀 Tesla 風格同揀 Notion 風格，結果嘅視覺語言完全不同。
設計系統以 Markdown 文件形式儲存，描述品牌嘅顏色、字體、間距同組件規範。內置 72 套，包括科技產品（Apple、Tesla、Notion、Linear、Vercel、Figma、Cursor）、金融支付（Coinbase、Binance、Mastercard）、消費品牌（Nike、Airbnb、Spotify）、汽車（Tesla、BMW、Ferrari）、AI 工具（Anthropic、Mistral、Replicate）等。選唔同嘅設計系統，生成結果嘅配色、字體同排版風格會跟住變。
安裝與使用流程：簡單幾步就可以開始生成
前提條件係 Node.js 24、pnpm 10.33.x，同埋至少一個已安裝嘅 AI 編程 CLI 工具（Claude Code、Gemini CLI、Cursor Agent 等）。
- 1 git clone https://github.com/nexu-io/open-design.git 克隆倉庫
- 2 cd open-design 進入目錄
- 3 corepack enable && pnpm install 安裝依賴
- 4 pnpm tools-dev run web 啟動 daemon 同 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 產品落地頁，包含 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
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