Claude絕對不想讓你知道這個開源免費平替 ｜OpenDesign 8000字保姆級教程

佢叫 Open Design。

如果你用過 Claude Design，你大概知道我在講乜。

Claude Design 係 Anthropic 4月17日推出嘅一款AI驅動設計工具，搭載 Claude Opus 4.7，可以幫你快啲做好產品原型，而且生成嘅設計效果非常之咁靚。

但佢有個講到爛嘅問題：貴。

你就算訂咗20美金甚至100美金嘅版本，基本上都創建唔到兩個項目，週額度就用曬。

而且佢只可以接 Claude 自己嘅訂閲，冇其他選擇。

更令人失望嘅係，佢上線差唔多一個月，幾乎冇任何更新，感覺好似發佈完就放低咗喺度。

然後喺 Claude Design 上線僅僅11日之後，開源社區就畀咗個響亮嘅回應。

Open Design，喺4月28日喺 GitHub 正式發佈，6日之內突破2萬 Star，而家已經接近5萬。

至於點解咁火爆，睇下 Open Design 做出嚟嘅成品效果就知。

社交媒體矩陣數據追蹤器：

手機 App 界面：

效果完全唔輸 Claude Design。

Anthropic 用咗幾個月時間打造 Claude Design，社區用咗11日就整好咗，仲要係免費、開源嘅。

今日呢篇文章，我就帶大家完整行一次 Open Design 嘅使用流程。由佢係乜到點安裝，由點樣做原型到點樣改細節，每一步都會講清楚，新手都可以跟住做。

內容唔少，但全部都係乾貨，一步都唔跳。廢話少講，直接開始。

Open Design 係乜

先講清楚佢係乜，再講點用。

Open Design 本質上係一個本地優先、開源免費嘅AI設計工具。佢做嘅嘢同 Claude Design 一樣，幫你將一段文字描述變成可運行嘅網頁原型、PPT、流動裝置界面、視覺物料，但佢嘅運行方式完全唔同。

Claude Design 將 AI 模型鎖死喺 Anthropic 嘅服務器上，你只能用 Claude 嘅額度、使 Claude 嘅錢、喺 Claude 嘅平台上用。

Open Design 就唔同，佢係一個設計工作流程嘅外殼，將你部機已經裝好嘅 AI Agent，例如 Claude Code、Codex CLI、Cursor Agent、Gemini CLI 等，令呢啲 Agent 可以好似專業設計師咁產出設計成果。

用一句話概括：

Open Design = 你現有嘅 AI Agent + 專業設計工作流程 + 品牌級設計系統 + 內置自我審查機制

你已經訂咗 Codex？咁你用 Open Design 基本上就係無限用，唔使額外畀一分錢。

你用嘅係 Cursor Agent？都得。你用 Claude Code？完全冇問題。佢支援16種主流 CLI 工具自動識別接入。

除咗接 CLI，佢仲內置咗 OpenAI 兼容嘅 BYOK 代理，填入 baseUrl + apiKey + model 就用得，支援 Anthropic、DeepSeek、OpenRouter，甚至 Ollama 本地模型，無論你嘅 AI 預算有幾多，佢都可以揾到適合你嘅路。

再講下佢嘅設計系統。

呢啲係 Open Design 真正值錢嘅地方。裏麪包含 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma、小紅書等一線科技同消費品牌嘅設計語言，每套都帶完整嘅顏色 Token、排版規範、間距系統、組件庫同動效規範。

即係話你唔需要識設計，只要話俾佢知我要做一個 Cursor 風格嘅AI工具官網，佢就會自動套用完整嘅 Cursor 設計語言，出嚟嘅效果同真正嘅產品設計師做嘅幾乎冇分別。

仲有一個值得特別講嘅功能，叫 Critique Theater（設計評審機制）。

呢個係由五個虛擬設計評審組成嘅質檢機制，每次生成內容之前，會對可及性、品牌貼合度、工藝、滿足度、結構五個維度評分，如果任何一個維度低過閾值，AI 會自動修改再重新評分，直到通過先會將結果畀你睇。

換句話講，佢除咗生成之外，仲會評估自己嘅輸出並迭代，直到達標為止。

記住，呢一點，先係佢真正超越普通 AI 生成工具嘅地方。

二、安裝配置：兩種方式，十分鐘內搞掂

Open Design 有兩種使用方法，我都講一次，你根據自己情況揀。

方式一：電腦客戶端（推薦新手）

呢個係最簡單嘅方式，下載一個安裝包，雙擊安裝，搞掂。

第一步：打開官網：open-design.ai

大概感受下佢嘅設計審美，然後揾到下載跳轉頁。

第二步：跳轉到 GitHub 下載頁

點擊 Download 之後會跳到 GitHub 嘅 Releases 頁面。向下碌，你會見到 macOS 版本同 Windows 版本。

今日我哋以 Windows 版本為例示範。

第三步：安裝並打開

下載完成後雙擊安裝包，跟住提示完成安裝。打開客戶端，你會入到主界面。如果你係新用戶，設計區域係空嘅，乜都冇，呢個完全正常，繼續下一步。

第四步：配置你嘅 Agent（最關鍵嘅一步）

打開設定，揾到 Agent / CLI 配置區域。呢度要揀你想令 Open Design 調用嘅 Agent。如果你已經有某個 CLI 工具，按下面嘅對應關係配置：

