design-md

design-md — 74 ブランドのデザインシステムリファレンス

著名ブランドのウェブサイトから抽出した DESIGN.md ファイルのキュレーションされたセットです。それぞれが実際のデザインシステムを AI が読み取れる形式でまとめています。セマンティックな役割を持つカラーパレット、タイポグラフィの階層、コンポーネントのルール、レイアウトの原則、そして奥行き / エレベーションです。コーディングエージェントに一つ渡せば、そのブランドの見た目に合った UI を生成できます。

ソースコンテンツ: voltagent/awesome-design-md (MIT)。 このスキルは、そのライブラリの上に載る薄いインデックス + ワークフローレイヤーです。

このスキルを使う場面

• ユーザーが、特定ブランドのスタイルで UI / ランディングページ / コンポーネントを求めたとき (「Linear のように」「Stripe っぽい感じで」「Apple の雰囲気にして」)。
• ゼロから考案するのではなく、実際のシステムからデザインの方向性を選ぶ必要があるとき。
• frontend-design / tailwind-design-system に引き渡す前に、具体的なデザイントークンの セット (色 / タイプスケール / コンポーネントのルール) を出発点としてほしいとき。

ワークフロー

1. ブランドを選ぶ — 以下のインデックスを雰囲気 + メインカラーで走査し、要件に最も 近いものを選びます。
2. その DESIGN.md を読み込む — インデックスのスラッグ (例: linear.app、x.ai、bmw-m) を使って <library>/design-md/<brand>/DESIGN.md を読みます。
3. それに従う — カラーの役割、タイプスケール、コンポーネント、エレベーションを 厳格な仕様として扱います。ビジュアルの参考には、隣にある preview.html / preview-dark.html を開きます。
4. (任意) frontend-design → tailwind-design-system → shadcn → design-review へ引き渡し、方向性を本番コンポーネントに変換します。

ライブラリの場所を特定する (<library>)

<library> は awesome-design-md リポジトリのローカルクローンです。次の順番で解決します。

1. 設定されていれば DESIGN_MD_DIR 環境変数。

2. 一般的な場所: ~/Developer/awesome-design-md、~/dev/awesome-design-md、 ~/awesome-design-md、または現在のプロジェクト内の awesome-design-md/ フォルダー。

3. どれも存在しない場合は、クローンします (シャロークローンで問題ありません):

   git clone --depth 1 https://github.com/voltagent/awesome-design-md.git ~/Developer/awesome-design-md
   

ブランドのファイルは常に <library>/design-md/<brand>/DESIGN.md にあります。

以下のインデックス (メインカラー + 一行説明) だけでも、方向性を選ぶには十分です。 完全なトークンの詳細が必要なときにのみ、DESIGN.md 全体を読んでください。

---

74 のブランド (メインカラー + 一行説明)

AI & LLM

• claude #cc785c — 温かみのあるクリーム色のキャンバス、コーラルの CTA、セリフのディスプレイ書体。ほとんどの AI ブランドがクールな青に傾く中で、ヒューマニスト的。
• x.ai #ffffff — 白いピル型のアウトラインだけが差し込むほぼ黒のキャンバス。ミニマルで冷徹なフロンティア AI。
• cohere #17171c — エンタープライズ AI: 白いエディトリアルな余白、深い緑がかった黒のプロダクトバンド、鉱物的なサーフェス、角丸のメディアカード。
• mistral.ai #fa520f — 山の写真の上に重ねる、象徴的な夕焼けのグラデーション (マスタード / オレンジ / 深紅)。
• minimax #0a0a0a — 鮮烈な白のマーケティングに黒いピル型 CTA、鮮やかなグラデーションのプロダクトサーフェスを組み合わせ。
• together.ai #000000 — AI インフラ: ほぼ黒のヒーローバンドに、オレンジ・マゼンタの三色グラデーション。
• replicate #ea2804 — 温かみのあるクリーム色のインディーな ML プレイグラウンドの美学に、自信に満ちたホットオレンジのアクセント。
• runwayml #000000 — シネマティックなリール: ダークでエディトリアル、フルブリードの映像がそのまま UI。
• elevenlabs #292524 — 静かなエディトリアル印刷誌のように読める音声 AI。
• ollama #000000 — 徹底的にミニマル。ホームページは Markdown の README のように見える。
• composio #0007cd — AI エージェントのツール群: ダークでテクニカル、たった一つの深いエレクトリックブルーの電圧。
• voltagent #00d992 — 開発者向け AI エージェントプラットフォーム: 徹底したほぼ黒 + 一つのネオングリーン。
• lovable #f7f4ed — 柔らかなクリーム色のキャンバスで、抑制によって生まれる温かみ (AI アプリビルダー)。

開発者ツールとプラットフォーム

