Claude Design開源版本來了!支持超過 71 套最頂級的品牌設計系統，可以直接復刻，構建屬於你的頂級網頁!
整理版優先睇
Open Design：Claude Design 開源替代，71 套品牌設計系統本地運行
呢篇文章係關於 Open Design，一個開源項目，係 Anthropic 嘅 Claude Design 嘅替代品。Claude Design 雖然令人驚艷，但係閉源、收費、只可以喺雲端用，而且綁定咗 Anthropic 嘅模型同 skill。Open Design 就係要打破呢個限制，俾你用自己嘅 coding agent 本地執行。
作者從項目簡介開始，講解佢點樣用 19 個技能同 71 套設計系統去構建高品質網站。文章重點係展示 Open Design 嘅設計理念：artifact-first、本地優先、可部署到 Vercel。仲有佢嘅提問機制同 todo 系統，確保輸出符合需求。
整體結論係 Open Design 係一個強大嘅工具，適合想擁有控制權嘅開發者同設計師。佢支援多種 coding agent，包括 Claude Code、Codex、Cursor Agent 等，仲有大量品牌設計系統可以直接復刻。呢個項目降低了高端網頁設計嘅門檻，同時避免咗 vendor lock-in。
- Open Design 提供 Claude Design 嘅開源替代，避免被鎖定喺特定平台。
- 支援 19 個可組合 Skills 同 71 套品牌 Design System，涵蓋原型、Dashboard、SaaS Landing 等。
- 不同於 Claude Design，Open Design 係本地優先，支援 BYOK，可以自託管同部署到 Vercel。
- 內置提問機制同 todo 系統，引導用戶完善需求，確保產出可直接用於生產。
- 快速開始只需 git clone、pnpm install 同 pnpm dev:all，daemon 會自動偵測本地 agent。
Open Design GitHub 倉庫
GitHub 上嘅開源項目，包含完整原始碼同快速開始指南。
項目背景：點解要有 Open Design
Anthropic 嘅 Claude Design（2026-04-17 發佈）令世人第一次見到：當 LLM 直接交付設計成品，會係點樣。佢瞬間出圈，但保持 閉源、付費、只跑在雲上，綁定 Anthropic 嘅模型同內部 skill，無得自託管或換 agent。
我哋唔整 agent——你筆記本上最強嘅 coding agent 已經裝好。輸入需求後，agent 會先彈出初始化問題表單，幫你釐清設計方向，然後生成 todo 計劃同 artifact。
核心特點：19 個 Skills + 71 套 Design System
呢個項目嘅核心係由 19 個可組合 Skills 同 71 套品牌級 Design System 驅動，支援 支援超過 71 套品牌設計系統、daemon 設計、提問機制同 todo 系統。
- 1 支援超過 30+ 喺推特廣泛傳播嘅精緻模板 skills。
- 2 支援超過 71 套最頂級嘅品牌設計系統，可以直接復刻，構建屬於你嘅頂級網頁。
- 3 支援 daemon 設計，能夠識別你本地所有嘅 code agent，包括 Claude Code、Codex、Cursor 等，一鍵複用你嘅大額會員額度。
- 4 一個純 Claude Code for Design 嘅實現，支援在線映射本地文件系統，基於 project 做任何文件預覽，仲可以支援草圖模式。
- 5 支援一套非常完整嘅 agent 提問機制，引導完善信息、品牌、構建一套完善嘅 todo 同自省系統，確保最終產出可直接用於生產環境。
支援嘅 Agent 同設計系統一覽
支援嘅 coding agent 包括：
- Claude Code
- Codex CLI
- Cursor Agent
- Gemini CLI
- OpenCode
- Qwen Code
內置嘅 design system 包括 71 套，例如 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma 等。視覺方向有 5 套精選流派，每套自帶 OKLch 色板同字體棧。
快速開始：幾步就起動
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install # 或 npm install
pnpm dev:all # daemon (:7456) + Vite (:5173) 一起起
open http://localhost:5173第一次加載會 自動檢測 agent、加載 19 個 skill 同 71 套 design system，彈歡迎對話框讓你貼 Anthropic key（僅 BYOK 兜底），並 自動創建 .od/ 目錄。之後輸入需求就得。
- 檢測你 PATH 上有哪些 agent CLI，自動選一個。
- 加載 19 個 skill + 71 套 design system。
- 彈歡迎對話框，讓你貼 Anthropic key（僅 BYOK 兜底路徑需要）。
- 自動創建 ./.od/ —— 本地運行時目錄。
項目介紹
Anthropic 嘅 [Claude Design]（2026-04-17 發布，基於 Opus 4.7）令大家第一次見到：當一個 LLM 唔再寫廢話、開始直接交出設計成品，會係點樣。佢即刻爆紅——然後保持閉源、畀錢、只係行喺雲端、綁死 Anthropic 嘅模型同 Anthropic 內部嘅 skill。冇 checkout，冇自託管，冇 Vercel 部署，亦換唔到自己嘅 agent。
Open Design（OD）就係佢嘅開源替代品。 同一套 loop、同一種「artifact-first」心智模型，但冇鎖死。我哋唔做 agent——你部 notebook 上最勁嘅 coding agent 已經裝好咗。
輸入「幫我做一份雜誌風格嘅種子輪 pitch deck」。喺模型畫出第一個像素之前，初始化問題表格已經搶先彈出嚟。Agent 由 5 套精選嘅視覺方向入面揀一個。一張活嘅 TodoWrite 計劃卡片實時流入 UI。Daemon 喺磁碟上建立一個真實嘅項目目錄，入面有 seed 模板、佈局庫、自檢 checklist。Agent 強制 pre-flight 讀取佢哋，對自己嘅輸出跑一輪五維評審，幾秒之後吐出一個 <artifact>，渲染喺沙盒 iframe 入面。
本地優先、可以部署到 Vercel、每一層都 BYOK——你部電腦上已經裝好咗嘅 coding agent（Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen）就係設計引擎，由 19 個可組合嘅 Skills 和 71 套品牌級 Design System 驅動。
特點：
1. 支持超過 30+ 喺 Twitter 上廣泛傳播嘅最精緻好睇嘅模板 skills
2. 支持超過 71 套最頂級嘅品牌設計系統，可以直接復刻，建立屬於你嘅頂級網頁
3. 支持 daemon 設計，可以識別你本地所有嘅 code agent，包括 claude code、codex、cursor、openclaw、opencode 等，一鍵重用你嘅大額會員額度
4. 一個純 claude code for design 嘅實現，支持在線映射本地文件系統，基於 project 做任何文件預覽，可以喺輸入框 agent 中消費任意本地文件，仲可以支持草圖模式，令任意草圖變成精緻嘅原型
5. 支持一套非常完整嘅 agent 提問機制，引導完善資訊、品牌、建立一套非常完善嘅 todo 同自省系統，可以確保最終生成嘅 web 原型、mobile 原型、slides 都好符合需求而且可以直接用喺生產環境，仲支援可以持續追問修改
一眼睇曬
| 支援嘅 coding agent | |
| 內置 design system | 71 套awesome-design-md 導入嘅產品系統（Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma…） |
| 內置 skill | 19 個 |
| 視覺方向 | |
| 設備外殼 | |
| Agent 運行時 | Read / Write / Bash / WebFetch，作用喺真實磁碟上 |
| 部署目標 | pnpm dev · Vercel · 單進程生產（npm start) |
| License |
快速開始
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install # 或 npm install
pnpm dev:all # daemon (:7456) + Vite (:5173) 一起起
open http://localhost:5173
第一次加載會：
檢測你 PATH你部機上有邊啲 agent CLI，自動揀一個。加載 19 個 skill + 71 套 design system。 彈出歡迎對話框，畀你貼 Anthropic key（淨係 BYOK 兜底路徑需要）。 自動建立 ./.od/—— 本地運行時目錄，存放 SQLite 項目庫、各項目工作區、保存落嚟嘅 artifact。沒有od init呢一步，daemon 啟動時會自己mkdir。
輸入需求，按 Enter，睇 question form 彈出嚟，填，睇 todo 卡片流動，睇 artifact 渲染。撳 Save to disk 或導出整個項目 ZIP。
項目地址
https://github.com/nexu-io/open-design
掃碼加入技術交流羣，備註「開發語言-城市-暱稱」
合作請註明
如果你覺得呢篇文章唔錯，唔好唔記得點讚、睇嚇、轉發俾更多需要嘅朋友仔呀！我哋下期再見！
項目簡介
Anthropic 的 [Claude Design]（2026-04-17 發佈，基於 Opus 4.7）讓大家第一次看到：當一個 LLM 不再寫廢話、開始直接交付設計成品，會是什麼樣子。它瞬間出圈 —— 然後保持閉源、付費、只跑在雲上、綁定 Anthropic 的模型和 Anthropic 的內部 skill。沒有 checkout，沒有自託管，沒有 Vercel 部署，也換不了自己的 agent。
Open Design（OD）就是它的開源替代品。 同一套 loop、同一種「artifact-first」心智模型，但沒有鎖定。我們不做 agent —— 你筆記本上最強的 coding agent 已經裝好了。
輸入「幫我做一份雜誌風的種子輪 pitch deck」。在模型揮灑第一個像素之前，初始化問題表單已經先跳出來。Agent 從 5 套精挑的視覺方向裏選一個。一張活的 TodoWrite 計劃卡片實時流入 UI。Daemon 在磁盤上構建出一個真實的項目目錄，裏面有 seed 模板、佈局庫、自檢 checklist。Agent 強制 pre-flight 讀取它們，對自己的輸出跑一輪五維評審，幾秒後吐出一個 <artifact>，渲染在沙盒 iframe 裏。
本地優先、可部署到 Vercel、每一層都 BYOK —— 你機器上已經裝好的 coding agent（Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen）就是設計引擎，由 19 個可組合 Skills 和 71 套品牌級 Design System 驅動。
特點：
1. 支持超過 30+ 在推特上廣泛傳播的最精緻好看的模板 skills
2. 支持超過 71 套最頂級的品牌設計系統，可以直接復刻，構建屬於你的頂級網頁
3. 支持 daemon 設計，能夠識別你本地所有的 code agent，包括 claude code、codex、cursor、openclaw、opencode 等，一鍵複用你的大額會員額度
4. 一個純 claude code for design 的實現，支持在線映射本地文件系統，基於 project 做任何文件預覽，可以在輸入框 agent 中消費任意本地文件，還可以支持草圖模式，讓任意草圖變成精緻的原型
5. 支持一套非常完整的 agent 提問機制，引導完善信息、品牌、構建一套非常完善的 todo 和自省系統，可以確保最終生成的 web 原型、mobile 原型、slides 都是非常符合需求且能夠直接用於生產環境的，並且支持可以持續追問修改
一眼概覽
| 支持的 coding agent | |
| 內置 design system | 71 套awesome-design-md 導入的產品系統（Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma…） |
| 內置 skill | 19 個 |
| 視覺方向 | |
| 設備外殼 | |
| Agent 運行時 | Read / Write / Bash / WebFetch，作用在真實磁盤上 |
| 部署目標 | pnpm dev · Vercel · 單進程生產 (npm start) |
| License |
快速開始
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install # 或 npm install
pnpm dev:all # daemon (:7456) + Vite (:5173) 一起起
open http://localhost:5173
第一次加載會：
檢測你 PATH上有哪些 agent CLI，自動選一個。加載 19 個 skill + 71 套 design system。 彈歡迎對話框，讓你貼 Anthropic key（僅 BYOK 兜底路徑需要）。 自動創建 ./.od/—— 本地運行時目錄，存放 SQLite 項目庫、各項目工作區、保存下來的 artifact。沒有od init這一步，daemon 啓動時會自己mkdir。
輸入需求，回車，看 question form 跳出來，填，看 todo 卡片流動，看 artifact 渲染。點 Save to disk 或導出整個項目 ZIP。
項目地址
https://github.com/nexu-io/open-design
掃碼加入技術交流羣，備註「開發語言-城市-暱稱」
合作請註明
如果你覺得這篇文章不錯，別忘了點贊、在看、轉發給更多需要的小夥伴哦！我們下期再見！