裝咗 Claude Code → 揀 Claude Code

裝咗 Codex CLI → 揀 Codex CLI

裝咗 Cursor Agent → 揀 Cursor Agent

裝咗 Gemini CLI → 揀 Gemini CLI

配置完成後，撳測試連通性，如果提示連接成功，你就可以正常使用。

如果你一個 CLI 都冇裝，都完全冇問題。Open Design 內置咗 OpenAI 兼容嘅 BYOK 代理，只需要填入三個參數就用得：

baseUrl：你嘅 API 服務地址

API：你嘅 API 密鑰

model：你想用嘅模型名稱

支援 Anthropic、DeepSeek、Groq、OpenRouter、自託管 vLLM，甚至 Ollama 本地模型都可以接入。

即係話，你只要有任何一個 AI API 賬號，就可以令 Open Design 行得鬱，剩下嘅就睇各個模型嘅能力。

成個安裝同配置流程，前後大概十分鐘內可以搞掂，就算完全冇技術背景嘅新手，都可以順利完成。

方式二：從源碼運行（適合開發者）

如果你係開發者，想自己編譯或者二次開發，可以揀從源碼運行。將下面三行指令依次輸入終端：

git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install && pnpm dev:all

呢個方式相對複雜啲，如果喺配置環境呢一步遇到問題，可以將報錯截圖發俾你用緊嘅 AI Agent（例如 Codex），等佢幫你解決，或者你直接將今日呢篇文章掉俾你嘅龍蝦又好，愛馬仕又好，都得，就等佢睇，等佢裝。

Open Design 可以做啲乜

安裝完成、Agent 配置好之後，我哋嚟認識下 Open Design 嘅主界面，搞清楚佢到底可以做啲乜。

打開客戶端，你會見到主界面有幾個核心功能區域。Open Design 可以做嘅嘢，比大多數人想像嘅要多：

1. 原型圖（Prototype）

呢個係目前完成度最高、最值得掌握嘅核心功能。

你可以用自然語言直接口噴，Open Design 會生成完整嘅 HTML/CSS 網頁原型，包含真實互動邏輯，可以喺瀏覽器直接行。

注意，唔係截圖，唔係靜態圖片，係真係可以撳、有效果嘅網頁。

2. 幻燈片（Slides）

可以生成雜誌風格嘅 PPT 幻燈片。如果你見過嗰啲排版精美、視覺衝擊力強嘅產品 Deck，佢基本上就可以做到呢種水準。輸入你嘅主題同內容要點，佢會自動生成完整嘅幻燈片結構同視覺設計。

3. 實時製品（Live Artifacts）

呢個功能係直接用嚟開發真實項目嘅，生成嘅唔係原型，而係可以直接整合到真實程式碼庫嘅代碼。

不過呢個功能而家仲係 Beta 版，整體效果仲未及原型穩定，等佢成熟咗之後會係非常強大嘅功能，目前建議先了解嚇就算。

4. 媒體生成（圖片 / 影片）

Open Design 內置咗三大主流媒體生成模型：

gpt-image-2：用嚟生成海報、資訊圖等圖片素材

字節跳動 Seedance 2.0：生成電影感短片

HeyGen 開源嘅 HyperFrames：配有93個開箱即用嘅提示詞模板

當然，使用呢啲媒體生成功能需要自己配置對應嘅 API Key。

如果你有相關賬號，可以喺設定填入；如果暫時冇，跳過呢部分完全唔影響原型圖功能嘅使用。

5. 豐富嘅技能（Skills）

Open Design 內置咗大量可組合嘅技能模組，涵蓋排版優化、色彩方案、動效設計、響應式佈局等各個維度。

另外，可以見到喺界面右邊，原型圖、 實時製品、幻燈片、媒體生成（圖片 / 影片）都有豐富且優質嘅模板案例。

每個模板都配有詳細嘅提示詞，可以直接拎嚟用，對新手來講非常友好，唔知點寫提示詞？冇問題，先睇下模板係點寫，照住改就得。

實戰：做一個網頁原型

而家進入最重要嘅部分：實際操作。我帶大家完整做一次原型圖，每一個步驟、每一個選項我都講清楚，包括點解要咁揀、唔同選項代表啲乜。

Step 1：新建原型，填寫基本資料

喺創建頁面，項目名稱隨便改一個，令你自己認得出就得。

Step 2：選擇設計體系（Design System）

呢個係成個配置最值得花時間理解嘅選項。好多人見到設計體系呢個詞就覺得好高級、好難明，但其實講白咗就係一套預先約定好嘅產品設計規範。

一套完整嘅設計體系包含三個核心要素：

基礎視覺規範：顏色、字體、間距、圓角、陰影呢啲最底層嘅規則，決定咗整體視覺風格

組件庫：按鈕、表格、卡片、導航欄呢啲可以重複使用嘅 UI 積木

使用規範：咩場景用咩組件、用幾多、點樣組合、有冇禁止事項

有咗呢三個要素，先叫一套完整嘅設計體系。

Open Design 目前內置超過140種設計體系，包括 Claude 風格、Ant Design 風格、Hugging Face 風格、MiniMax 風格，以及 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma、小紅書等一線品牌嘅設計語言。

呢度要提醒一點：呢啲設計體系並唔係完整嘅企業級設計系統，更準確嚟講係風格模板，佢幫你快啲起步，對快做原型嚟講已經完全夠用。