• cursor #f54e00 — 通常の暗い IDE ではなく、温かみのあるクリーム色のエディトリアルキャンバスと温かいオレンジを採用した AI コードエディター。
• vercel #171717 — ほぼ白の背景に黒とインクのデュエット、マルチカラーのメッシュグラデーションでヒーロー規模に大きく展開。
• linear.app #5e6ad2 — このセットで最も深いほぼ黒のキャンバス + 単一のラベンダーブルーのアクセント。ソフトウェアクラフトのラグジュアリー。
• framer #ffffff — 純黒のアートボード、GT Walsheim の白い書体に攻めたネガティブトラッキング。
• webflow #080808 — ビジュアル Web ビルダー: 深いほぼ黒とゆとりある白いキャンバスの対比。
• figma #000000 — 白黒のエディトリアルなフレームに、特大のハンドカット風パステルカラーブロックが割り込む。
• warp #f7f5f0 — 温かみのあるほぼチャコールのキャンバス（純黒よりやや暖かい色調）上のエージェント型ターミナル。
• raycast #ffffff — 拡張された 1 枚のプロダクトスクリーンショットのように読めるマーケティングサイト。
• opencode.ai #201d1d — ターミナルネイティブ: ページ全体が Berkeley Mono で組まれている。
• expo #000000 — 静かな自信に満ちたインフラブランドとしてスタイリングされた React Native プラットフォーム。
• sentry #150f23 — 深い紫菫色の真夜中のキャンバス、エレクトリックライムのアクセント、やや挑発的なイラスト。
• posthog #f7a501 — 遊び心のある温かいクリーム色のキャンバスに、手描きのハリネズミのマスコットが傍注として登場。
• hashicorp #000000 — ほぼ黒の地に製品ごとのアクセント（Terraform の紫、Vault の黄、Consul のピンク）。
• sanity #0b0b0b — 夜行性のコマンドセンター: 暗く、精密で、深く構造化された開発コンテンツプラットフォーム。
• mintlify #0a0a0a — ドキュメント基盤: 雰囲気のある空のグラデーションのマーケティングヒーロー + クリーンな白いドキュメントのデュアルモード。
• supabase #3ecf8e — オープンソースデータベース: クリーンな白 / ほぼ黒に、シグネチャーである単一のエメラルドの CTA。
• mongodb #00ed64 — 深いディープティールのヒーローバンドに明るい MongoDB グリーンの CTA + 際立つ白いドキュメント。
• clickhouse #faff69 — ほぼ純黒の上にエレクトリックイエローの電圧を効かせた高性能データベース。
• ibm #0f62fe — Carbon に忠実: 白いサーフェス、IBM ブルーのアクセント、意図的にフラットスクエアな美学。
• resend #fcfdff — ほぼ純黒のキャンバス、オフホワイトのテキスト、深みのあるエディトリアルセリフ Domaine の見出しマーク（開発者向けメール）。
• clay #0a0a0a — GTM オーケストレーションプラットフォームのためのクレイメーション meets データ。鮮やかで遊び心がある。

生産性とコラボレーションの SaaS

• notion #5645d4 — オールインワンワークスペース: ブランドイラストで飾られた深いネイビーのヒーローバンド。
• miro #1c1c1e — カナリアイエローのワードマークを軸にした AI ビジュアルワークスペース。自信に満ち、少し遊び心がある。
• airtable #181d26 — 全面にシグネチャーカード（コーラル / ダークグリーン / ピーチ）を配した、落ち着いたエディトリアルなワークフローソフトウェア。
• cal #111111 — カレンダーソフトウェアファースト: 白いキャンバス、黒のプライマリ CTA、独自の Cal Sans ディスプレイ。
• slack #4a154b — 深いオーバジンのプライマリ、クリームラベンダーのヒーローグラデーション、青いインラインリンク。
• intercom #111111 — カスタマーサービスのエディトリアル: 柔らかなクリームホワイト、Saans 書体、自信に満ちた単一の Fin ブルー。
• zapier #ff4f00 — ワークフロー自動化: 温かいクリームのニュートラルに深いオレンジのアクセント。
• superhuman #1b1938 — 深いインディゴのエディトリアルヒーローと紫の空の雰囲気に分かれた高速メール。

ファイナンスと暗号資産

• stripe #533afd — 深いネイビーのインク、エレクトリックインディゴのプライマリ、繰り返し現れる雰囲気のあるメッシュグラデーション。
• coinbase #0052ff — 静かな自信に満ちた金融サービスブランドとしてスタイリングされた機関投資家グレードの取引所。
• binance #fcd535 — 深いほぼ黒のキャンバスに、すべての CTA で象徴的な Binance イエロー。
• kraken #7132f5 — 白地に堂々たるパープルを効かせた、クリーンで信頼できる暗号資産取引所。
• revolut #494fdf — 際立つ黒のキャンバス、コバルトバイオレットのブランド、彩度の高いプロダクトカラーの幅広いパレット。
• wise #9fe870 — グローバルな送金: 異例に重いほぼ黒のディスプレイ書体（900 @ 64〜126px）+ 鮮やかなグリーン。
• mastercard #eb001b — 柔らかなストーンとシグナルオレンジレッドで構成された温かみのあるエディトリアルマガジン。

