[開源挖掘 #2] oh-my-design，為程式碼代理程式穿上品牌

oh-my-design 是為 Claude Code、Codex 與 Cursor 安裝 DESIGN.md 設計工作流程的開源 CLI。我們拆解 440 個企業參考的依據標註方式、技能結構，以及使用前須知。

SeokWoo Lee資深 iOS 軟體工程師發佈 2026年8月9日更新 2026年8月27日閱讀 9 分鐘

這是挑出被埋沒的儲存庫並打開研究的系列第二篇。開源挖掘第 1 篇我們拆解了把 Threads 帳號營運交給 AI 的桌面應用程式；這次則是韓國開發者的專案。oh-my-design 是為程式碼代理程式安裝設計系統的工具。

問題很明確：讓 AI 代理程式製作 UI，結果每個畫面的品牌都不同。昨天是藍色按鈕，今天是紫色漸層。用檔案規範解決這個問題的 DESIGN.md，已在另一篇文章介紹。它採用 Google Stitch 公開的規格，把設計 token 與品牌規則放進儲存庫的 Markdown 檔案，讓代理程式每次都讀取。oh-my-design 則把這套規範帶到「所以週一早上到底要輸入什麼？」的實際層面。

儲存庫於 2026 年 4 月公開，目前已獲得超過 400 顆星，採 MIT 授權。作者是韓國開發者，因此目錄中似乎特別多 Toss、Baemin、Danggeun、Bunjang 等韓國服務。這是專案的實質差異之一，稍後再談。

一行安裝，四種代理程式

安裝就只有這些。

npx oh-my-design-cli@latest

互動式安裝程式會偵測專案中的代理程式，並按頻道安裝套件。README整理的支援範圍如下。

代理程式	安裝內容
Claude Code	完整套件——`.claude/`以下的 20 個技能、18 個子代理程式、hooks 與目錄資料
Codex	`.agents/skills/`技能、`.codex/agents/`子代理程式角色、在地目錄
OpenCode	`.opencode/`以下的相同套件
Cursor	一個專案規則檔與共用目錄。不安裝技能、子代理程式或 hook

Cursor 的待遇不同很醒目。Cursor 沒有執行技能與子代理程式的頻道，因此只透過規則檔植入「優先遵循 DESIGN.md」的契約，是刻意設計的 rules-only 頻道。文件沒有掩飾差異，還另設「Cursor 的正確使用路徑」章節，這點很誠實。

安裝後重新啟動代理程式，並用npx oh-my-design-cli@latest doctor進行診斷。CLI 的工作到此為止：只負責安裝與診斷，後續設計工作都在代理程式工作階段中以自然語言完成。不需要 API 金鑰、背景常駐程式或 MCP（Model Context Protocol，將外部工具連接到代理程式的標準）伺服器。早期曾透過 MCP 提供目錄，現在已撤下；技能直接讀取本機檔案更簡單，過去的實作只封存在packages/mcp/。

oh-my-design 官方首頁，介紹 440 個品質分級參考與 npx 安裝指令 — 首頁第一句就是專案摘要：從 440 個參考中提取 DESIGN.md

440 個企業參考，重點不在數量而在依據

套件包含 440 個以 DESIGN.md 格式重構的企業設計系統參考，從 Toss、Stripe、Linear、Apple 到 Airbnb。目錄網站可逐一查看，且每份參考都在oh-my-design.kr/<id>/design.md提供 raw Markdown 副本，代理程式也能直接透過 URL 取得。網站還有可挑選參考並下載 DESIGN.md 的 Builder 頁面；無法安裝技能的 Cursor 可使用這條路徑。

oh-my-design Builder 頁面，展示 Toss、Danggeun、Baemin、Kakao 等企業參考圖磚與分類篩選器 — 在 Builder 選取參考後即可下載 DESIGN.md。韓國服務圖磚特別多

只看數字，可能會以為「就是爬網做出 440 個吧」；但打開檔案後看法會改變。Toss 參考的 front matter 為每個 claim 附上依據：在tokens.colors.primary: #3182f6旁註明來自哪個畫面（TDS 行動按鈕文件）、用什麼方法（computed style 擷取並與官方文件比對）、何時（2026-07-11）確認。正文也一樣，會寫出「Toss Product Sans 在 810 個可見元素中被觀察為第一字型」等觀察次數，並提醒品牌標誌的藍色與實際 UI 的藍色（#3182f6）不同，不要混用。至於字型再散布權利，官方來源沒有明確說明，就把「不知道」保留為未知。

但 440 個參考並非全都有這種密度。目錄自行公開等級：截至本文撰寫時，Verified v2 有 141 個、Partial 有 159 個、Legacy 快照有 140 個。也就是通過新驗證流程的還不到三分之一。儲存庫規格文件寫著「verified日期是時間戳，不是品質等級」，目錄頁也明確表示「信任根據依據、新鮮度與衝突計算，不從日期印章推論」。用等級揭露自身資料限制，在這類目錄型專案中是少見的優點。

oh-my-design 目錄，顯示 Verified v2、Partial、Legacy 品質等級分布 — 目錄不隱藏等級。Verified v2 目前只有 141 個

超越 token，Voice

DESIGN.md 原始規格以色彩、字體與間距等 token 為核心。oh-my-design 以Google Stitch 的規格為基礎，再加入 Voice、Narrative、Principles、Personas、States、Motion 區段，用來描述只靠色碼無法捕捉的「這個品牌如何說話」。

官方網站展示差異的方式很有趣：對同一模型輸入同一提示，只控制是否讀取 DESIGN.md，再把結果 UI 並排比較。基本 CTA 按鈕的「Get Started」套用 Toss 參考後變成「3 秒開始」，「Error 500: Internal Server Error」提示則在 Linear 參考下變成「Sync paused — we’ll retry in 4 seconds」。即使空畫面的「No data available」經過 Anthropic 參考，也會變成「Nothing here yet — and that’s a good place to begin」。

比較有無 DESIGN.md 時 CTA 按鈕、空畫面與錯誤提示文字差異的示範 — 左邊是未配置的代理程式，右邊是讀取 DESIGN.md 的代理程式。差異全都來自語氣

這不是 token 值的差異，而是語氣的差異。首頁將其總結為「Tokens get you halfway. Voice takes you home.」Token 只能帶你走到一半，剩下的一半由聲音補足。

20 個技能如何運作

套件的核心是技能。主要流程是omd:init。只要說「請為家庭飲食記錄應用程式建立 DESIGN.md，以 Toss 為參考，但只採用已確認的值」，技能就會從目錄推薦參考 → 徵求使用者確認 → 保留所選參考的語氣並融入專案脈絡，將 DESIGN.md 寫入專案根目錄。有趣的是，過程完全不會呼叫 CLI 子命令；連推薦分數都由代理程式讀取本機檔案，在工作階段內處理。

此外還有檢查介面品質的omd:feel、找出 AI 特有平淡 UI 的omd:slop-audit，以及偏好迴圈（omd:learn／omd:remember／omd:taste）。偏好迴圈會把工作中的修正（「按鈕再方一點」）累積到.omd/preferences.md，並套用到下一次工作；只要說「顯示我的偏好」，就會在同一畫面展示已學到與等待中的內容。

這些技能不靠斜線命令而能以自然語言觸發，關鍵在 hooks。安裝時會在專案的.claude/settings.json註冊 UserPromptSubmit、SessionStart、PostToolUse hooks，每次收到提示時由 Node 指令碼判斷是否觸發技能。方便的代價是每個提示都會多一層介入。

子代理程式由omd-master與 17 名專家組成，涵蓋 UX 研究、a11y 稽核、人物角色測試與文案潤飾等。詳細清單整理在官方文件。

開始寫之前要知道的事

這次也列出幾個卡點。

**不要誤解參考資料的法律地位。**如 README 的授權條款所述，程式碼採 MIT 授權，但參考資料是各企業的資產，且是為教育性參照而重構。「Toss 風格」是靈感起點，不是可直接移植 Toss 色彩、字型與文案的許可證。這也是 Toss 參考本身註明 Toss Product Sans 再散布權利尚未確認的原因。

**值已過時。**參考資料的色彩與字體是在特定日期實測的快照。企業一旦重新品牌化，就會開始偏離。需要養成確認 front matterverified日期的習慣；如前所述，v2 驗證結構目前也只套用於部分資料。

**專案會安裝不少檔案。**技能、子代理程式、hook 與目錄會放進儲存庫的.claude/（或各頻道路徑）。個人儲存庫無妨，但團隊儲存庫需要在提交前取得共識。管理方面倒是考慮周到：管理檔案加入標記與雜湊，重新安裝時原地更新；使用者修改過的檔案不覆寫而跳過（skipped-drift），doctor則提供限定範圍的復原命令。

**發布速度很快。**從以 npm 為準2026 年 4 月底首次發布，到三個月後已達 1.9.0。期間還有移除 MCP 等結構變更，甚至另備 0.1.x 使用者的 MIGRATION.md。樂觀來看是活躍；謹慎來看，無法保證半年後的工作流程仍與現在相同。

**推理品質終究取決於代理程式。**這個工具只能提供良好脈絡，繪製 UI 的仍是 Claude Code 或 Codex。即使有 DESIGN.md，代理程式也可能有忽略它的時候，使用過這類檔案規範的人應該明白。因此才會搭配omd:harness或doctor等驗證機制。

總結

oh-my-design 是為程式碼代理程式（Claude Code、Codex、OpenCode、Cursor）安裝 DESIGN.md 設計工作流程的開源 CLI。採 MIT 授權，由韓國開發者打造。
內含 440 個企業參考，每個值都標註在哪個畫面、以何種方法、於何時確認。但新驗證結構目前只套用於部分資料（約 140 個）。
在 Google Stitch 的 DESIGN.md 規格上加入 Voice、Narrative、Personas 等內容，將只靠 token 無法捕捉的品牌語氣也規格化。
以本機檔案為基礎。不需 API 金鑰、背景常駐程式或 MCP 伺服器即可在既有代理程式工作階段中運作，早期的 MCP 方式已刻意移除。
參考資料是各企業的資產，不能直接移植；它們是實測快照，也可能過時。團隊儲存庫需要先就安裝檔案是否提交取得共識。

儲存庫在https://github.com/kwakseongjae/oh-my-design，目錄與文件在oh-my-design.kr。下一篇也會挑一個被埋沒的儲存庫打開研究。

來源與驗證

oh-my-design READMEkwakseongjae · 官方文件 · 查核 2026年8月9日依據: 4 種支援代理程式與各頻道安裝內容、20 個技能、18 個子代理程式、超過 440 個參考、無需 API 金鑰、背景常駐程式或 MCP 伺服器、MCP 實作封存、MIT 授權與參考資料的法律地位
Design Systems 카탈로그oh-my-design · 官方資料 · 查核 2026年8月9日依據: 品質等級分布（141 個 Verified v2、159 個 Partial、140 個 Legacy），以及「信任由依據、新鮮度與衝突計算」的原則
oh-my-design 공식 문서oh-my-design · 官方文件 · 查核 2026年8月9日依據: 技能與子代理程式的詳細組成及安裝選項
Google Stitch DESIGN.md OverviewGoogle · 官方文件 · 查核 2026年8月9日依據: oh-my-design 所依據的 DESIGN.md 規格來源
oh-my-design-cli — npmnpm registry · 官方資料 · 查核 2026年8月9日依據: 首次發布於 2026 年 4 月底，目前版本為 1.9.0（2026-07-21）的發布歷程