揀邊個？我俾新手一個簡單直接嘅建議：如果你冇特別明確嘅方向，直接揾一個你覺得視覺風格靚嘅大廠品牌，照住揀。

例如用 Cursor 風格做科技感網站、用 Stripe 風格做金融產品頁、用 Linear 風格做工具類產品，通常唔會錯。

Step 3：選擇目標平台（Target Platform）

呢個選項決定你要做嘅係咩平台嘅界面：

Responsive Web：響應式網頁，可以根據屏幕寬度自動調整佈局，適配桌面同流動裝置。呢個係最常用嘅選項。

Desktop：專門針對桌面優化嘅界面，唔會隨屏幕縮細自動調整佈局

iOS：針對 iPhone 屏幕尺寸同互動規範嘅流動裝置界面

Android：針對 Android 屏幕嘅流動裝置界面，跟隨 Material Design 規範

唔確定揀邊個？大多數情況下，揀 Responsive Web 就啱。

Step 4：配套界面開關

呢度有兩個可選嘅開關：

Include landing page：係咪同時生成一個介紹/入口頁

打開之後通常會多一個類似官網首頁、產品介紹頁、歡迎頁嘅額外頁面。如果你只想生成主要應用界面，關閉就得；如果你想有一個完整嘅產品展示，可以打開。

Include OS widgets：係咪同時生成系統小組件風格嘅界面

例如手機桌面小組件、狀態卡片、快捷資訊塊呢啲類似操作系統組件嘅嘢。一般新手用唔到，保持關閉就得。

Step 5：選擇精度線框圖 vs 高保真原型

呢個係最後一個關鍵選項。

線框圖（Wireframe）：只有基本佈局同結構，冇顏色同精細視覺，適合產品方向未諗清楚、只想梳理頁面結構同互動邏輯嘅階段

高保真原型（High-fidelity）：完整嘅視覺設計，顏色、字體、圖片、動效全部到位，睇起嚟接近真實產品

建議：大部分情況下直接揀高保真。高保真更直觀，更容易發現問題，亦更有成就感，可以令你一眼睇出最終效果係咪符合預期。

配置全部填好之後，撳創建，進入對話頁面。

Step 6：描述你嘅需求（關鍵！）

入到對話頁面之後，Open Design 會叫你描述你想做嘅嘢。呢度有兩種輸入方式：

1.直接用文字描述你嘅需求，越詳細越好；

2.上傳設計參考截圖，等佢根據截圖嘅風格嚟生成

發送需求之後，佢唔會直接開始生成，而係會先問你幾個補充問題：

產品係為邊個設計？視覺風格偏好係乜？大概做幾多內容？需要邊啲功能？品牌方向係乜？有其他特別要求嗎？

呢啲問題唔係固定嘅，會根據你嘅具體需求動態調整。認真回答呢啲問題，佢生成嘅結果會更準確。如果你唔肯定點答，都可以大概講下方向，剩下嘅等佢自己決定。

我呢度揀咗 Cursor 設計體系，然後話生成一個叫 WANGHEI 嘅 AI 工具官網下載頁面，然後就開始答佢嘅問題。

答完之後，佢就開始生成過程，完成後，界面右邊會直接顯示預覽效果。

建議全螢幕睇，因為我揀嘅就係 Cursor 設計體系，你會發現佢生成嘅結果同 Cursor 官網嘅設計語言高度吻合，真係接近專業產品設計嘅水準。

點樣微調

生成出嚟之後，多數會有一些地方唔太滿意，或者想調整，呢個非常正常。Open Design 提供咗幾種唔同嘅調整方式，我分別講一次。

方式一：Tweaks 區域快速切換主題風格

喺界面上方嘅 Tweaks 區域，你可以直接切換主題顏色風格，例如將原本嘅白色風格變成偏紫色系，或者其他顏色，快速預覽唔同嘅視覺方向。

呢個功能非常適合喺早期階段快速比較唔同色彩方案，唔需要話俾 AI 任何指令，一鍵切換，實時預覽。

方式二：Comments 模式精準指令修改

如果你想修改某一個具體嘅區域，呢個方式最精準。

撳界面上面嘅 Comments 掣，再撳 Picker，然後用滑鼠揀中你想修改嗰塊佈局區域，就可以框起佢，然後會出現一個輸入框，喺輸入框直接用文字話俾 Agent 知你想改成咩效果。

例如可以揀文字，要求字間距闊啲。

方式三：深度編輯

撳編輯後進入更細緻嘅編輯狀態，你可以直接修改具體嘅文案內容、調整樣式參數（顏色值、字型大小、間距等）、修改跳轉連結等等。

呢個模式嘅高階玩法需要你對 HTML 同 CSS 有一定認識，先可以精準調整樣式屬性同連結邏輯。

如果你係純新手，用嚟改文案內容冇問題；深度樣式調整建議揾有開發背景嘅朋友幫手，或者藉助 AI 解釋具體嘅參數意思。

多端預覽：檢查唔同屏幕下嘅效果

喺右上方預覽區域，你可以隨時切換桌面端、iPad 端同流動裝置端，睇唔同屏幕尺寸下嘅佈局效果。

呢個功能強烈建議每次生成之後都睇下，因為桌面效果靚，唔代表流動裝置都靚，提早檢查可以避免後期返工。

另外，撳設計文件可以睇同打開具體嘅源碼文件；

