把真实公司的 DESIGN.md 交给 shadcn 技能

简短回答

在 oh-my-design.kr 选一个 Verified v2 参考，把它的 DESIGN.md 保存到项目根目录，用 npx skills add shadcn/ui 安装 shadcn 技能，然后让智能体根据 ./DESIGN.md 构建设计系统。OmD 参考采用 Google 的 DESIGN.md 格式：令牌写在 YAML frontmatter 里，下面是说明文字。技能在动手修改之前会先读 frontmatter、Do's and Don'ts 和 Known Gaps。

四个步骤

1. 选一个已验证的参考

   在资料库中选择标有 Verified v2 的参考。它们为每个值注明来源，并附有 Known Gaps 列表。partial 和 legacy 参考的令牌更少，也没有经过测量的缺口记录，技能能用的材料会少很多。

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），把令牌映射到 shadcn 的 CSS 变量，修改组件的 variant，最后写一份报告。下面的提示词额外要求它遵守 OmD 的字体规则。

请根据 ./DESIGN.md 构建 shadcn/ui 设计系统。按照 shadcn 技能的 design-system 工作流，先读 frontmatter、Do's and Don'ts 和 Known Gaps，再映射令牌。凡是你自行推断补上的值，都在报告中列出。不要用其他字体替换品牌字体；如果无法安装，只使用 DESIGN.md 指定的 safe default，并标明它是 fallback。

会被保留的内容

2026-10-14 用从 oh-my-design.kr 原样下载的已发布 Toss 文件，把技能从头到尾运行了一次并测量。此前用较小的草稿（2026-10-13）运行的四次，在颜色、圆角、按钮高度、对比度缺口和字体上结果一致。

颜色

所有颜色角色写入 globals.css，八组 50–900 色板也全部注册为令牌

圆角

固定 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 个没有组件使用的调色板令牌，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