デザインが苦手？ テキストファイル1枚で解決する時代が来たよ 🎨
エンジニアあるあるなんだけど、コードは書ける、ロジックも組める、でもUIを作ると…なぜかダサくなる。色の組み合わせが分からない、余白のバランスが取れない、フォントの選び方が分からない。デザイナーに頼む予算もない。結局、機能は完璧なのに見た目で損をするプロダクトが大量に生まれる。あるあるだよね 😅
そんな全世界のエンジニアの悩みを一撃で解決するかもしれないリポジトリが、今ものすごい勢いでバズってる。VoltAgentが GitHubで公開 した『awesome-design-md』。公開からたった2週間で45,540スター、5,658フォーク。やばい。
DESIGN.md ってなに？ 🤔
簡単に言うと、有名ブランドのデザインシステムを1枚のMarkdownファイルにまとめたもの。Google Stitchが提唱した概念で、FigmaでもJSONでもなく、プレーンテキスト。人間が読んでも分かるし、AIエージェントが読んでもUIを正確に再現できる。
各DESIGN.mdには9つのセクションが入ってるんだけど、これが結構しっかりしてる：
- ビジュアルテーマと雰囲気 — ブランドの「空気感」を言葉で表現
- カラーパレット — HEXコードと「どこに使うか」
- タイポグラフィ — フォント、ウェイト、行間
- コンポーネント — ボタン、カード、フォームの具体的スタイル
- レイアウト原則 — グリッド、余白、階層
- 深さと立体感 — シャドウ、ボーダーの扱い
- Do's and Don'ts — やっていいこと・ダメなこと
- レスポンシブ — モバイル/タブレット/PCの振る舞い
- エージェント用プロンプト — AIに渡す指示文の雛形
つまり、カラーコードだけじゃなくて「この紫はプレミアム感を出すために使って、背景にだけ適用して、テキストには使わないでね」みたいなニュアンスまで書いてある。これがAIに渡すと効くんだよね 🚀
使い方、30秒で終わるよ ⚡
使い方がびっくりするほど簡単。
ステップ1: ターミナルでこれを打つ
npx getdesign@latest add stripe
これでDESIGN.mdがプロジェクトに配置される。GitHubから手動コピーでもOK。
ステップ2: AIに言う
「DESIGN.mdを読んで、このデザインに合わせてダッシュボード作って」
ステップ3: 完成 🎉
AIがカラーパレット、フォント、コンポーネント、レスポンシブまで全部踏襲したUIを生成してくれる。Figma開く必要なし。マジで。
収録66ブランド、ラインナップが豪華すぎる 🏆
9カテゴリ66件のブランドが収録されてるんだけど、このラインナップがすごい：
- AI系: Claude、Cohere、ElevenLabs、Mistral AI、Ollama
- 開発ツール: Cursor、Expo、Lovable、Raycast、Vercel
- バックエンド: ClickHouse、MongoDB、PostHog、Supabase
- SaaS: Cal.com、Linear、Notion、Zapier、Airtable
- デザインツール: Figma、Framer、Webflow
- フィンテック: Stripe、Wise、Coinbase
- Eコマース: Airbnb、Nike、Shopify
- メディア: Apple、Spotify、Uber、WIRED
- 自動車: Tesla、BMW、Ferrari、Lamborghini（！）
Lamborghiniのデザインシステムでウェブアプリ作る人がいるかは分からないけど、選択肢があるのはいいことだよね 😂
副業エンジニアにとっての最強武器になるかも 💪
個人的にこのリポジトリが一番刺さるのは、副業や個人開発でSaaSを作りたい人たちだと思う。
週末にSaaSを作る。機能は3日で動く。でもデザインに2週間かかる — この経験したことある人多いんじゃない？ DESIGN.mdはその2週間を30秒に圧縮してくれる。npx getdesign add linear って打てば、Linearレベルのダークモードデザインが手に入る。npx getdesign add stripe なら、あのプレミアムフィンテック感。
もちろんブランドのデザインを「丸パクリ」するのはNGだけど、カラーパレットの配色原則とか、コンポーネントの余白ルールとか、レスポンシブの考え方を「参考にする」なら全然問題ない。これってOSSの世界でずっとやってきた「良いコードから学ぶ」文化のデザイン版だよね。
なんでこんなにバズったの？
2週間で4.5万スターってかなり異常なペースなんだけど、理由はシンプル。「デザインが苦手」って悩みが世界共通だから。CursorやClaude Codeでバイブコーディングする人が増えれば増えるほど、「コードは書けるけどデザインがダサい」問題が顕在化する。DESIGN.mdはそこにピンポイントで刺さった。
面白いのは、「デザイン情報の最適フォーマットはテキストだった」って発見。FigmaファイルはAIが読めない。デザイントークンのJSONは「なぜこの色を使うか」が伝わらない。でもMarkdownなら、数値も理由も全部書ける。LLMが最も得意なのはテキストの理解だから、デザインの意図もテキストで渡すのが実は最も精度が高いんだよね。
vibe codingの時代に、vibeもテキストで渡せる。これがDESIGN.mdの本質的な発見だと思う ✨
