日中韓の画面のための、実在のデザインシステム

実在する企業のDESIGN.mdが521件。検証済みの値には、すべて出典があります。

DESIGN.mdを見る

$ npx oh-my-design-cli@latest

pixiv風の作品カードを作って

Skill omd-apply0.5秒完了
Read .claude/data/references/pixiv/DESIGN.md0.7秒完了
Write ArtworkCard.tsx+22 −01.6秒完了

夕焼けの坂道

ゆずき

いいね！ 1,204ブックマーク 386

#オリジナル　#風景

フォローする

pixiv DESIGN.md

DESIGN.mdから画面になるまで

企業を選ぶと、その企業の代表的な画面を DESIGN.md の値だけで描き直します。

DESIGN.mdweb/references/freee/DESIGN.md

colors.canvas #ffffff
colors.text #323232
colors.text-muted #595959
colors.border #e1dcdc
typography.heading 40 / 700 / 1.5
typography.body 14 / 400 / 1.5
components.header-primary.bg #2864f0
.fg #ffffff
.radius 5px
.height 31px
.padding 4px 20px
.font 14px / 700

取引一覧

10/18事務用品1,280円
10/17交通費640円
10/15売上の入金+52,000円

取引を登録

値12個・すべて出典付き要素にカーソルを合わせるかタップすると、値の出典が見られます。

oh-my-design-cli をはじめる

oh-my-design-cliは、リファレンスとデザインスキルをお使いのコーディングエージェントに入れるツールです。

インストール

プロジェクトのルートで一度実行します。プロジェクト内のコーディングエージェントを見つけ、それぞれの形式ですべてのスキルと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.

適用
エージェントに一文で頼みます。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ファイルです。コーディングエージェントがUIを作る前に読みます。oh-my-designは実在する企業のDESIGN.mdを521件集めたアーカイブで、そのファイルをコーディングエージェントですぐに使うためのスキルも配布しています。

プロジェクトのルートで npx oh-my-design-cli@latest を一度実行し、エージェントを再起動してください。あとは「Toss風で、家族の献立共有アプリのデザインシステムを整えて」のように一文で頼むだけです。omd-initがDESIGN.mdを用意し、以後のUI作業ではomd-applyがそのファイルを読みます。CLIがなくても、各リファレンスのページからコピー・ダウンロードでき、oh-my-design.kr/<id>/design.md から原文を直接取得することもできます。

Claude Code、Codex、OpenCode、Cursorです。Cursorにはスキルとリファレンスカタログが入り、サブエージェントの定義は入りません。フックはClaude Code専用です。

いいえ。CLIはMITライセンスで、主要なワークフローにAPIキーは不要です。インストールはMarkdownファイルをコピーするだけなので、API呼び出しはなく、データが端末の外に出ることもありません。推論はお使いのコーディングエージェントの中で行われます。

公開されている製品画面と公式ドキュメントを根拠に、OmDが再構成したファイルです。各社の公式ファイルではなく（各ファイルのGovernanceセクションにも明記しています）、デザインは各社のものです。確認できなかった値は推測で埋めず、空けておきます。検証済みのファイルには確認日と次回の再確認日が記録されています。たとえばTossは2026-10-13に確認し、2027-01-07に再確認する予定です。

はい。GitHubのissueに企業名と公式サイトのURLを書いてください。公開されている製品画面と公式ドキュメントで値を確認できる企業から追加しています。

GitHubでissueを作成

はい。アーカイブには日本・韓国・台湾・中国の企業のリファレンスが特に多くあります。サイトは日本語・英語・韓国語・繁体字中国語で読めます。一緒にインストールされるomd-humanizeとomd-locale-adapterのスキルは、日本語・韓国語・中国語の文章をその言語らしく整えます。