把真實公司的 DESIGN.md 交給 shadcn 技能

簡短回答

在 oh-my-design.kr 挑一份 Verified v2 參考，把它的 DESIGN.md 存到專案根目錄，用 npx skills add shadcn/ui 安裝 shadcn 技能，再請代理依據 ./DESIGN.md 建立設計系統。OmD 參考採用 Google 的 DESIGN.md 格式：token 寫在 YAML frontmatter，下面接說明文字。技能在動手修改前，會先讀 frontmatter、Do's and Don'ts 與 Known Gaps。

四個步驟

1. 挑一份已驗證的參考

   在典藏中選擇標示 Verified v2 的參考。每個值都附來源，也有 Known Gaps 清單。partial 與 legacy 參考的 token 較少，也沒有量測過的缺口紀錄，技能能用的素材會少很多。

2. 儲存 DESIGN.md

   在參考頁面頂端點選 Copy DESIGN.md 或 Download。也可以直接取得原始檔：就是正式的 DESIGN.md，結尾附兩行來源說明。

   $ curl -o DESIGN.md https://oh-my-design.kr/toss/design.md

   複製

3. 安裝 shadcn 技能

   這是 shadcn 文件中的安裝方式。技能名稱是 shadcn，沒有斜線指令；當你要求 shadcn/ui 設計系統或提到 DESIGN.md 時，代理會自動載入。DESIGN.md 工作流程由 PR #12252（2026-10-09 合併）加入。

   $ npx skills add shadcn/ui

   複製

4. 交給代理處理

   用平常的說法提出要求就好。技能會建立應用程式（用風格預設執行 init，再執行 add --all），把 token 對應到 shadcn 的 CSS 變數，修改元件的 variant，最後寫一份報告。下面的提示詞另外要求它遵守 OmD 的字型規則。

請依據 ./DESIGN.md 建立 shadcn/ui 設計系統。照著 shadcn 技能的 design-system 工作流程，先讀 frontmatter、Do's and Don'ts 與 Known Gaps，再對應 token。凡是你自行推估補上的值，都要寫進報告。不要用其他字型取代品牌字型；如果無法安裝，只使用 DESIGN.md 指定的 safe default，並標明它是 fallback。

會留下來的內容

2026-10-14 用從 oh-my-design.kr 原封不動下載的已發布 Toss 檔案，把技能從頭到尾執行一次並量測。先前用較小的草稿（2026-10-13）執行的四次，在顏色、圓角、按鈕高度、對比缺口與字型上結果相同。

顏色

所有顏色角色寫入 globals.css，八組 50–900 色票也全部註冊為 token

圓角

固定 4 到 16px 共 7 級；膠囊形狀上限為 16px

文字

26 種文字樣式成為以 px 為單位的 type-* 工具類別

控制項高度

TDS 按鈕 56 / 48 / 38 / 32px 寫入 button.tsx；輸入框、下拉選單與分頁標籤也一起調整為 38px

狀態

套用按下時的 scale(0.96) 與文件中的雙層焦點框；依照 DESIGN.md，主要按鈕沒有 hover

Known Gaps

主要按鈕對比 3.71:1 照紀錄回報，沒有被修改；技能也指出文件中的焦點框在白底上只有 1.90:1

字型

保留 "Substitute: none"；Noto Sans 與 Noto Sans KR 以標明的 fallback 排在 Toss Product Sans 之後安裝；從未使用 Inter

限制

• 已發布檔案執行一次（透過 claude -p 執行 Claude Sonnet：15 輪、3 分 41 秒、0.80 美元），草稿執行四次。每次執行之間的差異大於格式之間的差異，請把它當成實例，而不是基準測試。
• 技能的最後兩步（展示頁面與瀏覽器檢查）沒有執行，所以這裡沒有截圖；證據是技能寫下的檔案。
• DESIGN.md 沒有定義的角色（深色主題、圖表顏色、secondary 等）由技能自行補上，並在報告中標為推估值。這些值是代理的選擇，不是品牌的。
• 技能也會自行判斷：這次執行把預設按鈕設為 38px，而不是 TDS 的 56px（「因為是網頁應用程式」），並把字重 600 套用到所有按鈕尺寸。報告逐條列出這些決定，上線前請先讀過。
• 用 Google 的 linter 讀取已發布的 Toss 檔案，結果是 0 個錯誤、110 個警告：89 個沒有元件使用的色票 token，20 個超出其 schema 的元件屬性（type、states、pressed），以及 Known Gaps 已記錄的 3.71:1 對比。
• 品牌字型通常不能再散布。你拿到的是品牌字型的名稱和標明為 fallback 的 safe default，不是字型本身。
• 這次執行之後，Toss 檔案有了變化：2026-10-20 加入了品牌字型的實測替代字型（拉丁字母用 IBM Plex Sans，韓文用 Pretendard Variable），並標示為「substitute — not the brand face」。上面的字型結果來自當時還沒有替代字型的 10-14 檔案。

真實執行的結果

以下是 2026-10-14 用已發布 Toss 檔案執行時，shadcn 技能寫下的 REPORT.md 片段，未經修改。原文是英文，所以保留英文。

- **Fonts:**
  - Stack is `"Toss Product Sans", "Noto Sans Variable", "Noto Sans KR Variable", system`.
  - Substitute: none. The DESIGN.md chose none and says Toss Product Sans can't be redistributed.
  - Noto Sans and Noto Sans KR are the documented safe default. They are a fallback, not the brand face.

## Contrast pairs under 4.5:1
Ratios were computed with the WCAG formula.

| Pair | Ratio | Source |
| --- | --- | --- |
| White on `#3182f6` (primary button, light and dark) | **3.71:1** | The DESIGN.md itself records this in Known Gaps; left as specified. |
| `#8b95a1` muted text on white | **3.04:1** | DESIGN.md "Muted". Applies to descriptions and placeholders. |
| `#8b95a1` muted text on `#f2f4f6` | **2.76:1** | Same. |
| `#e42939` danger on white | **4.49:1** | DESIGN.md danger; just under AA. |
| `#8ac0ff` focus ring on white | 1.90:1 | Below the 3:1 non-text target. The DESIGN.md spec is kept. |

• 本次執行紀錄：提示詞、擷取表、報告，以及修改前後的 globals.css 與 button.tsx
• 先前用草稿執行的四次紀錄
• shadcn-ui/ui#12252