awesome-design-md

Awesome Design MD

目的

バンドルされた Awesome Design MD ライブラリを、UI デザインの選択可能なリファレンスとして使用します。全体に適用する単一のスタイルがあると想定しないでください。プロダクトに最適なスタイルを選び、UI を変更する前に、そのスタイルの DESIGN.md を読んでください。

ライブラリ内のすべてのパスは、このスキルフォルダー、つまり SKILL.md が含まれるディレクトリを基準に解決してください。

バンドルされたライブラリ：

<skill-root>/design-md

スタイルインデックス：

<skill-root>/STYLE_INDEX.txt

スタイルファイルのパターン：

<skill-root>/design-md/<style>/DESIGN.md

選択に関する任意のメモ：

<skill-root>/references/style-selection.md

ワークフロー

1. ユーザーがスタイルを指定した場合、そのスタイルが存在すれば、指定されたものをそのまま使用します。
2. スタイルが指定されていない場合は、プロダクトのコンテキストを確認して、スタイルを1つ選びます。編集を始める前に、選択したスタイルを簡潔に伝えてください。
3. 利用可能なスタイルを確認する必要がある場合は、STYLE_INDEX.txt を読みます。
4. 選択した design-md/<style>/DESIGN.md のみを読み、ライブラリ全体を読み込まないでください。
5. レイアウト、色、タイポグラフィ、余白、操作感、コンポーネントの外観の指針として、そのスタイルを適用します。
6. 既存のプロダクト上の制約、データ密度、アクセシビリティ、フレームワークの規約を維持します。
7. 既存アプリでは、ユーザーが明示的に再デザインを依頼しない限り、既存のフローを壊さずに UI を改善します。

デフォルトのスタイルマッピング

• 開発者向けツール、AI エージェントのコンソール、自動化パネル：voltagent、cursor、warp、linear.app、raycast。
• SaaS ダッシュボード、タスク／プロジェクト管理、管理コンソール：linear.app、stripe、vercel、posthog、supabase。
• コンシューマー向け／モバイルアプリのような洗練されたプロダクト：apple、airbnb、spotify、pinterest、notion。
• 暗号資産／Web3／取引所／金融：coinbase、binance、kraken、revolut、wise。
• AI ラボ／モデル／プロダクトページ：x.ai、mistral.ai、cohere、together.ai、runwayml、replicate。
• ドキュメント／開発者向けポータル：mintlify、vercel、stripe、supabase、hashicorp。
• ラグジュアリー／自動車／ブランド重視のランディングページ：bugatti、ferrari、lamborghini、bmw、tesla、nike。

複数のスタイルが適している場合は、最も派手なものではなく、対象画面を最も改善できるものを選んでください。

ルール

• どこにでも voltagent を機械的に適用しないでください。
• ユーザーから依頼されない限り、DESIGN.md を対象プロジェクトにインポートしないでください。バンドルされたライブラリから読むだけで十分です。
• 最終回答にデザインの説明を大量にコピーしないでください。
• プロジェクトレベルの DESIGN.md を上書きしないでください。存在する場合は、ローカルのルーティングノートとして扱い、その後、選択したバンドルスタイルを読んでください。
• 汎用的な AI UI のデフォルトを避けてください。選択したスタイルの具体的なトークンとコンポーネントの慣習を使用してください。
• 特定のファイルエンコーディングが必要なプロジェクトでは、プロジェクトのローカル指示に従ってください。

クイックコマンド

スキルルートから利用可能なスタイルを一覧表示します：

Get-Content -LiteralPath '.\STYLE_INDEX.txt'

スキルルートからスタイルを1つ読み込みます：

Get-Content -Raw -Encoding UTF8 -LiteralPath '.\design-md\linear.app\DESIGN.md'