撳右上方嘅分享掣，可以生成一個連結分享俾其他人預覽。

進階技巧

技巧一：導入 Claude Design 項目繼續編輯

如果你之前喺 Claude Design 上做過項目，唔需要從頭嚟過。

喺創建頁面下方有一個導入 Claude Design嘅選項，將你喺 Claude Design 上導出嘅 ZIP 檔案上載入嚟，Open Design 會自動解析成可編輯嘅項目，你嘅 Agent 可以繼續喺原來嘅基礎上編輯。

呢個無縫遷移嘅設計，係 Open Design 團隊對 Claude Design 用戶嘅一個體貼設計，而家唔係都流行挖牆腳嘛。

技巧二：用 @ 命令調用技能模組

喺對話輸入框，輸入 @ 符號可以叫出技能列表，直接撳揀你需要嘅技能模組。

技巧三：用 / 命令快速切換功能

喺輸入框輸入 / 符號，可以快速切換功能模式，例如切換寵物設定、透過 OD Research 指令搜尋網頁獲取靈感，或者叫出 MCP（Model Context Protocol）功能。

MCP 嘅掣喺左下角都可以直接撳打開，佢準許你連接外部服務同數據源，係擴展 Open Design 能力嘅重要入口。

技巧四：善用模板，新手最快嘅上手路徑

Open Design 內置咗大量高質素模板，每個模板都配有詳細嘅提示詞說明。

如果你唔識寫提示詞，最快嘅學習方式就係直接去睇呢啲模板，睇佢哋係點樣描述需求，然後照住改成你自己嘅內容。

呢個比自己摸索快得多，畢竟每個人都係從模仿開始，呢個就係活人感學習法：先睇明人哋點做，形成肌肉記憶，再發展出自己嘅套路。

技巧五：遇到問題，先截圖俾 Agent 問

喺使用過程中，如果遇到任何睇唔明嘅報錯、或者唔知某個選項係咩意思，最直接嘅解決方法就係截圖，發俾你正在用嘅 AI Agent，等佢幫你解釋或解決。

其實唔止今日介紹呢個工具，好多時候我見到後台留言問問題，其實問我真係不如問你嘅 AI，99%嘅時候都會比我答得好，呢個係效率最高嘅方法。

常見問題

Q：生成結果唔符合預期，係提示詞嘅問題嗎？

大多數情況下，係。提示詞越詳細，結果越準確。建議你喺描述需求嘅時候，明確講出：目標用戶係邊個、核心功能有邊啲、視覺風格偏向咩、大概需要幾多頁或幾個區塊。回答佢嘅補充問題時都唔好太求其，呢啲問題直接影響生成質素。

Q：生成速度好慢，正常嗎？

生成速度取決於你接入嘅 Agent 同網絡狀況。用本地 CLI 工具嘅速度通常比調用遠程 API 快。如果速度明顯慢，可以檢查下網絡連接，或者試下換一個 Agent 測試對比。

Q：我冇任何 AI API，用得嗎？

如果你完全冇任何 AI 賬號或 API Key，咁暫時冇辦法用 Open Design，因為佢本質上係一個設計工作流程層，底層始終需要 AI 模型嚟驅動。

Q：Open Design 同 Claude Design 相比，差距大嗎？

對於日常原型同產品設計需求嚟講，兩者幾乎冇可感知嘅差距，甚至喺靈活性上 Open Design 有明顯優勢，畢竟佢支援16種 Agent 接入，唔會將你鎖死喺某一個平台上。

Claude Design 喺極致嘅生成質素上可能有一定優勢，畢竟係 Anthropic 親自調校嘅，但呢種差距唔足以支撐佢每個月幾十美金嘅額外成本。

結語

喺收尾之前，我想講一個更大嘅話題，點解 Open Design 能夠喺6日內拎到2萬 Star，呢個背後說明咗啲乜？

其實有一個規律可循：Anthropic 發佈嘅每一個封閉產品，開源社區都會迅速做出回應，而且回應速度越來越快。

由 Claude Code 到 OpenCode，由 Claude Design 到 Open Design，呢個模式唔係一次性事件，佢代表嘅係開源世界對封閉 AI 產品嘅系統性反應。

更值得留意嘅係，Open Design 並唔只係便宜版嘅 Claude Design，佢喺某啲維度上已經超越咗原版：佢支援16種 Agent 接入，而 Claude Design 只能用 Claude；

佢有 Critique Theater 呢啲自我審查機制，令 AI 唔止係生成，而係評估同迭代；佢仲喺高速迭代，社區活躍度遠超 Claude Design 上線一個月幾乎冇更新嘅狀態。

呢個唔係話 Anthropic 唔好，Claude Design 嘅原創性同完成度依然值得尊重。但呢個現象話俾我哋知：當一個強大嘅封閉工具出現，開源社區會用自己嘅方式畀出答案，而且呢個答案往往更靈活、更包容、對普通用戶更友好。

你可能唔從事設計，但你總會接觸到設計、用到設計、或者需要設計。Open Design 唔會令你變成設計大師，但佢可以令你嘅審美品味升一個台階，由講唔清自己想要乜，變成做到接近專業水準嘅原型。

而呢一切，都係免費嘅。

技術普惠，就應該係咁樣。

如果你係第一次接觸 Open Design，建議你今日就去裝好，先將 Agent 配置行通，然後隨便諗一個你最近需要做嘅嘢，一個產品介紹頁、一個活動落地頁、一個個人履歷網站，掉入去試下。

