給中日韓介面用的真實設計系統

521 份真實企業的 DESIGN.md，已驗證的數值都註明了出處。

瀏覽 DESIGN.md

$ npx oh-my-design-cli@latest

用 104人力銀行的風格做一張職缺卡片

Skill omd-apply0.5 秒完成
Read .claude/data/references/104/DESIGN.md0.7 秒完成
Write JobCard.tsx+19 −01.6 秒完成

UI/UX 設計師

設計顧問公司・台北市

待遇月薪 45,000～60,000 元

經歷3 年以上

應徵

104人力銀行 DESIGN.md

從 DESIGN.md 到畫面的旅程

選一家企業，就只用它 DESIGN.md 裡的數值，重新畫出它的代表畫面。

DESIGN.mdweb/references/104/DESIGN.md

colors.canvas #ffffff
colors.foreground #292929
colors.muted #7e7e7e
colors.link #1654b9
typography.heading 20 / 700 / 1.4
typography.label 14 / 700 / 2.14
typography.body 14 / 400 / 1.43
components.search-action.bg #ff9100
.fg #ffffff
.radius 4px
.height 46px
.padding 0px 12px
.font 18px / 700 / 42px
components.company-card.bg #ffffff
.radius 12px
.border #dddddd
.padding 16px

為你推薦的職缺

前端工程師軟體公司台北市・月薪 45,000~60,000 元
UI 設計師設計工作室新北市・月薪 40,000~52,000 元

立即應徵

未套用品牌字體

17 個數值・全部有來源將游標移到元素上或點一下，就能看到數值的來源。

開始使用 oh-my-design-cli

oh-my-design-cli 是把參考資料和設計技能裝進你的 AI 程式助理的工具。

安裝

在專案根目錄執行一次。它會找出專案裡的程式碼代理，依各自的格式裝好所有技能與 DESIGN.md 典藏。

$ npx oh-my-design-cli@latest

◆  Coding agents in this project
│  ✓ Claude Code   ✓ Codex   ✓ Cursor   – OpenCode (not here)
│
◇  Installing for each agent
│  Claude Code   31 skills · 20 sub-agents · 4 hooks
│  Codex         31 skills · 20 sub-agents
│  Cursor        Agent Skills · DESIGN.md rule
│
◇  Skills — 10 public, 31 in the bundle
│  omd-init · omd-apply · omd-autopilot · omd-feel · omd-restraint
│  omd-slop-audit · omd-humanize · omd-landing · omd-shader-hero
│  omd-cjk-type-shader · + 21 more
│
◇  DESIGN.md archive — 521 references, offline
└  Done. Restart your agent and ask in one sentence.

套用
用一句話請 AI 程式助理動手。omd-apply 會讀 DESIGN.md，用裡面的數值做出畫面。
用這份 DESIGN.md 做首頁
Skill omd-apply0.5 秒完成
Read DESIGN.md0.6 秒完成
Write HomeScreen.tsx+23 −01.4 秒完成
今日菜單
全家 4 個人一起記錄
早餐蛋餅和豆漿
午餐滷肉飯
晚餐鮭魚沙拉
新增餐點

查看全部 31 個技能（GitHub）

常見問題

還有其他問題，歡迎到 GitHub 開 issue。

DESIGN.md 是描述產品設計系統（色彩、字型、圓角、元件、語氣）的 Markdown 檔案，讓 AI 程式助理在動手做 UI 之前先讀。oh-my-design 收錄了 521 份真實企業的 DESIGN.md，也提供讓 AI 程式助理直接套用這些檔案的技能。

在專案根目錄執行一次 npx oh-my-design-cli@latest，再重新啟動 AI 程式助理。接著用一句話請它動手，例如「用 Toss 風格，幫家庭食譜分享 App 建立設計系統」。omd-init 會先建立 DESIGN.md，之後每次改 UI，omd-apply 都會讀這份檔案。不用 CLI 也可以：在各參考頁面複製或下載，或直接從 oh-my-design.kr/<id>/design.md 取得原始檔。

Claude Code、Codex、OpenCode 與 Cursor。Cursor 會裝入技能與參考目錄，但不包含子代理定義；hooks 只支援 Claude Code。

不需要。CLI 採 MIT 授權，核心工作流程不需要 API 金鑰。安裝只是複製 Markdown 檔案，沒有任何 API 呼叫，資料也不會離開你的電腦。推論都在你原本使用的 AI 程式助理裡進行。

每份檔案都是 OmD 根據公開的產品頁面與官方文件重建而成，並非企業官方提供的檔案（檔案的 Governance 段落也寫明了），設計屬於各家企業。無法確認的數值不會用猜的，而是留白。已驗證的檔案都記錄了檢查日期與下次複查日期，例如 Toss 在 2026-10-13 檢查過，預定 2027-01-07 複查。

可以。請到 GitHub 開 issue，寫下企業名稱與官方網站網址。能用公開的產品頁面與官方文件確認數值的企業，會優先收錄。

到 GitHub 開 issue

適合。典藏裡台灣、中國、日本、韓國企業的參考特別多。網站提供繁體中文、英文、日文與韓文版本，一起安裝的 omd-humanize 與 omd-locale-adapter 技能，能把中文、日文、韓文的文字調整得更道地。