mcpField
A
awesome-design

awesome-design

github.com/eaglefandelデザイン・UI365 回インストール27 週間前に更新
リポジトリ

awesome-design について

Google Stitch の DESIGN.md 形式で、55 件以上のウェブサイトのデザインシステムを集め、プレビューとプロンプト作成機能を備えています。デザイナーやコーディングエージェントが方向性を選び、プロジェクトの UI に反映するための資料です。

主な機能

  1. 0155 件以上のサイトデザインを閲覧
  2. 02ライトとダークのプレビューを比較
  3. 03コーディングエージェント向けプロンプト作成
  4. 04`DESIGN.md` をプロジェクトにコピー
  5. 05色、書体、コンポーネント、レイアウトを確認

活用シーン

  1. 01実装前のビジュアル方向の比較
  2. 02コーディングエージェントへのデザイン指示
  3. 03サイトの UI ルールの再利用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/eaglefandel/awesome-design --skill awesome-design

インストール後、Claude Code で/awesome-designを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
.gitignore
CONTRIBUTING.md
LICENSE
.github/
FUNDING.yml
.github/ISSUE_TEMPLATE/
design-md-request.yml
agents/
openai.yaml
design-md/airbnb/
DESIGN.md
preview-dark.html
preview.html
README.md
design-md/airtable/
README.md
preview.html
DESIGN.md
preview-dark.html
design-md/apple/
DESIGN.md
preview.html
README.md
preview-dark.html
design-md/bmw/
DESIGN.md
README.md
preview.html
preview-dark.html
design-md/cal/
README.md
design-md/claude/
DESIGN.md
README.md
preview-dark.html
preview.html
design-md/clay/
DESIGN.md
README.md

詳細

Awesome DESIGN.md

Google の Stitch DESIGN.md 形式に基づき、実際のウェブサイトから抽出した 55 件以上の DESIGN.md ファイルを厳選してまとめています。

利用可能なデザインシステム

AI と機械学習
サイトスタイル
Claude温かみのあるテラコッタ、エディトリアルなレイアウト
Cohere鮮やかなグラデーション、データが豊富なダッシュボード
ElevenLabsシネマティックなダークテーマ、オーディオ波形の美学
Minimax大胆なダークテーマ、ネオンのアクセント
Mistral AIフランス風のミニマリズム、紫を基調
Ollamaターミナルを中心としたモノクローム
xAIシャープなモノクローム、未来的
開発者向けツールとプラットフォーム
サイトスタイル
CursorAI を中心としたコードエディター、グラデーションのアクセント
Linear極めてミニマル、精密、紫のアクセント
Vercel白黒を基調とした精密なデザイン、Geist フォント
Raycast洗練されたダークテーマ、鮮やかなグラデーション
Supabaseダークエメラルド、コードを中心としたデザイン
Expoダークテーマ、コードを中心としたデザイン
Mintlifyクリーンなグリーン、読みやすさを重視
PostHog遊び心のあるハリネズミ、開発者に優しいダークテーマ
デザインと生産性
サイトスタイル
Figma鮮やかなマルチカラー、遊び心がありながらプロフェッショナル
Notion温かみのあるミニマリズム、セリフ体の見出し
Framer大胆な黒と青、モーションを中心としたデザイン
Miro明るい黄色、無限のキャンバス
Webflow青をアクセントにした、洗練されたマーケティングデザイン
フィンテックと暗号資産
サイトスタイル
Coinbaseクリーンな青、信頼感を重視
Revolut洗練されたダークテーマ、グラデーションカード
Wise明るいグリーン、親しみやすく明快
エンタープライズとコンシューマー
サイトスタイル
Airbnb温かみのあるコーラル、写真を中心としたデザイン
Apple上質な余白、SF Pro
Spotifyダークテーマに鮮やかなグリーン
NVIDIAグリーンとブラックの力強さ、技術的

使い方

1. まずプレビューライブラリを開く

ユーザーがスタイルを選ぶ前に比較する必要がある場合は、ローカルのビジュアルカタログをビルドします。

python scripts/build_preview_library.py --open

これにより preview-library/index.html が生成され、コレクション全体の既存の preview.html ファイルと preview-dark.html ファイルがまとめられます。

2. デザインを視覚的に比較する

プレビューライブラリを使って、次のことができます。

  • 各サイト全体の雰囲気を確認する
  • ライトテーマとダークテーマのプレビューを比較する
  • ビジュアルの方向性が決まってから、該当する DESIGN.md を開く
3. 組み込みのプロンプト作成ツールを使う

カードを選んだら、プレビューライブラリで Use This Design をクリックします。

ローカルのプレビューライブラリには、次のことができる選択スタジオが含まれています。

  • 選択したデザインをコンポーザーパネルに固定する
  • ローカルにある DESIGN.md の正確なパスを表示する
  • Codex、Claude Code、または汎用のコーディングエージェント向けに、そのまま送信できるプロンプトを生成する
  • デザインの選択、タスクの種類、対象領域、製品概要をまとめて保持する
4. デザインファイルをコピーする

目的の DESIGN.md ファイルをユーザーのプロジェクトルートにコピーします。

design-md/{site-name}/DESIGN.md
5. デザインを適用する

プレビューライブラリで生成したプロンプトを使うか、AI エージェントに次のように指示するようユーザーに伝えます。

「プロジェクト内の DESIGN.md を使って、このデザインシステムに合った UI を構築してください。」

プレビューアセット

各サイトのフォルダーには、次のファイルが含まれています。

  • DESIGN.md
  • preview.html
  • preview-dark.html

プレビューライブラリは、これらを大規模に活用するための最上位の選択ツール兼プロンプトジェネレーターです。

デザインシステムの内容

各 DESIGN.md には、次の内容が含まれています。

  1. ビジュアルテーマと雰囲気 - ムード、密度、理念
  2. カラーパレットと役割 - 意味的な名称、16 進数、機能上の役割
  3. タイポグラフィのルール - フォントファミリー、階層テーブル
  4. コンポーネントのスタイリング - ボタン、カード、入力欄、ナビゲーション
  5. レイアウトの原則 - 余白の尺度、グリッド、ホワイトスペース
  6. 奥行きと高さ - シャドウシステム、サーフェスの階層
  7. 推奨事項と禁止事項 - デザインのガードレール
  8. レスポンシブ動作 - ブレークポイント、タッチターゲット
  9. エージェント向けプロンプトガイド - すぐに使えるプロンプト

保存場所

すべてのデザインファイルは次の場所に保存されています。

design-md/{site-name}/DESIGN.md

コメント

Markdown 対応