第一次見到生成結果嘅時候，你大概會同我有一樣嘅感受：呢樣嘢，以前係要畀錢請設計師先做到。

而家，你自己就可以。

項目地址：github.com/nexu-io/open-design

官網：open-design.ai

呢個星期都喺搞呢篇教程，越研究越發現呢個唔係簡簡單單就可以介紹清楚嘅一個工具，所以，就想盡量寫詳細啲，大家就少啲問題，目的就係想令大家瞭解佢，去用佢。結果寫完發現，8000幾字，如果呢篇對大家有幫助，就多多點讚同轉發收藏，多謝大家。

它叫 Open Design。

如果你用過 Claude Design，你大概知道我在說什麼。

Claude Design 是 Anthropic 4 月 17 日推出的一款 AI 驅動設計工具，搭載 Claude Opus 4.7，能幫你快速做產品原型，而且生成出來的設計效果非常哇塞。

但它有一個老生常談的問題：貴。

你哪怕訂了 20 美金甚至 100 美金的版本，基本上創建不了兩個項目，周額度就用光了。

而且它只能接 Claude 自己的訂閲，沒有別的選擇。

更讓人失望的是，它上線快一個月了，幾乎沒有任何更新，感覺像是發佈完就擱那兒了。

然後在 Claude Design 上線僅僅 11 天之後，開源社區給出了一記響亮的回答。

Open Design，於 4 月 28 日在 GitHub 上正式發佈，6 天內突破 2 萬 Star，目前已經近 5 萬。

至於為什麼這麼火爆，看看 Open Design 製作的成品效果就知道了。

社交媒體矩陣數據追蹤器：

手機 App 界面：

效果完全不輸 Claude Design。

Anthropic 花了數月時間打造 Claude Design，社區用了 11 天建好了它，而且是免費的、開源的。

今天這篇文章，我就帶大家完整走一遍 Open Design 的使用流程。從它是什麼到怎麼安裝，從怎麼做原型到怎麼改細節，每一步都會講清楚，新手也能跟着做。

內容不少，但都是乾貨，一步都不跳。廢話不多說，直接開始。

Open Design 是什麼

先說清楚它是什麼，再講怎麼用。

Open Design 本質上是一個本地優先、開源免費的 AI 設計工具。它做的事情跟 Claude Design 一樣，幫你把一段文字描述變成可運行的網頁原型、PPT、移動端界面、視覺物料但它的運行方式完全不同。

Claude Design 把 AI 模型鎖死在 Anthropic 的服務器上，你只能用 Claude 的額度，花 Claude 的錢，在 Claude 的平台上用。

Open Design 則不同，它是一個設計工作流的殼，把你本機已經裝好的 AI Agent，比如 Claude Code、Codex CLI、Cursor Agent、Gemini CLI 等，讓這些 Agent 能像專業設計師一樣產出設計成果。

用一句話概括：

Open Design = 你已有的 AI Agent + 專業設計工作流 + 品牌級設計體系 + 內置自我審查機制

你已經訂了 Codex？那你用 Open Design 基本上就是無限用，不需要額外花一分錢。

你用的是 Cursor Agent？也行。你用 Claude Code？完全可以。它支持 16 種主流 CLI 工具自動識別接入。

除了接 CLI，它還內置了 OpenAI 兼容的 BYOK 代理，填入 baseUrl + apiKey + model 就能用，支持 Anthropic、DeepSeek、OpenRouter，甚至 Ollama 本地模型，無論你的 AI 預算是多少，它都能找到適合你的路。

再說說它的設計體系。

這些是 Open Design 真正值錢的地方。裏面包含 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma、小紅書等一線科技和消費品牌的設計語言，每套都帶完整的顏色 Token、排版規範、間距系統、組件庫和動效規範。

這意味着你不需要懂設計，只要告訴它我要做一個 Cursor 風格的 AI 工具官網，它就能自動套用完整的 Cursor 設計語言，出來的效果和真正的產品設計師做的幾乎沒有差距。

還有一個值得專門提的功能，叫 Critique Theater（設計評審機制）。

這是一個由五個虛擬設計評審組成的質檢機制，每次生成內容之前，會對可及性、品牌貼合度、工藝、滿足度、結構五個維度打分，如果任意維度低於閾值，AI 會自動修改並重新評分，直到通過才會把結果給你看。

換句話說，它除了生成之外，還會評估自己的輸出並迭代，直到達標為止。

記住，這一點，才是它真正超越普通 AI 生成工具的地方。

二、安裝配置：兩種方式，十分鐘以內搞定

Open Design 有兩種使用方式，我都講一遍，你根據自己的情況選。

方式一：電腦客戶端（推薦新手）

這是最簡單的方式，下載一個安裝包，雙擊安裝，完成。

第一步：打開官網：open-design.ai

大概感受一下它的設計審美，然後找到下載跳轉頁。

第二步：跳轉到 GitHub 下載頁

點擊 Download 之後會跳到 GitHub 的 Releases 頁面。往下滾，你會看到 macOS 版本和 Windows 版本。

今天我們以 Windows 版本為例演示。

第三步：安裝並打開

下載完成後雙擊安裝包，按照提示完成安裝。打開客戶端，你會進入主界面。如果你是新用戶，設計區域是空的，什麼都沒有，這完全正常，接着走下一步。

