[オープンソース発掘 #2] oh-my-design、コーディングエージェントにブランドを与える

埋もれたリポジトリを選んで開いてみる連載の第2回です。オープンソース発掘 第1回ではThreadsアカウントの運用をAIに任せるデスクトップアプリを取り上げましたが、今回は韓国の開発者によるプロジェクトです。oh-my-designはコーディングエージェントにデザインシステムを導入するツールです。

問題意識は明快です。AIエージェントにUIを作らせると、画面ごとにブランドが変わります。昨日は青いボタン、今日は紫のグラデーション。DESIGN.mdはこの問題をファイル規約で解決します。詳しくは別記事で扱いました。Google Stitchが公開した仕様に基づき、リポジトリにデザイントークンとブランドルールを記したMarkdownファイルを置き、エージェントに毎回読ませる方法です。oh-my-designはその規約を「で、月曜の朝に何を入力すればいいの？」という実用の領域まで引き下ろしたプロジェクトです。

リポジトリは2026年4月に公開され、現在は星400個を超え、MITライセンスです。作者は韓国の開発者で、そのためかカタログにはToss・Baemin・Danggeun・Bunjangなど韓国のサービスが特に多く含まれています。これは実質的な差別化要素の一つなので、後ほど改めて触れます。

1行インストール、4つのエージェント

インストールはこれだけです。

npx oh-my-design-cli@latest

対話式インストーラーがプロジェクト内のエージェントを検出し、チャンネルごとにバンドルを導入します。READMEに整理された対応範囲は次のとおりです。

エージェント	インストールされるもの
Claude Code	フルバンドル — .claude/以下のスキル20個、サブエージェント18個、hooks、カタログデータ
Codex	.agents/skills/以下のスキル、.codex/agents/以下のサブエージェント役割、ローカルカタログ
OpenCode	.opencode/以下の同一バンドル
Cursor	プロジェクトのruleファイル1つと共有カタログ。スキル・サブエージェント・フックはインストールしない

Cursorだけ扱いが違うのが目立ちます。Cursorにはスキルやサブエージェントを実行するチャンネルがないため、ruleファイルで「DESIGN.mdを優先する」という契約だけを埋め込む、意図的なrules-onlyチャンネルです。この違いを隠さず、「Cursorの正確な利用経路」という節で別途案内しているのは誠実です。

インストール後にエージェントを再起動し、npx oh-my-design-cli@latest doctorで診断します。CLIの役割はここまでです。インストールと診断だけを行い、その後のデザイン作業はすべてエージェントセッション内で自然言語により進みます。別途APIキーも、常駐デーモンも、MCP（Model Context Protocol、エージェントに外部ツールを接続する標準）サーバーも不要です。当初はカタログをMCPで提供していましたが、現在は廃止されています。スキルがローカルファイルを直接読む方が単純だと判断したためで、過去の実装はpackages/mcp/にアーカイブとして残っています。

企業リファレンス440件、核心は数ではなく根拠

パッケージには企業のデザインシステムをDESIGN.md形式に再構成したリファレンスが440件収録されています。Toss、Stripe、Linear、Apple、Airbnbまで。すべてカタログサイトで確認でき、各リファレンスにはoh-my-design.kr/<id>/design.mdのraw Markdown版も用意されているため、エージェントがURLから直接取得できます。Web上でリファレンスを選んでDESIGN.mdをダウンロードするBuilderページもあり、スキルをインストールできないCursorにはこの経路が案内されています。

数字だけを見ると「Webをスクレイピングして440件作ったのだろう」と思いますが、ファイルを開くと印象が変わります。Tossリファレンスのフロントマターには、各claimに根拠が付いています。tokens.colors.primary: #3182f6の横には、どの画面（TDSモバイルボタンのドキュメント）で、どの方法（computed styleのキャプチャと公式ドキュメントの照合）で、いつ（2026-07-11）確認したかが記録されています。本文も同様です。「Toss Product Sansが可視要素810箇所で第1フォントとして観測された」のように観測回数を記し、ブランドロゴの青と実際のUIの青（#3182f6）は異なるため混ぜて使わないよう注意しています。フォントの再配布権について公式ソースに明記がないことも、「不明」のまま残しています。

とはいえ、440件すべてがこの密度ではありません。カタログは自らグレードを公開しており、執筆時点でVerified v2が141件、Partialが159件、Legacyスナップショットが140件です。新しい検証パイプラインを通過したのはまだ3分の1ということです。リポジトリの仕様書には「verifiedの日付はタイムスタンプであり、品質グレードではない」とあり、カタログページにも「信頼は根拠・鮮度・競合の有無から算出し、日付スタンプから推測しない」と明記されています。自分のデータの限界をグレードで示す姿勢は、この種のカタログ型プロジェクトでは珍しい美点です。

トークンの先へ、Voice

DESIGN.mdの原仕様は、色・タイポグラフィ・スペーシングなどのトークンを中心にしています。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」になります。

トークン値の違いではなく、すべて話し方の違いです。ホームページは「Tokens get you halfway. Voice takes you home.」と要約しています。トークンは半分まで連れていき、残りをVoiceが埋めるという意味です。

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フックが登録され、プロンプトが届くたびにNodeスクリプトがスキルを起動するか判断します。便利な一方で、すべてのプロンプトに割り込むレイヤーが一つ増えます。

サブエージェントはomd-masterと、UXリサーチ・a11y監査・ペルソナテスト・コピー改善などを担当する17人のスペシャリストで構成されます。詳細一覧は公式ドキュメントに整理されています。

書く前に知っておくこと

今回も気になる点を挙げます。

リファレンスの法的な位置づけを誤解してはいけません。 READMEのライセンス条項が明記するように、コードはMITですが、リファレンスは各企業の資産であり、教育目的の参照用に再構成されたものです。「Tossスタイルで」は着想の出発点であって、Tossの色・フォント・文言をそのまま移植してよい許可ではありません。Tossリファレンス自身がToss Product Sansの再配布権を確認できていないと記している理由です。

**値は古くなります。**リファレンスの色とタイポグラフィは、特定の日に実測したスナップショットです。企業がリブランディングすれば、その瞬間からずれ始めます。フロントマターのverified日付を確認する習慣が必要で、前述のとおりv2検証スキーマの適用はまだ一部です。

**プロジェクトにはかなり多くのファイルが入ります。**スキル・サブエージェント・フック・カタログがリポジトリ内の.claude/（またはチャンネル別パス）に配置されます。個人用リポジトリなら問題ありませんが、チームリポジトリならコミット前に合意が必要です。一方、管理はよく考えられています。管理ファイルにはマーカーとハッシュを埋め込み、再インストール時にその場で更新します。ユーザーが変更したファイルは上書きせずスキップし（skipped-drift）、doctorが範囲を限定した復元コマンドを案内します。

リリースのペースが速いです。 npm基準2026年4月末の初回リリースから、3か月で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などを加え、トークンだけでは捉えられないブランドの話し方まで仕様化します。
• ローカルファイルベースです。APIキー・デーモン・MCPサーバーなしで既存のエージェントセッション内で動作し、初期のMCP方式は意図的に取り除かれました。
• リファレンスは各企業の資産なのでそのまま移植してはいけません。また、実測スナップショットなので古くなる可能性があります。チームリポジトリではインストールファイルをコミットする前に合意が必要です。

リポジトリはhttps://github.com/kwakseongjae/oh-my-design、カタログとドキュメントはoh-my-design.krです。次回も埋もれたリポジトリを一つ選んで開いてみます。

あわせて読みたい

オープンソース発掘シリーズ

• 前回：[オープンソース発掘 #1] AutoThreads、Threadsアカウントの運用をAIに任せるオープンソースのデスクトップアプリ

関連トピック

• DESIGN.mdとは？ AIエージェントにデザインシステムを読ませるファイル

出典と確認基準

• 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）