VoltAgent/awesome-design-md

これは何？

主な機能

• 01多数のブランドサイト向けに、すぐに使えるDESIGN.mdファイルを提供します。
• 02各ファイルでは、色、タイポグラフィ、コンポーネント、レイアウト、エレベーション、レスポンシブのルールを扱います。
• 03カラースウォッチ、文字サイズのスケール、ボタン、カードを示すプレビュー用HTMLページを収録しています。
• 04各サイトについて、ライトとダークのプレビューを用意しています。
• 05特別なツールを必要としないプレーンなMarkdown形式の、Stitch DESIGN.md仕様に準拠しています。

ユースケース

• ブランドのDESIGN.mdをプロジェクトにコピーし、そのスタイルでページを作るようAIエージェントに依頼する。
• よく知られたサイトがデザイントークンやコンポーネントのルールをどう構成しているか調べる。
• 1990年代から2000年代初頭のコレクションを使って、レトロなインターフェースを生成する。
• プロジェクト全体で、AIが生成するUIのビジュアルに一貫性を持たせる。

クイックスタート

1. 1

   getdesign.md のコレクションから DESIGN.md を選びます

2. 2

   DESIGN.md ファイルをプロジェクトのルートにコピーし、AI エージェントにそのデザインに合ったページを作成するよう依頼します

収録されている特集

トピック

よくある質問

awesome-design-md とは？

ブランドサイトから抽出したDESIGN.mdを集めたキュレーション集で、AIコーディングエージェントが各デザインシステムに沿ったUIを生成できます。 Awesome DESIGN.mdは、特定のWebサイトやブランドのビジュアルデザインシステムを記述した、プレーンテキストのDESIGN.mdファイル集です。色、タイポグラフィ、コンポーネント、レイアウト、奥行き、レスポンシブ時の挙動などを扱います。各エントリーはMarkdownファイルなので、プロジェクトのルートに配置すれば、AIコーディングエージェントが内容を読み取り、同じビジュアル表現でUIを構築できます。

awesome-design-md は無料で使えますか？ライセンスは？

awesome-design-md は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

awesome-design-md は今もメンテナンスされていますか？

活発にメンテナンス中。awesome-design-md の最終コミットは 2026年10月28日 です。

awesome-design-md は何に使えますか？

ブランドのDESIGN.mdをプロジェクトにコピーし、そのスタイルでページを作るようAIエージェントに依頼する。 よく知られたサイトがデザイントークンやコンポーネントのルールをどう構成しているか調べる。 1990年代から2000年代初頭のコレクションを使って、レトロなインターフェースを生成する。 プロジェクト全体で、AIが生成するUIのビジュアルに一貫性を持たせる。

awesome-design-md のインストール方法は？

getdesign.md のコレクションから DESIGN.md を選びます DESIGN.md ファイルをプロジェクトのルートにコピーし、AI エージェントにそのデザインに合ったページを作成するよう依頼します

awesome-design-md はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/VoltAgent/awesome-design-md