第四步：配置你的 Agent（最關鍵的一步）

打開設置，找到 Agent / CLI 配置區域。這裏要選擇你想讓 Open Design 調用的 Agent。如果你已經有了某個 CLI 工具，按下面的對應關係配置：

裝了 Claude Code → 選擇 Claude Code

裝了 Codex CLI → 選擇 Codex CLI

裝了 Cursor Agent → 選擇 Cursor Agent

裝了 Gemini CLI → 選擇 Gemini CLI

配置完成後，點擊測試連通性，如果提示連接成功，你就可以正常使用了。

如果你一個 CLI 都沒裝，也完全沒關係。Open Design 內置了 OpenAI 兼容的 BYOK 代理，只需要填入三個參數就能用：

baseUrl：你的 API 服務地址

API：你的 API 密鑰

model：你想使用的模型名稱

支持 Anthropic、DeepSeek、Groq、OpenRouter、自託管 vLLM，甚至 Ollama 本地模型都可以接入。

也就是說，你只要有任意一個 AI API 賬號，就能讓 Open Design 跑起來，剩下的就看各個模型的能力了。

整個安裝和配置流程，前後大概十分鐘以內可以搞定，即便是完全沒有技術背景的新手，也能順利完成。

方式二：從源碼運行（適合開發者）

如果你是開發者，想要自己編譯或者二次開發，可以選擇從源碼運行。把下面三行命令依次輸入終端：

git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install && pnpm dev:all

這個方式相對複雜一些，如果在配置環境這個步驟遇到問題，可以把報錯截圖發給你在用的 AI Agent（比如 Codex），讓它幫你解決，或者你直接把今天這篇文章丟給你的龍蝦也好，愛馬仕也罷，都行，就讓它看，讓它去裝。

Open Design 能做哪些事

安裝完成、Agent 配置好之後，我們來認識一下 Open Design 的主界面，搞清楚它到底能做什麼。

打開客戶端，你會看到主界面上有幾個核心功能區域。Open Design 能做的事情，比大多數人想象的要多：

1. 原型圖（Prototype）

這是目前完成度最高、最值得掌握的核心功能。

你可以用自然語言直接口噴，Open Design 會生成完整的 HTML/CSS 網頁原型，包含真實交互邏輯，能在瀏覽器裏直接跑。

注意，不是截圖，不是靜態圖片，是真的可以點擊、有交互效果的網頁。

2. 幻燈片（Slides）

可以生成雜誌風格的 PPT 幻燈片。如果你見過那種排版精美、視覺衝擊力強的產品 Deck，它基本上就能做到這種水準。輸入你的主題和內容要點，它會自動生成完整的幻燈片結構和視覺設計。

3. 實時製品（Live Artifacts）

這個功能是直接開發真實項目用的，生成的不是原型，而是可以直接集成到真實代碼庫裏的代碼。

不過這個功能目前還是 Beta 版，整體效果還不如原型穩定，等它成熟了之後會是非常強大的功能，目前建議先了解一下即可。

4. 媒體生成（圖片 / 視頻）

Open Design 內置了三大主流媒體生成模型：

gpt-image-2：用於生成海報、信息圖等圖片素材

字節跳動 Seedance 2.0：生成電影感短視頻

HeyGen 開源的 HyperFrames：配有 93 個開箱即用的提示詞模板

當然，使用這些媒體生成功能需要自己配置對應的 API Key。

如果你有相關賬號，可以在設置裏填入；如果暫時沒有，跳過這部分完全不影響原型圖功能的使用。

5. 豐富的技能（Skills）

Open Design 內置了大量可組合的技能模塊，涵蓋排版優化、色彩方案、動效設計、響應式佈局等各個維度。

另外，可以看到在界面右邊，原型圖、 實時製品、幻燈片、媒體生成（圖片 / 視頻）都有豐富且優質的模板案例。

每個模板都配有詳細的提示詞，可以直接拿來用，對新手來說非常友好，不知道怎麼寫提示詞？沒關係，先看看模板是怎麼寫的，照着改就行。

實戰：做一個網頁原型

現在進入最重要的部分：實際操作。我帶大家完整做一遍原型圖，每一個步驟、每一個選項我都講清楚，包括為什麼這樣選、不同選項意味着什麼。

Step 1：新建原型，填寫基本信息

在創建頁面，項目名稱隨便起一個，能讓你自己認出來就行。

Step 2：選擇設計體系（Design System）

這是整個配置裏最值得花時間理解的一個選項。很多人看到設計體系這個詞就覺得高大上、不好理解，但其實說白了就是一套提前約定好的產品設計規範。

一套完整的設計體系包含三個核心要素：

基礎視覺規範：顏色、字體、間距、圓角、陰影這些最底層的規則，決定了整體視覺風格

組件庫：按鈕、表單、卡片、導航欄這些可以反覆複用的 UI 積木塊

使用規範：什麼場景用什麼組件，用多少，怎麼組合，有沒有禁止事項

有了這三個要素，才叫一套完整的設計體系。

Open Design 目前內置了超過 140 種設計體系，包括 Claude 風格、Ant Design 風格、Hugging Face 風格、MiniMax 風格，以及 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma、小紅書等一線品牌的設計語言。

這裏要提醒一點：這些設計體系並不是完整的企業級設計系統，更準確的說法是風格模板，它幫你快速起步，對快速做原型來說已經完全夠用了。

