AIエージェント基盤を手がけるVoltAgentが公開した、デザインシステムの「参照ファイル」コレクション。Apple・Stripe・Figma・Linear・Notionといった著名サイトの配色・タイポグラフィ・余白・コンポーネントの設計思想を解析し、DESIGN.mdという1枚のMarkdownにまとめている。使い方は単純で、目当てのサイトのDESIGN.mdをプロジェクトのルートに置くだけ。あとはCursorやClaude Code、Boltなどのコーディングエージェントがそれを読み、同じ視覚言語で新しいページやコンポーネントを書いてくれる。GitHub版（awesome-design-md）はMITライセンスのオープンソースで、Product Huntでは「Design.MD」として掲載された。
AIにUIを作らせると、どのプロジェクトも似たような「量産感のある見た目」に落ち着いてしまう。原因はエージェントが視覚的な判断基準を持っていないことにあり、DESIGN.mdはその判断基準を外から与えるための道具である。
主な特徴
- 著名サイトのデザインシステムをMarkdown化: 色・タイポグラフィ・スペーシング・角丸・影・コンポーネントの振る舞いといった要素を、エージェントが読める散文とトークンの形で記述している。単なるカラーコードの羅列ではなく「なぜその選択なのか」という設計意図まで含まれるのが特徴
- プロジェクトに置くだけで効く: インストールも依存関係も不要。ファイルをリポジトリのルートに配置し、エージェントに「DESIGN.mdに従って」と伝えれば済む。特定のフレームワークやエディタに縛られない
- 幅広いジャンルを収録: AI・LLM系（Claude、OpenAI、Mistral）、開発者ツール（Cursor、Vercel、Linear）、デザインツール（Figma、Framer、Webflow）、EC（Shopify、Nike、Airbnb）、自動車（Tesla、Ferrari、BMW）、メディア（Spotify、WIRED）など。1990年代風のレトロサイトまで揃っている
- プレビュー用HTMLが同梱: 各エントリにはDESIGN.mdに加えてプレビューHTMLが付き、そのデザインがどんな見た目になるかを事前に確認できる
- 個別サイトの解析依頼にも対応: 公式サイト側では、カタログに無いサイトのDESIGN.mdを作ってもらう依頼を受け付けている。自社のブランドガイドをエージェント向けに翻訳したい場合に使える
- スターターキットと関連リソース: Webサイト・モバイルアプリのスターターキット、背景素材などがカタログとして併設されている
料金
| プラン | 料金 | 主な内容 |
|---|---|---|
| GitHub版（awesome-design-md） | 無料（MITライセンス） | リポジトリ内のDESIGN.mdを自由に利用・改変・再配布できる |
| 公式サイトの公開カタログ | 無料で閲覧可能 | Web上でデザイン解析を閲覧し、DESIGN.mdを取得できる |
| Catalog Pass / 個別解析依頼 / スターターキット | 公式サイトを要確認 | カタログ全体へのアクセス、指定サイトの個別解析、テンプレート類 |
料金は2026年8月時点の情報です。有料メニュー（Catalog Pass・個別解析依頼・スターターキット）の具体的な価格は公開ページ上で確認できなかったため、最新の情報は公式サイトをご確認ください。
メリット・デメリット
✅ メリット
- AI生成UIにありがちな「どこかで見た見た目」から抜け出せる。方向性を言葉で説明し直す手間が減る
- ファイルを置くだけで使えるため、導入コストがほぼゼロ。既存プロジェクトにも後から足せる
- Cursor・Claude Code・Bolt・Google Stitchなど、エージェントを選ばない。ツールを乗り換えても資産が残る
- MITライセンスなので、自社プロジェクト用に書き換えて社内のデザイン基準として運用できる
- デザインシステムの読み物としても有用。有名サイトが何を根拠に色や余白を決めているかを学べる
⚠️ デメリット
- あくまでテキストによる指示なので、エージェントがどこまで忠実に従うかはモデルやプロンプト次第。ピクセル単位の一致は期待できない
- 既存ブランドの見た目を強く模倣することになるため、そのまま公開すると意匠面での配慮が必要になる場面がある
- 元サイトのリニューアルに解析が追随するとは限らず、内容が古くなる可能性がある
- 収録されているのは「有名サイト風」の型であり、独自性の高いデザインをゼロから設計する用途には向かない
- 有料メニューの価格が公開ページからは読み取りにくく、事前の予算見積もりがしづらい
類似サービスとの比較
| 比較項目 | getdesign.md | v0（Vercel） | Google Stitch | shadcn/ui |
|---|---|---|---|---|
| 提供するもの | デザイン指針のMarkdown | UI生成サービス | UI生成サービス | コンポーネント一式 |
| 導入方法 | ファイルを置くだけ | Web上で生成 | Web上で生成 | CLIでコードを取得 |
| エージェント連携 | ツールを選ばない | v0の環境内 | Stitchの環境内 | 生成コードを直接編集 |
| 既存プロジェクトへの適用 | しやすい | 生成物を移植する必要あり | 生成物を移植する必要あり | しやすい |
| 見た目の方向づけ | 有名サイトの視覚言語を指定 | プロンプト依存 | プロンプト依存 | テーマ設定で調整 |
| 料金 | GitHub版は無料（MIT） | 無料枠＋有料 | 無料枠あり | 無料（OSS） |
getdesign.mdはUIを生成するサービスではなく、生成する側に渡す「指示書」を提供する立ち位置にある。そのため上表の他サービスと競合するというより、組み合わせて使うものと考えたほうが実態に近い。
こんな人におすすめ
- Cursor・Claude CodeなどでUIを書かせているが、出力の見た目が毎回そろわないと感じている開発者
- デザイナーが常駐しないチームで、視覚的な一貫性の基準を軽い仕組みで持ちたい人
- 個人開発でLPやダッシュボードを作っていて、既製テンプレート以外の方向性を試したい人
- デザインシステムの考え方を、実例を通して短時間で把握したい非デザイナー
- 自社のブランドガイドをエージェントが読める形に翻訳したいプロダクトチーム
まとめ
getdesign.mdは、AIコーディングエージェントに「見た目の判断基準」を与えるという一点に絞った道具である。仕組み自体はMarkdownを1枚置くだけと素朴だが、生成されるUIの質はプロンプトの言い回しよりも、こうした参照資料の有無で大きく変わる。GitHub版がMITライセンスで公開されているため、まずは自分の使っているエージェントで1つ試し、効果が実感できたら自社向けのDESIGN.mdを書き起こす、という進め方がしやすい。