Eコマース、コンシューマー & モビリティ

• airbnb #ff385c — 温かみのあるマーケットプレイス: クリーンな白いキャンバス + 唯一のアクセントとしての Airbnb Rausch コーラル。
• shopify #000000 — 2 つの並行するデザイントラックを走らせる映画的なコマースプラットフォーム。
• nike #111111 — 写真優先のコマース。キャンペーン画像に焼き付けられた堂々たる大文字の Futura。
• pinterest #e60023 — 写真優先のディスカバリー: Pinterest レッドの CTA、メイソンリーのピングリッド、やわらかなウォームクリームのクローム。
• starbucks #006241 — 店頭エプロンのグリーンをあらゆるサーフェスにまとった、温かみのあるリテールの旗艦。
• uber #000000 — 交通系スーパーアプリ: カスタムの幾何学的ディスプレイで額装された白黒のデュエット。
• meta #0064e0 — ハードウェアコマース (Quest、Ray-Ban Meta) + プロダクトマーチャンダイジングの語り口を持つブランドサーフェス。

メディア & エンターテインメント

• apple #0066cc — マーケティングを美術館のギャラリーに変える、写真優先のインターフェース。
• spotify #1ed760 — アルバムアートが色彩となる、ほぼ黒の没入型プレイヤー + Spotify グリーン。
• theverge #3cffd0 — チップチューンサウンドボードを接続した Condé Nast の雑誌。ネオン。
• wired #000000 — 旗艦テック誌: 白地に厳格な黒のワードマーク、エディトリアルなデュエット。
• playstation #0070d1 — コンソールの発売トレーラーのようにスクロールする黒 / 白 / PlayStation ブルーのチャプター。

自動車

• tesla #3e6ae1 — ラディカルな引き算: プロダクトがすべてであり、単一のエレクトリックブルー。
• ferrari #da291c — 映画的なエディトリアルとして描かれた高級スーパーカーブランド。
• bmw #1c69d4 — 抑制の効いた、落ち着いたコーポレート・オートモーティブ (BMW M の派手さとは別物)。
• bmw-m #ffffff — モータースポーツのエンジニアリング: ほぼ黒のキャンバスに、自信に満ちた大文字の白い BMW Type Next。
• lamborghini #ffc000 — 暗闇の大聖堂: 漆黒のステージ、スポットライトに照らされたマシン。
• bugatti #ffffff — 禁欲的なラグジュアリー: ほぼ純黒、白いレタースペースの大文字、フルブリードの写真。
• renault #ffed00 — 2021 年のフラットラインのダイヤモンドマーク、際立つ白黒、シグネチャーの Sunlight Yellow。

エンタープライズ、ハードウェア、通信 & 航空宇宙

• hp #024ad8 — HP Electric Blue を唯一のシグナル CTA とする、ホワイトペーパー的なエンタープライズ・コンシューマーシステム。
• nvidia #76b900 — エンジニアリンググレード: 黒のヒーロー / 紙白のボディのデュアルモード + NVIDIA グリーン。
• vodafone #e60000 — 通信のスーパーブランド: 大文字の巨大なディスプレイを伴うエディトリアル写真のヒーロー。
• spacex #000000 — ミッション志向の航空宇宙: 純黒にフルブリードのロケット / 火星のビデオヒーロー。

レトロ (90 年代〜00 年代)

• dell-1996 #e91d2a — カタログ時代のエンタープライズ Web: 文字通りの黒いページフレーム + フラットなカラーブロックのリボンカード。
• nintendo-2001 #e60012 — すべてのパネルが面取りされた金属板である、ブラッシュドペリウィンクルの「コンソールクローム」。

---

選び方のヒント

• 温かみ / ヒューマニスト: claude, cursor, warp, posthog, lovable, zapier, pinterest, starbucks, mastercard
• ダーク / ハイコントラストなテック: linear.app, vercel, x.ai, sanity, clickhouse, spacex, resend, together.ai
• ミニマル / プロダクトファースト: tesla, apple, bugatti, raycast, ollama, uber
• 単一の大胆なアクセント: supabase (グリーン), stripe (インディゴ), binance (イエロー), airbnb (コーラル), kraken (パープル), spotify (グリーン)
• エディトリアル / マガジン: elevenlabs, wired, theverge, ferrari, mastercard, cohere
• レーシング / ラグジュアリーな黒: lamborghini, bmw-m, ferrari, bugatti

色について迷ったときは、パレットをでっち上げず、選んだブランドの DESIGN.md からセマンティックなカラーロールをそのままコピーしてください。