選哪個？我給新手一個簡單粗暴的建議：如果你沒有特別明確的方向，直接找一個你覺得視覺風格漂亮的大廠品牌，照着選。

比如說用 Cursor 風格做科技感網站、用 Stripe 風格做金融產品頁、用 Linear 風格做工具類產品，一般不會錯。

Step 3：選擇目標平台（Target Platform）

這個選項決定你要做的是什麼平台的界面：

Responsive Web：響應式網頁，可以根據屏幕寬度自動調整佈局，適配桌面端和移動端。這是最常用的選項。

Desktop：專門針對桌面端優化的界面，不會隨屏幕縮小自動調整佈局

iOS：針對 iPhone 屏幕尺寸和交互規範的移動端界面

Android：針對安卓屏幕的移動端界面，遵循 Material Design 規範

不確定選哪個？大多數情況下，選 Responsive Web 就對了。

Step 4：配套界面開關

這裏有兩個可選的開關：

Include landing page：是否同時生成一個介紹/入口頁

打開之後通常會多一個像官網首頁、產品介紹頁、歡迎頁之類的額外頁面。如果你只是想生成主要應用界面，關着就行；如果你想要一個完整的產品展示，可以打開。

Include OS widgets：是否同時生成系統小組件風格的界面

比如手機桌面小組件、狀態卡片、快捷信息塊這類更像操作系統組件的東西。一般新手用不到，保持關閉即可。

Step 5：選擇精度線框圖 vs 高保真原型

這是最後一個關鍵選項。

線框圖（Wireframe）：只有基本的佈局和結構，沒有顏色和精細視覺，適合產品方向還沒想清楚、只是想梳理頁面結構和交互邏輯的階段

高保真原型（High-fidelity）：完整的視覺設計，顏色、字體、圖片、動效全部到位，看起來接近真實產品

建議：大部分情況下直接選高保真。高保真更直觀，更容易發現問題，也更有成就感，能讓你一眼看出最終效果是否符合預期。

配置全部填好之後，點擊創建，進入對話頁面。

Step 6：描述你的需求（關鍵！）

進入對話頁面之後，Open Design 會讓你描述你想要做的東西。這裏有兩種輸入方式：

1.直接用文字描述你的需求，越詳細越好；

2.上傳設計參考截圖，讓它根據截圖的風格來生成

發送需求之後，它不會直接開始生成，而是會先問你幾個補充問題：

產品是為誰設計的？視覺風格偏好是什麼？大概做多少內容？需要哪些功能？品牌方向是什麼？有其他特殊要求嗎？

這些問題不是固定的，會根據你的具體需求動態調整。認真回答這些問題，它生成的結果會更準確。如果你不確定怎麼回答，也可以大概說一下方向，剩下的讓它自己決定。

我這裏選了 Cursor 設計體系，然後說生成一個叫 WANGHEI 的 AI 工具官網下載頁面，然後就開始回答它的問題。

回答之後，它就開始生成過程，完成後，界面右邊會直接顯示預覽效果。

建議全屏看一下，因為我選的就是 Cursor 設計體系，你會發現它生成的結果和 Cursor 官網的設計語言高度吻合，是真的接近專業產品設計的水準。

如何微調

生成出來之後，大概率會有一些地方不太滿意，或者想要調整，這非常正常。Open Design 提供了幾種不同的調整方式，我分別講一遍。

方式一：Tweaks 區域快速切換主題風格

在界面上方的 Tweaks 區域，你可以直接切換主題顏色風格，比如把原來的白色風格變成偏紫色系，或者其他顏色，快速預覽不同的視覺方向。

這個功能非常適合在早期階段快速比較不同色彩方案，不需要告訴 AI 任何指令，一鍵切換，實時預覽。

方式二：Comments 模式精準指令修改

如果你想修改某一個具體的區域，這個方式最精準。

點擊界面上的 Comments 按鈕，再點擊 Picker，然後用鼠標選中你想修改的那塊佈局區域，就能框起來，然後出現一個輸入框，在輸入框直接用文字告訴 Agent 你想要改成什麼效果。

比如可以選擇文字，要求字間距寬一點。

方式三：深度編輯

點擊編輯後進入更細粒度的編輯狀態，你可以直接修改具體的文案內容、調整樣式參數（顏色值、字號、間距等）、修改跳轉連結等等。

這個模式的高階玩法需要你對 HTML 和 CSS 有一定了解，才能精準調整樣式屬性和連結邏輯。

如果你是純新手，用來改文案內容沒有問題；深度樣式調整建議找有開發背景的朋友幫忙，或者藉助 AI 解釋具體的參數含義。

多端預覽：檢查不同屏幕下的效果

在右上方預覽區域，你可以隨時切換桌面端、iPad 端和移動端，查看不同屏幕尺寸下的佈局效果。

這個功能強烈建議每次生成之後都看一下，因為桌面端效果好看，不代表移動端也同樣好看，提前檢查可以避免後期返工。

另外，點擊設計文件可以查看和打開具體的源代碼文件；

點擊右上方的分享按鈕，可以生成一個連結分享給其他人預覽。

進階技巧

技巧一：導入 Claude Design 項目繼續編輯

如果你之前在 Claude Design 上做過項目，不需要從頭重來。

在創建頁面下方有一個導入 Claude Design的選項，將你在 Claude Design 上導出的 ZIP 文件上傳進來，Open Design 會自動解析成可編輯的項目，你的 Agent 可以接着在原來的基礎上繼續編輯。

