実在する企業の 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 を読みます。

4 つの手順

1. 検証済みのリファレンスを選ぶ

   アーカイブで Verified v2 と表示されたリファレンスを選びます。値ごとの出典と Known Gaps の一覧が付いています。partial や legacy のリファレンスはトークンが少なく、計測した欠落の記録もないため、スキルが使える材料が減ります。

2. DESIGN.md を保存する

   リファレンスページ上部の「Copy DESIGN.md」か「Download」を使います。原文ファイルを直接取得しても構いません。正本の DESIGN.md の末尾に出典が 2 行付いています。

   $ 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 ファイルでスキルを最初から最後まで 1 回実行して計測しました。それより小さい草稿（2026-10-13）での先行 4 回も、色、角丸、ボタンの高さ、コントラストの欠落、フォントで同じ結果でした。

色

すべての色の役割が globals.css に入り、50–900 のパレット 8 系統もすべてトークンとして登録された

角丸

4〜16px の 7 段階を固定。pill 形状は 16px に制限

文字

26 の文字スタイルが px 単位の type-* ユーティリティになった

コントロールの高さ

TDS のボタン 56 / 48 / 38 / 32px が button.tsx に反映され、input・select・tab も 38px に揃った

状態

押下時の scale(0.96) と、文書にある 2 層のフォーカスリングを適用。DESIGN.md のとおり主ボタンに hover はない

Known Gaps

主ボタンのコントラスト 3.71:1 を直さず記録どおり報告。文書のフォーカスリングが白地で 1.90:1 であることもスキルが指摘

フォント

"Substitute: none" を維持。Noto Sans と Noto Sans KR を Toss Product Sans の後ろに fallback として明記して導入。Inter は使われなかった

限界

• 公開版ファイルで 1 回（claude -p で Claude Sonnet、15 ターン、3 分 41 秒、0.80 ドル）、草稿で 4 回の実行です。実行ごとの差が形式による差より大きかったため、ベンチマークではなく実例として読んでください。
• スキルの最後の 2 手順（ショーケースページとブラウザ確認）は実行していないため、スクリーンショットはありません。根拠はスキルが書いたファイルです。
• DESIGN.md にない役割（ダークテーマ、チャートの色、secondary など）はスキルが自分で埋め、レポートで推定値と明記します。これらはブランドではなくエージェントが選んだ値です。
• スキル自身の判断も入ります。今回の実行では既定のボタンを TDS の 56px ではなく 38px にし（「Web アプリなので」）、weight 600 をすべてのボタンサイズに適用しました。レポートに一つずつ書かれているので、出荷前に読んでください。
• Google のリンターで公開中の Toss ファイルを読むと、エラー 0 件、警告 110 件です。どのコンポーネントも使わないパレットのトークン 89 件、スキーマ外のコンポーネント属性 20 件（type、states、pressed）、そして Known Gaps に記載済みのコントラスト 3.71:1 が 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
• 草稿での先行 4 回の記録
• shadcn-ui/ui#12252