design-md-hub

## それは何ですか design-md-hub はオープンソースのリポジトリで、120 のブランド設計システムをそれぞれ単一のプレーンテキスト `DESIGN.md` ファイルとして収録しています。AI コーディングエージェントが読み取れます。各仕様はブランドのライブ本番ウェブサイトから逆エンジニアリングされており、記録されたフォント、16進数値、ロゴ、コピーは実際のソースから取得され、推測ではありません。ライブサイトから確認できない値は省略されます。 ## DESIGN.md に含まれるもの - カラーパレットとセマンティックトークン - タイポグラフィスケールとフォント選択 - コンポーネントパターンとバリエーション - スペーシング、シャドウ、ボーダー半径 - レイアウト原則とレスポンシブ動作 - トーン、ガードレル、および dos/don'ts 各ブランドフォルダーには、ブラウザで直接開ける自己完結型 `preview.html` も同梱されており、ビルドステップ不要で視覚的アイデンティティを確認できます。 ## README に記載されたワークフロー 1. ブランドのライブサイトから HTML、CSS、フォントを取得し、実際のトークンを抽出します。 2. それらのトークンをプレーンテキストの `DESIGN.md` 仕様に変換します。 3. ブラウザでアイデンティティを示す一致する `preview.html` を作成します。 4. コーディングエージェントが `DESIGN.md` を読み取り、そのブランドの声で UI を生成します。 ## カバー範囲 このコレクションは開発者ツール、AI/LLM 製品、デザインツール、フィンテック、アナリティクス、オブザーバビリティ、生産性アプリ、認証サービス、データプラットフォーム、コマース、オートメーションにわたります。名前の挙がった例として GitHub、Figma、Cursor、Linear、Stripe、Vercel、Supabase、Notion、Docker、MongoDB、Cloudflare、OpenAI、Claude、Mistral AI、ElevenLabs、Tailwind CSS、shadcn/ui、n8n、Zapier、Grafana など多数があります。README からリンクされているライブギャラリーサイトでプレビューを閲覧できます。 ## 使い方 1. 一覧から使いたい `DESIGN.md` を選択します。 2. それをプロジェクトのルートにコピーします。 3. プロジェクト ルートの `DESIGN.md` に従うようコーディングエージェントに指示します。 4. コンポーネント、ページ、あるいはアプリ全体を一貫したスタイルで生成します。 ペイウォール、サインアップ、API キーは不要です。貢献はリポジトリの `CONTRIBUTING.md` から受け付けています。 ## 注意点 README に記載されているように、これらの仕様は教育およびプロトタイピングを目的とした非公式の参照であり、公開されているブランドサイトから逆エンジニアリングされたものです。ブランドによる公式の endorsement または affiliation はありません。商標およびロゴはそれぞれの所有者に帰属します。プロジェクトは MIT ライセンスで提供されています。