這個無縫遷移的設計，是 Open Design 團隊對 Claude Design 用戶的一個體貼設計，現在不是都流行挖牆腳嘛。

技巧二：用 @ 命令調用技能模塊

在對話輸入框裏，輸入 @ 符號可以喚出技能列表，直接點擊選擇你需要的技能模塊。

技巧三：用 / 命令快速切換功能

在輸入框裏輸入 / 符號，可以快速切換功能模式，比如切換寵物設置、通過 OD Research 命令搜索網頁獲取靈感，或者調出 MCP（Model Context Protocol）功能。

MCP 的按鈕在左下角也能直接點擊打開，它允許你連接外部服務和數據源，是擴展 Open Design 能力的重要入口。

技巧四：善用模板，新手最快的上手路徑

Open Design 內置了大量高質量模板，每個模板都配有詳細的提示詞說明。

如果你不知道怎麼寫提示詞，最快的學習方式就是直接去翻這些模板，看它們是怎麼描述需求的，然後照着改成你自己的內容。

這比自己摸索快得多，畢竟每個人都是從模仿開始的，這就是活人感學習法：先看懂別人怎麼做的，形成肌肉記憶，再發展出自己的套路。

技巧五：遇到問題，先截圖給 Agent 問

在使用過程中，如果遇到任何看不懂的報錯、或者不知道某個選項是什麼意思，最直接的解決方式就是截圖，發給你正在使用的 AI Agent，讓它幫你解釋或解決。

其實不只是今天介紹的這個工具，很多時候我看到後台留言問問題，其實問我真不如問你的 AI，99%的時候都會比我答得好，這是效率最高的方法。

常見問題

Q：生成結果不符合預期，是提示詞的問題嗎？

大多數情況下，是的。提示詞越詳細，結果越準確。建議你在描述需求的時候，明確說出：目標用戶是誰、核心功能有哪些、視覺風格偏向什麼、大概需要幾個頁面或幾個區塊。回答它的補充問題時也不要太隨意，這些問題直接影響生成質量。

Q：生成速度很慢，正常嗎？

生成速度取決於你接入的 Agent 和網絡狀況。用本地 CLI 工具的速度通常比調用遠程 API 快。如果速度明顯偏慢，可以檢查一下網絡連接，或者嘗試換一個 Agent 測試對比。

Q：我沒有任何 AI API，能用嗎？

如果你完全沒有任何 AI 賬號或 API Key，那暫時無法使用 Open Design，因為它本質上是一個設計工作流層，底層還是需要 AI 模型來驅動。

Q：Open Design 跟 Claude Design 相比，差距大嗎？

對於日常原型和產品設計需求來說，兩者幾乎沒有可感知的差距，甚至在靈活性上 Open Design 佔有明顯優勢，畢竟它支持 16 種 Agent 接入，不把你鎖死在某一個平台上。

Claude Design 在極致的生成質量上可能有一定優勢，畢竟它是 Anthropic 親自調優的，但這種差距不足以支撐它每月幾十美金的額外成本。

結語

在收尾之前，我想聊一個更大的話題，為什麼 Open Design 能在 6 天內拿下 2 萬 Star，這背後說明了什麼？

這其實有一個規律可循：Anthropic 發佈的每一個封閉產品，開源社區都會迅速做出響應，而且響應速度越來越快。

從 Claude Code 到 OpenCode，從 Claude Design 到 Open Design，這個模式不是一次性事件，它代表的是開源世界對封閉 AI 產品的系統性反應。

更值得注意的是，Open Design 並不只是便宜版的 Claude Design，它在某些維度上已經超越了原版：它支持 16 種 Agent 接入，而 Claude Design 只能用 Claude；

它有 Critique Theater 這樣的自我審查機制，讓 AI 不只是生成，而是評估和迭代；它還在高速迭代，社區活躍度遠超 Claude Design 上線一個月幾乎沒有更新的狀態。

這不是說 Anthropic 不好，Claude Design 的原創性和完成度依然值得尊敬。但這個現象告訴我們：當一個強大的封閉工具出現，開源社區會用自己的方式給出答案，而且這個答案往往更靈活、更包容、對普通用戶更友好。

你可能不從事設計，但你總會接觸到設計、用到設計、或者需要設計。Open Design 不會讓你變成設計大師，但它可以讓你的審美品味躍升一個台階，從說不清楚自己想要什麼，到能做出接近專業水準的原型。

而這一切，都是免費的。

技術普惠，就應該是這個樣子的。

如果你是第一次接觸 Open Design，建議你今天就去裝好，先把 Agent 配置跑通，然後隨便想一個你最近需要做的東西，一個產品介紹頁、一個活動落地頁、一個個人簡歷網站，扔進去試一試。

第一次看到生成結果的時候，你大概會跟我有一樣的感受：這個東西，以前是要花錢請設計師才能做到的。

現在，你自己就可以。

項目地址：github.com/nexu-io/open-design

官網：open-design.ai

這一週都在折騰這篇教程，越研究越發現這不是簡簡單單就能介紹清楚的一個工具，所以，就儘可能想寫詳細點，大家就少一點問題，目的就是想讓大家瞭解它，去用它。結果寫完發現，8000多字了，如果這篇對大家有幫助，那就多多點贊和轉發收藏，謝謝大家。