認識 Open Design

Open Design（GitHub：nexu-io/open-design，Apache-2.0 開源）是社群推出的 AI 設計工作台，介面與工作方式和 Claude Design 同款：用對話描述意圖 → AI 在畫布上生成可互動設計稿 → 批註 / 對話繼續迭代。它與 Claude Design 最大的差別在架構：它自己不帶任何模型——安裝後自動偵測你機器上已有的 coding agent CLI（Claude Code、Codex、Gemini 等 20+ 種），讓那個 agent 充當設計引擎。

這帶來一個對我們團隊非常實際的結果：沒有 Claude 帳號也能用。有 ChatGPT 訂閱的同事裝一個 codex CLI，Open Design 就能驅動 GPT 出稿——而 swift-web 的設計資源照樣全量生效（原因見下文「引擎無關」）。

與 Claude Design / Figma 的關係

	Open Design	Claude Design	Figma
性質	開源桌面應用，本機執行	Anthropic 官方雲端產品	商業雲端設計平台
模型	你機器上的任意 coding agent（Claude / GPT / Gemini…）	Claude（內建）	不適用（Figma Make 另計）
帳號門檻	無（用你已有的 agent 訂閱計費）	Claude 付費帳號	Figma 帳號
多人協作	無雲端共享——靠分發設計系統資源包	Team / Enterprise 組織共享	即時協作（最強項）
資料位置	全部在本機	Anthropic 雲端	Figma 雲端

一句話定位：Claude Design 的開源本機替代。適合辦不了 Claude 帳號、或希望稿件全程留在本機的同事；代價是沒有雲端多人評審——成稿以匯出 HTML / 截圖的形式分享。

接入 swift-web 設計系統（約五分鐘）

swift-web 為 Open Design 提供了專用設計系統資源包（與 Claude Design 的 20 張卡片同源——都從框架源碼自動派生）。以下步驟在 macOS 上實測通過：

安裝：從 open-design.ai 下載 DMG（或 brew install --cask open-design），啟動並完成初始設定——應用會自動偵測你機器上已裝的 coding agent CLI。
下載資源包：swift-web-open-design.zip（含 DESIGN.md 設計敘述 + tokens.css 全量語意 token + components.html 元件真實形態 + manifest.json）。
放入設計系統目錄：解壓後把整個 swift-web/ 資料夾放進：
```
~/Library/Application Support/Open Design/namespaces/release-stable/data/design-systems/
```
應用會即時識別出名為 swift-web 的設計系統（草稿態）。
發布：在應用的設計系統面板把 swift-web 從 draft 置為 published——發布後它才會出現在新建專案的設計系統選擇器裡。
出稿：新建專案時選擇 swift-web 設計系統，用自然語言描述頁面即可。第一輪它通常會彈出一個快速確認問卷（配色 / 欄目 / 數量等），作答後正式生成。

品牌變體範例：swift-web · yc001（糖心）

除了上面的底版（框架預設藍），我們還提供一個品牌變體成品範例：swift-web-yc001-open-design.zip（糖心品牌：固定暗色底 + 品牌紅 + 金幣/VIP 等 27 個品牌補充 token）。匯入方式與底版完全相同。

⚠️ 該變體是成品範例，非即時同步 —— 它不隨框架變更自動刷新（按需重建），僅用於直觀感受「品牌注入」能產出什麼。要拿與最新框架一致的資源，請用上面的底版。

它值得下載看一眼的原因：變體和底版是同一套元件，只換了 token 值——這就是「新品牌接入 = 一張 token 清單」（見規範與治理·紀律三）的成品形態。你作為設計師交付一張定稿 token 清單後，換來的就是這樣一套專屬設計系統：之後在裡面出的每一稿，天生就是品牌色，不需要每次叮囑 AI「記得用我們的紅」。

選哪個：做糖心專案 → 用變體（出稿即品牌）；其他專案 / 探索新品牌配色 → 用底版（中性起點，對 AI 說「換成 X 色系」自由探索，定稿後按紀律三申請自己品牌的變體）。

引擎無關：為什麼 GPT 也能吃到我們的設計系統

Open Design 的設計系統是純檔案：生成時把 DESIGN.md（9 段式設計敘述）、tokens.css（語意 token 全量）、components.html（元件真實形態）原文注入 agent 的提示詞。也就是說無論驅動的是 Claude 還是 GPT，模型讀到的設計約束一字不差。

我們用同一份資源包對 Claude 與 GPT 5.5 雙引擎做過實測：兩側產出的稿子都嚴格落在 token 體系內——色彩全部經 var(--primary) 等語意變數消費、圓角 0.5rem、hover 用 brightness(0.92)、中文字體堆疊正確，未出現散點色。資源保真度與引擎選擇無關，同事可以放心用手頭可用的模型。

從稿到碼

Open Design 的產物是單檔案 HTML（真實可渲染，不是截圖）。交給前端的方式：

把匯出的 HTML 檔（或專案資料夾路徑）直接發給前端——Claude Code 讀它落成 swift-web Nuxt 程式碼，與 Claude Design 的 handoff 殊途同歸（見設計師與前端協作）；
它也支援匯出 PDF / PPTX 用於評審場合。

因為稿子本身就是用我們的語意 token 和元件形態生成的，落碼時同樣幾乎一對一映射。

使用前如實交底

社群開源專案，迭代很快：介面與目錄結構可能隨版本變化，本頁步驟以我們實測的版本為準，遇到出入以官方 README 為準。
無雲端協作：設計系統靠資源包分發（framework 更新後我們會同步刷新資源包），成稿靠匯出分享。需要多人即時評審的場景，Figma 仍是最佳選擇。
需要本機有 coding agent CLI 且有模型額度：生成消耗你自己的 agent 訂閱 / API 額度（一張完整頁面稿約幾萬 token 量級）。
首輪對話彈出的「快速確認」問卷是正常流程，不是卡住——作答（或讓它直接開工）即可。