讓人饞哭了Claude Design終於有了開源替代！
整理版優先睇
Open Design 完全開源復刻咗 Claude Design 嘅設計工作流，透過提示詞棧同本地 agent 實現，仲包埋 72 套大廠設計規範，可以自由複用同迭代。
呢篇文章係講 Anthropic 推出嘅 Claude Design，一個可以透過對話直接交付設計成品嘅工具，效果令人驚豔，仲令到 Figma 股價跌咗 7.63%。不過 Claude Design 只有訂閲用戶先用得，而且有嚴格嘅次數限制，令到好多人得個睇字。
而家終於有咗開源替代—— Open Design（簡稱 OD）。OD 完整復刻咗 Claude Design 嘅工作流，完全本地優先，唔需要再訂閲 Claude 就可以用到所有功能。OD 嘅實現機制好簡單，佢係一個殼，連接你本地已經裝好嘅 coding agent（例如 Claude Code、Codex、Gemini CLI 等），再透過一套精心設計嘅提示詞棧黎驅動設計工作流，最終生成圖片、PPT 等成品。OD 嘅提示詞棧先至係佢嘅本體，包含問題表單、品牌資產協議、五維評審機制、72 套可選嘅 DESIGN.md 等等。呢啲全部係可以打開同修改嘅檔案，令到呢個系統唔單止係一個工具，而係一套可迭代、可複用、可利用嘅資產。部署亦好簡單，跟住 README 就可以用本地 agent 快速部署。總括黎講，OD 為設計師同開發者提供咗一個開源、可自訂嘅設計自動化方案。
- Claude Design 雖然驚豔，但限制多；OD 完全開源，本地運行免訂閲，真正打破門檻。
- OD 本質係提示詞棧殼，連接本地 coding agent（如 Claude Code、Codex 等），將 agent 能力接入設計工作流。
- 核心提示詞棧包含問題表單、品牌資產、五維評審（哲學/層級/執行/具體度/剋制）同 72 套大廠 DESIGN.md，每層均可獨立修改。
- 五維評審機制令 agent 喺生成前自我評分，任意一維低於 3/5 會強制修正，確保輸出質素。
- 72 套設計規範涵蓋 Linear、Stripe、Apple 等大廠風格，可即時套用或自訂，令復刻主流設計風格超簡單。
Open Design 在線測試
在線體驗 Open Design，無需本地部署
Claude Design 驚豔但限制多，Open Design 開源補位
Anthropic 喺 4 月 17 日推出咗 Claude Design，一個可以透過對話直接交付設計成品嘅工具。一句需求入去，就出到可以運行嘅 HTML artifact、PPT、原型圖、設計稿，仲有沙盒預覽同實時渲染修改，效果令人驚豔，連 Figma 都跌咗 7.63%。
不過 Claude Design 只有訂閲用戶先用得，而且有嚴格嘅次數限制，好多人都用唔到。
而家終於有咗開源替代—— Open Design（簡稱 OD），完整復刻咗 Claude Design 嘅工作流，純本地優先，唔需要再訂閲 Claude 就可以體驗所有功能。
Open Design 機制：本地 agent 殼 + 提示詞棧
OD 嘅實現機制好簡單，佢本質係一個殼，連接你本地已經裝好嘅 coding agent CLI。支援嘅 agent 包括 Claude Code、Codex、Gemini CLI、OpenCode、Cursor Agent、Qwen Code、GitHub Copilot CLI 等。
就算冇裝任何 agent，亦可以用 OpenAI 兼容嘅 BYOK 代理兜底，填 baseUrl 同 apiKey 就得。
OD 唔係自己做生成，而係將你現有嘅 agent 接進一套提示詞驅動嘅設計工作流，最終生成圖片、產出 PPT。
提示詞棧逐層拆解：問題表單、品牌資產、五維評審、72 套 DESIGN.md
每次發送設計任務，系統拼裝嘅唔係簡單嘅「system + user」，而係多層堆疊：包含問題表單、品牌資產協議、TodoWrite 計劃卡、五維評審機制、設計哲學憲章、激活嘅 DESIGN.md（72 套可選）、激活嘅 SKILL.md、項目元數據同 skill 副文件嘅 pre-flight 注入。每一層都係一個你可以打開、可以改嘅文件，確保同 Claude Design 高度一致。
第一步係問題表單，你要選配好設計調性、受眾、規模，agent 先開始動筆。
品牌資產步驟可以附加截圖或 URL，Agent 會讀取內容同網頁嘅設計卡同約束，完成調研先寫最終版。
- 問題表單：設定設計調性、受眾、規模，agent 先開始。
- 品牌資產：附加截圖或 URL，Agent 讀取約束後先寫。
- 五維評審：哲學/層級/執行/具體度/剋制，自我評分，低分重來。
- 72 套 DESIGN.md：內置色彩、字體、間距、組件規範、動效、品牌 tone of voice 嘅 Markdown 文件。
72 套 DESIGN.md 涵蓋咗 Linear、Stripe、Vercel、Notion、Apple、Anthropic、Cursor、小紅書、Spotify、Tesla 等大廠，指定名稱即可套用。
如果 72 套唔夠，你可以喺 design-systems/ 度放一個新嘅文件夾，自訂新嘅設計系統。
簡單部署同可複用資產，OD 嘅真正價值
OD 嘅部署好簡單，複製 README 之後就直接用 Code Agent 進行快速部署。作者亦提供咗一個線上部署嘅版本俾你測試。
複製 README 之後，直接使用 Code Agent 進行快速部署。
- 可複用：提示詞棧同設計規範可以隨意複製到其他 agent 使用。
- 可自訂：修改任何一層文件，就可以調整設計流程同風格。
- 可迭代：基於現有資產不斷改進，唔使從零開始。
你可以去 https://od.bytenote.net/ 體驗在線版。
Claude Design 出咗唔夠兩個禮拜，就已經俾人開源復刻咗。
4月17號，Anthropic 推出咗 Claude Design，靚到冇朋友，Figma 爆跌7.63%！Claude Design 再次顛覆設計界
呢套嘢嘅核心就係透過對話嘅形式直接出設計成品。
一句需求入去，就出一個可以行嘅 HTML artifact、PPT、原型圖、設計稿樣樣齊，用沙盒預覽，即時渲染修改。
不過 Claude Design 得訂閲用戶先用得，而且次數限制好嚴。
而家 Claude Design 終於有咗開源替代品，open-design 出現咗。
Open Design（下稱 OD），完整復刻咗 Claude Design 嘅工作流程，純本地優先，唔再需要任何 Claude 訂閲就可以體驗 Claude Design 嘅所有功能。
OD 嘅實現機制好簡單。
收費版嘅 Claude Design 好依賴 Claude 同佢嘅 skills，OD 就直接用本地已經裝好嘅 coding agent CLI。
直接調用包括 Claude Code、Codex、Gemini CLI、OpenCode、Cursor Agent、Qwen Code、GitHub Copilot CLI。
就算呢啲都冇裝，都可以用 OpenAI 兼容嘅 BYOK 代理兜底，填 baseUrl + apiKey 就得，好似我咁就用免費申請嘅16億參數小米模型嚟測試。
所以 OD 本質上只係一個殼，將你本身有嘅 agent 駁入一套提示詞驅動嘅設計工作流程，最終生成圖片、出 ppt。
提示詞棧先係 OD 產品嘅本體
OD 嘅提示詞棧做得非常精細，都係我哋可以直接拎嚟進行復刻同埋遷移嘅核心所在。
佢嘅核心流程係：每次發送設計任務，系統拼裝嘅唔係 "system + user" 兩段話，而係一個多層堆疊：
包括咗 turn-1 問題表單、品牌資產協議、TodoWrite 計劃卡、五維評審機制）+ 設計哲學憲章+ 激活嘅 DESIGN.md（72 套可選）+ 激活嘅 SKILL.md）+ 項目元數據 + skill 副文件嘅 pre-flight 注入。
裏面每一層都係一個你可以打開、可以改嘅檔案。
做到同 Claude Design 高度一致。
第一步嘅問題表單。
當你落好任務之後，需要揀好設計調性、受眾、規模，agent 先開始鬱手。
下一步係品牌資產。
呢步可以加上貼截圖或者 URL，Agent 會讀取貼圖嘅內容同網頁嘅設計卡同約束，完成調研之後先開始寫最終嘅。
然後係五維評審。
生成內容之前，agent 會俾自己打分，分別係呢五個維度：哲學 / 層級 / 執行 / 具體度 / 剋制。
任何一個維度低過 3/5，改完再評。
最後係今次開源核心中嘅核心。
內置嘅 72 套 DESIGN.md。
每套係一份描述色彩、字體、間距、組件規範、動效、品牌 tone of voice 嘅 Markdown 檔案。
你喺市面上見到嘅所有大廠，包括 Linear、Stripe、Vercel、Notion、Apple、Anthropic、Cursor、小紅書、Spotify、Tesla……全部喺曬裏面。
agent 每次渲染都會喺 design system 設計系統裏面讀取呢啲已經整理好、蒸餾出精華中嘅精華。
想復刻某個大廠嘅風格，只要指定名稱就得，如果唔滿意現有嘅 72 套，就向 design-systems/ 掉一個文件夾就得。
所以同其當佢係一個開源嘅設計 Agent，不如話呢套係一套完整嘅可迭代、可重用、可用得着嘅資產：
OD skill 檔案、design system 檔案、問題表單、五維評審，呢啲嘢全部可以複製落嚟然後喺任何 agent 上面行。
OD 嘅部署非常簡單，複製 README 之後，直接用 Code Agent 快速部署，如果你唔想本地部署，都可以用我線上部署好嘅嚟測試：
https://od.bytenote.net/
Claude Design 出來不到兩週，已經被開源復刻了。
4 月 17 日，Anthropic 發佈了 Claude Design，驚豔無比，Figma暴跌7.63%！Claude Design再次顛覆設計圈
這套東西的核心就是通過對話的形式直接交付設計成品。
一句需求進去，就是一個可以跑的 HTML artifact，PPT，原型圖，設計稿一應俱全，使用沙盒預覽，實時渲染修改。
不過Claude Design只能訂閲用戶才能使用，而且有非常嚴格的次數限制。
現在Claude Design終於有了開源替代，open-design 出現了。
Open Design（下簡稱 OD），完整的復刻了Claude Design的工作流，純本地優先，不再需要任何的Claude訂閲就能體驗Claude Design所有功能。
OD的實現機制很簡單。
收費版本的Claude Design強依賴於 Claude 以及它的 skills，OD則是直接使用本地已經裝好的 coding agent CLI。
直接調用包括Claude Code、Codex、Gemini CLI、OpenCode、Cursor Agent、Qwen Code、GitHub Copilot CLI。
即便是這些都沒裝，也可以使用 OpenAI 兼容的 BYOK 代理兜底，填 baseUrl + apiKey就行，比如我這裏就用免費申請的16億的小米模型來測試。
所OD本質只是一個殼，把你已經有的 agent 接進一套提示詞驅動的設計工作流，最終生成圖片、產出 ppt。
提示詞棧才是OD產品本體
OD的提示詞棧做非常的精細，也是我們可以直接拿來進行復刻和遷移的核心所在。
它的核心流程是：每次發送設計任務，系統拼裝的不是"system + user"兩段話，而是一個多層堆疊：
包含了turn-1 問題表單、品牌資產協議、TodoWrite 計劃卡、五維評審機制）+ 設計哲學憲章+ 激活的 DESIGN.md（72 套可選）+ 激活的 SKILL.md）+ 項目元數據 + skill 副文件的 pre-flight 注入。
這裏面每一層都是一個你能打開、能改的文件。
做到和Claude Design高度的一致性。
第一步的問題表單。
當你下達好任務之後，需要選配好設計調性、受眾、規模，agent 才開始動筆。
接下來是品牌資產。
這步可以附加上貼截圖或 URL，Agent 會讀取貼圖的內容以及網頁的設計卡和約束，在完成調研後才能開始寫最終的。
然後是五維評審。
生成內容之前，agent會給自己打分，分別是這五個維度：哲學 / 層級 / 執行 / 具體度 / 剋制。
任意一維低於 3/5，修完再評。
最後是本次開源核心中的核心。
內置的72 套 DESIGN.md。
每套是一份描述色彩、字體、間距、組件規範、動效、品牌 tone of voice 的 Markdown 文件。
你在市面上看到的所有大廠，包含Linear、Stripe、Vercel、Notion、Apple、Anthropic、Cursor、小紅書、Spotify、Tesla……全都在裏面。
agent 每次渲染都會在design system設計系統裏讀取這些已經被整理的蒸餾好精華中的精華。
想復刻某個大廠的風格，只需要指定名稱就可以，如果不滿意現有的 72 套，往 design-systems/ 丟一個文件夾就行。
所以與其把它看成是一個開源的設計Agent，不如說這就是一套完整的可迭代、可複用、可利用的資產：
OD skill 文件、design system 文件、問題表單、五維評審，這些東西都是可以複製下來然後在任何 agent 上跑。
OD 的部署非常的簡單，複製README之後，直接可以使用Code Agent 進行快速的部署，如果你不想本地部署，也可以使用我在線上部署好的作為測試：
https://od.bytenote.net/