GitHub 上狂攬 1.8 萬 Star！開源平替的 Claude Design。
整理版優先睇
GitHub 上狂攬 1.8 萬 Star！開源平替 Claude Design，將本地 Coding Agent 變成設計引擎
呢篇文章嚟自微信公眾號「逛逛 GitHub」，介紹一個新爆嘅開源項目 Open Design。Anthropic 上線咗 Claude Design 冇耐，效果炸裂，用一句話就出到可交付嘅 HTML 設計成品。11 日後，nexu-io 團隊就開源咗 Open Design，而家已經差唔多 2 萬 Star。
Open Design 係 Claude Design 嘅開源替代品，但佢唔自帶 AI 模型，而係將你電腦上已經裝好嘅 Coding Agent 變成設計引擎。你輸入一句話需求，佢會先彈表單確認目標、受眾、調性等，然後 Agent 從 5 套視覺方向揀一個，拉出實時 Todo 計劃，喺你電腦上真實創建目錄、讀模板、寫 CSS、生成 HTML，最後喺沙盒 iframe 渲染。整個過程你可以隨時介入。
呢個項目內置 19 個可組合 Skill 同 71 套品牌級 Design System，支援 Claude Code、Codex、Cursor、OpenCode 等主流 Agent。最特別嘅係佢做咗反 AI 味提示詞工程：初始問題表單、五維自評審、slop 黑名單，防止生成嗰啲一眼假嘅設計。結論係：Open Design 提供一個實用嘅開源方案，俾你用自己最強嘅 AI Agent 做設計，唔使綁死特定模型。
- Open Design 係 Claude Design 嘅開源替代，唔使綁定特定模型，用你現有嘅 Coding Agent 就得。
- 核心架構分兩層：瀏覽器 UI + 本地 Node daemon，透過 stdio 調用 Agent 並操作真實系統目錄。
- 內置 71 套品牌 Design System（Apple、Stripe、Vercel 等）同 19 個 Skill（網頁、PPT、Dashboard 等），開箱即用。
- 反 AI 味設計：初始化表單鎖定需求、五維自評審低分重做、slop 黑名單禁止暴力紫漸變等。
- 安裝簡單：git clone、pnpm install、pnpm dev:all 三條命令，然後 localhost:3000 即可使用。
Open Design GitHub 倉庫
開源項目主頁，包含源碼、安裝指引同完整文檔。
開源替代方案：將 Agent 變成設計引擎
Claude Design 一出就爆紅，但佢綁定 Opus 4.7，唔係人人都用到。Open Design 就係為咗解決呢個問題而誕生嘅開源替代品。
佢唔自帶 AI 模型，而係將你電腦上已經裝好嘅 Coding Agent 變成設計引擎。
你輸入一句話需求，例如「幫我做一份雜誌風嘅官網」，系統會先彈出表單確認目標平台、受眾、調性、品牌等。之後 Agent 會從 5 套視覺方向揀一個，拉出實時 Todo 計劃，真係喺你電腦上創建目錄、讀模板、寫 CSS、生成 HTML，最後喺沙盒 iframe 渲染。
- 支援導出 HTML、PDF、PPTX、ZIP。
- 整個過程你可以隨時介入糾偏。
- 輸出係完整單文件 HTML，唔係截圖或草圖。
架構與原理：兩層協作，真實系統權限
項目分兩層：瀏覽器入面行一個 Next.js Web 界面，你電腦本地行一個 Node daemon 服務。
- 1 你輸入需求後，daemon 將 SKILL.md 設計能力描述同 DESIGN.md 品牌風格規範拼裝成提示詞棧。
- 2 然後透過 stdio 調用你機上嘅 coding agent CLI 去執行。
- 3 Agent 拎到真實文件系統權限，真係喺你電腦上讀模板、寫 brand-spec.md、生成 HTML 同圖片。
- 4 Agent 跑完一輪，daemon 將產出嘅 HTML 塞入沙盒 iframe 實時預覽。
唔係虛擬沙盒，唔係內存模擬，Agent 真係搞你電腦上嘅檔案。
呢個設計令你唔使改變現有 workflow，直接用返你最順手嘅 Agent 做設計。
反 AI 味提示詞工程 + 豐富 Design System
Open Design 做咗好多功夫防止 AI 生成嗰啲一眼假嘅設計。
開始生產之前，先有一個初始化問題表單，30 秒勾選 surface、受眾、調性等，鎖定需求。
輸出之前仲有一輪五維自評審，AI 自己打分，低過 3 分嘅維度要重做。
另外佢內置 71 套品牌設計系統，包括 Apple、Stripe、Vercel、Airbnb、Tesla、Notion、Cursor、Figma 等，你從下拉框一揀，下次渲染就用新 token。
- 19 個 Skill 覆蓋網頁原型、雜誌風 PPT、Dashboard、移動端原型、定價頁、郵件營銷、社媒輪播圖等。
- Skill 可以組合使用，滿足唔同設計需求。
快速上手：三條命令就開波
跑起 Open Design 非常簡單，只需要以下三條命令：
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install && pnpm dev:all最慳水慳力嘅方法，係直接將呢個項目丟俾你嘅 Agent，等佢自己裝。裝好之後打開 localhost:3000，揀一個 Skill、揀一套 Design System、寫低需求，回車就得。
實時 Todo 卡片會流入 UI，最後喺沙盒 iframe 顯示成品。
支援一鍵導出 HTML、PDF、PPTX、ZIP，即刻拎去用。
Claude Design 發布冇幾耐，GitHub 上就有人整咗開源復刻版。
4 月 17 日 Anthropic 上線 Claude Design，基於 Opus 4.7。
輸入一句說話，直接出設計成品，唔係草圖，唔係線框圖，係交到貨嘅 HTML 頁面、PPT、移動端原型。
效果真係勁到爆，即刻爆紅。
11 日後，nexu-io 團隊將 Open Design 開源咗。
而家已經差唔多 2 萬粒星。
01
開源項目簡介
Open Design 係 Claude Design 嘅開源替代品。
但佢唔自帶 AI 模型，佢做嘅嘢係將你電腦上已經裝好嘅 Coding Agent 變成設計引擎。
你輸入一句需求，例如「幫我做一份雜誌風嘅官網」，佢會先彈一個表單出嚟確認你嘅需求，例如目標平台、受眾、調性、品牌之類。
然後 Agent 由 5 套視覺方向入面揀一個，拉一份實時 Todo 計劃，喺你電腦上面創建真實嘅項目目錄。
讀模板、寫 CSS、生成 HTML，最後喺沙盒 iframe 入面渲染出嚟。成個過程你可以隨時介入糾正。
輸出唔係截圖，唔係草圖，係完整嘅單文件 HTML，可以直接導出做 HTML、PDF、PPTX、ZIP。
Claude Code、Codex、Cursor、OpenCode 呢啲，邊個有就用邊個。
內置 19 個可組合 Skill + 71 套品牌級 Design System
可以當作係將你手上最強嘅 Coding Agent 接入設計工作流程嘅中間層。
開源地址：github.com/nexu-io/open-design02
乜嘢原理
呢個項目嘅架構分兩層：瀏覽器入面行一個 Next.js Web 界面，你電腦本地行一個 Node daemon 服務。
核心流程係咁嘅：
你輸入需求之後，daemon 將 SKILL.md 設計能力描述同 DESIGN.md 品牌風格規範拼接到提示詞棧，然後經 stdio 調用你電腦上嘅 coding agent CLI 去執行。
Agent 攞到嘅係真實文件系統權限，佢真係喺你電腦上讀模板文件、grep CSS 入面嘅 hex 色值、寫 brand-spec.md、生成 HTML 同圖片。
唔係虛擬沙盒，唔係內存模擬。
Agent 行完一輪，daemon 將產出嘅 HTML 塞入沙盒 iframe 實時預覽。你可以喺界面上直接編輯文件，都可以一鍵導出 HTML、PDF、PPTX、ZIP。
你有乜 Agent 佢就用乜 Agent
Daemon 啟動嘅時候自動掃描 PATH，檢測你裝咗邊啲 CLI。
唔綁定任何一間模型，每一層都係 BYOK。
Claude Design 只能用 Opus 4.7，Open Design 你用你手上最強嗰個 agent 就得。
反 AI 味嘅提示詞工程
呢個項目喺提示詞層面做咗唔少嘢嚟防止 AI 生成嗰啲一眼假嘅設計。
開始生產之前，先彈一個初始化問題表單，叫你揀 surface、受眾、調性、品牌上下文。
30 秒剔完，比起來來回回改需求有效率好多。
輸出之前仲有一輪五維自評審，AI 自己俾自己打分，低過 3 分嘅維度要重新做。
另外仲有一份 slop 黑名單，暴力紫漸變、通用 emoji 圖標、手繪 SVG 真人樣、Inter 當做 display 字體，全部明文禁止。
冇真實數字就寫破折號，唔好作數據。
71 套 Design System + 19 個 Skill 開箱即用
71 套品牌設計系統，Apple、Stripe、Vercel、Airbnb、Tesla、Notion、Cursor、Figma，直接由下拉框揀，切換之後下一次渲染就用新 token。
19 個 Skill 涵蓋網頁原型、雜誌風格 PPT、Dashboard、移動端原型、定價頁、電郵營銷、社交媒體輪播圖等等。
03
點樣執行
三條命令：
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install && pnpm dev:all最簡單的辦法是把開源項目丟給你的 Agent，讓它自己裝。跑起來後打開 localhost:3000，選一個 Skill、選一套 Design System、寫需求，回車就行。佢會先彈問題表單叫你鎖定需求，然後 Agent 開始開工，
實時 todo 卡片流入 UI，最後喺沙盒 iframe 入面渲染成品。
支援導出 HTML、PDF、PPTX、ZIP。
04
㩒下面張卡片，關注逛逛 GitHub
呢個公眾號歷史發布過好多有趣嘅開源項目，如果你懶得翻文章逐個揾，你直接關注微信公眾號：逛逛 GitHub ，後台對話聊天就得㗎喇。
Claude Design 發佈沒多少天，GitHub 上就有人做了開源復刻版。
4 月 17 日 Anthropic 上線 Claude Design，基於 Opus 4.7。
輸入一句話，直接出設計成品，不是草圖，不是線框圖，是能交付的 HTML 頁面、PPT、移動端原型。
效果確實炸裂，瞬間出圈。
11 天后，nexu-io 團隊把 Open Design 開源了。
現在已經快 2 萬的星星了。
01
開源項目簡介
Open Design 是 Claude Design 的開源替代品。
但它不自帶 AI 模型，它做的事是把你電腦上已經裝好的 Coding Agent 變成設計引擎。
你輸入一句話需求，比如「幫我做一份雜誌風的官網」，這個先彈出一個表單確認你的需求，比如目標平台、受眾、調性、品牌啥的。
然後 Agent 從 5 套視覺方向裏選一個，拉出一份實時 Todo 計劃，在 你電腦上創建真實的項目目錄。
讀模板、寫 CSS、生成 HTML，最後在沙盒 iframe 裏渲染出來。整個過程你可以隨時介入糾偏。
輸出不是截圖，不是草圖，是完整的單文件 HTML，可以直接導出為 HTML、PDF、PPTX、ZIP。
Claude Code、Codex、Cursor、OpenCode 等等，哪個在就用哪個。
內置 19 個可組合 Skill + 71 套品牌級 Design System
可以看成是把你手上最強的 Coding Agent 接進設計工作流的中間層。
開源地址：github.com/nexu-io/open-design02
什麼原理
這個項目的架構分兩層：瀏覽器裏跑一個 Next.js Web 界面，你電腦本地跑一個 Node daemon 服務。
核心流程是這樣的：
你輸入需求後，daemon 把 SKILL.md 設計能力描述和 DESIGN.md 品牌風格規範 拼裝進提示詞棧，然後通過 stdio 調用你機器上的 coding agent CLI 去執行。
Agent 拿到的是真實文件系統權限，它真的在你的電腦上讀模板文件、grep CSS 裏的 hex 色值、寫 brand-spec.md、生成 HTML 和圖片。
不是虛擬沙盒，不是內存模擬。
agent 跑完一輪，daemon 把產出的 HTML 塞進沙盒 iframe 實時預覽。你可以在界面上直接編輯文件，也可以一鍵導出 HTML、PDF、PPTX、 ZIP。
你有什麼 Agent 它就用什麼 Agent
Daemon 啓動的時候自動掃 PATH，檢測你裝了哪些 CLI。
不綁定任何一家模型，每一層都是 BYOK。
Claude Design 只能用 Opus 4.7，Open Design 用你手上最強的那個 agent 就行。
反 AI 味的提示詞工程
這個項目在提示詞層面做了不少事來防止 AI 生成那種一眼假的設計。
開始生產之前，先彈一個初始化問題表單，讓你選 surface、受眾、調性、品牌上下文。
30 秒勾選完，比來回改需求高效得多。
輸出之前還有一輪五維自評審，AI 自己給自己打分，低於 3 分的維度要重做。
另外還有一份 slop 黑名單，暴力紫漸變、通用 emoji 圖標、手繪 SVG 真人臉、Inter 當 display 字體，全部明令禁止。
沒有真數字就寫破折號，不編數據。
71 套 Design System + 19 個 Skill 開箱即用
71 套品牌設計系統，Apple、Stripe、Vercel、Airbnb、Tesla、Notion、Cursor、Figma，直接從下拉框選，切換後下一次渲染就用新 token。
19 個 Skill 覆蓋網頁原型、雜誌風 PPT、Dashboard、移動端原型、定價頁、郵件營銷、社媒輪播圖等等。
03
怎麼跑起來
三條命令：
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install && pnpm dev:all最簡單的辦法是把開源項目丟給你的 Agent，讓它自己裝。跑起來後打開 localhost:3000，選一個 Skill、選一套 Design System、寫需求，回車就行。它會先彈問題表單讓你鎖定需求，然後 agent 開始幹活，
實時 todo 卡片流入 UI，最後在沙盒 iframe 裏渲染成品。
支持導出 HTML、PDF、PPTX、ZIP。
04
點擊下方卡片，關注逛逛 GitHub
這個公眾號歷史發佈過很多有趣的開源項目，如果你懶得翻文章一個個找，你直接關注微信公眾號：逛逛 GitHub ，後台對話聊天就行了：