awesome-design

Awesome Design：ブランドリファレンスライブラリ

DESIGN.md ファイルをブランドごとにまとめた厳選コレクションです。各ファイルでは、その製品の実際のデザイントークンを抽出しています。色のパレットと意味上の役割、タイポグラフィの階層、コンポーネントのスタイル（ボタン／カード／入力欄／ナビゲーションと各状態）、間隔／グリッド、シャドウ／エレベーションのシステム、レスポンシブのブレークポイント、推奨事項と禁止事項が含まれます。ソース：voltagent/awesome-design-md（VoltAgent に謝意。このスキルは簡単にインストールできるようにラップしたものです。リファレンスのコンテンツとライセンスは、そのリポジトリに帰属します。）

初回セットアップ

${CLAUDE_PLUGIN_DATA}/awesome-design-md/ がまだ存在しない場合、ユーザーから「awesome design をセットアップして」と依頼された場合、またはブランドのリファレンスが必要なのにまだクローンされていない場合は、クローンします。

mkdir -p ${CLAUDE_PLUGIN_DATA}
git clone https://github.com/voltagent/awesome-design-md ${CLAUDE_PLUGIN_DATA}/awesome-design-md

後からそのディレクトリで git pull を実行した際に、上流で追加されたブランドを取得できるよう、浅いクローンではなくフルクローンを行います。この処理は一度だけ実行すればよく、プラグインのデータディレクトリに保存されるため、アップデート後も保持されます。

ブランドリファレンスの使用

1. ${CLAUDE_PLUGIN_DATA}/awesome-design-md/design-md/ で、依頼されたブランドのフォルダーを確認します（小文字、ハイフン区切りです。例：design-md/stripe/DESIGN.md）。
2. 該当するブランドがない場合は、ディレクトリから近い候補（例：類似するカテゴリ — フィンテック、開発者向けツール、SaaS）を挙げてユーザーに選んでもらうか、トークンを推測するのではなく、そのブランドがコレクションに含まれていないことを明確に伝えます。
3. ブランドの DESIGN.md を読みます。ユーザーが視覚的なリファレンスを希望する場合は、preview.html ／ preview-dark.html も読みます。そのうえで、依頼された UI の構築や再設計に際し、色、文字のスケール、コンポーネントの状態、間隔、シャドウ、ブレークポイントなどのトークンを適用します。これは単なるムードボードではなく、「このブランドの UI が実際にどのような見た目か」を示す正確な基準として扱います。

ブランド一覧

${CLAUDE_PLUGIN_DATA}/awesome-design-md/README.md の Collection セクションを読むか、design-md/ ディレクトリを直接一覧表示します。初回クローン以降に追加された可能性のあるブランドをユーザーが探している場合は、まずそのディレクトリで git pull を実行します。