awesome-design-mdを画像生成プロンプトに翻訳——73ブランドレシピ集

こんにちは、プロンプト画伯です。

「Apple風で」「Spotify風で」の指示に手ぶらで立ち向かって、5時間かけて外れの絵を10枚並べた経験、私にはあります。

私はこの半年で、73ブランド分のDESIGN.mdをすべて画像生成プロンプトに翻訳しました。

今日はその中から、無料で3ブランド、有料で25ブランドをまるっと渡します。

きっかけは些細で、GitHubのトレンドで見かけた開発者向けのリポジトリを開いたら「これ画像生成にそのまま横流しできるじゃん」と気づいた、それだけの話です。

awesome-design-md とは——世界97,000スターの「73ブランドDESIGN.md集」を画像生成に横流しする

awesome-design-md は VoltAgent が公開している、73ブランドの DESIGN.md を集めたリポジトリです。

2026年7月時点で97,000スターを超えていて、GitHub界隈ではもう定番の位置にいます。

GitHub - VoltAgent/awesome-design-md: A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.

A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI. - VoltAgent/awesome-design-md

github.com

収録されているのは Apple・Spotify・Notion・Stripe・Vercel・Claude・Airbnb・Nike・Tesla・Ferrari・任天堂の2001年版まで、73ブランドぶんの完全なデザイン仕様書。

各ブランドの DESIGN.md には Color Palette、Typography、Component Style、Mood、Signature（署名的な意匠）が全部書いてあります。

本来はコーディングエージェント向け、つまり Cursor や Claude Code に読ませて「Notion風のUIを作って」と頼むための資料です。

でも中身を眺めていて気づきました。

これ、画像生成プロンプトの材料としてそのまま使える。

カラーコード、雰囲気語彙、主役要素、禁止事項——画像生成AIが欲しがっている情報が全部揃っている。

自作でテンプレを書いていた頃、私はブランドごとに1〜2時間かけて世界観を言語化していました。

それが、73ブランド分まとまって公開されている。

コーダー向けの資産を、画像生成側に横流しする。

その発想の転換だけで、私の作業は何十時間か短縮されました。

ただ、横流しには「翻訳」が必要です。

コーディング用のスキーマをそのまま投げても意図通りには出ない——その変換ルールを次に見せます。

DESIGN.mdを画像生成プロンプトに翻訳するルール

DESIGN.md はコーディング用のスキーマで書かれているので、そのまま Midjourney や gpt-image-2 に投げても意図通りには出ません。

「値」を「雰囲気語彙」に翻訳する変換ルールが必要です。

私が半年かけて固めた、DESIGN.md → プロンプトの対応表がこれです。

ここがミソなんですが、HEXコードをプロンプトに列挙しすぎると、AIは色を機械的に並べようとして、そのブランドの「気配」が消えます。

たとえば Apple なら #f5f5f7 を1つだけ指定して、あとは「museum-gallery editorial staging」「reverent composition」といった雰囲気語彙で骨格を作る。

これだけで再現性が跳ね上がります。

モデル別の注意点も1行ずつ。

gpt-image-2 は指示追従がいちばん素直で、雰囲気語彙とHEXを混ぜてもそのまま解釈してくれる。

Nano Banana は速さと引き換えに色が飽和しがちなので no color cast と念押しする。

Midjourney は質感が最強な代わりに --stylize を100前後に落とさないと勝手にトレンドを足してきます。

このルールで翻訳した無料サンプルを3ブランド、次に出します。

無料サンプル——Apple・Spotify・Linear のフルレシピ

私が最初に翻訳した3ブランドを、コピペで使える完成形として渡します。

各レシピは「世界観の言語化」「英語プロンプト全文」「想定出力」「使いどころ」「調整のコツ」の5ブロック構成です。

このまま画像生成AIに投げれば、1〜2分で1枚出ます。

1. Apple——「余白と製品写真」のレシピ

美術館の展示台のような静けさ。

主役1つに、パーチメント白の広い余白、下に1本だけの薄い影。

装飾を全部剥がして「引き算の美学」で世界観を作る、Apple の代名詞です。

プロンプト:

Editorial museum-gallery product staging, ultra minimalist Apple-inspired layout.
Single hero object centered on pearl-white #f5f5f7 surface with generous negative
space, at least 40% of frame empty. Subtle single soft drop-shadow beneath the
object (rgba 0,0,0,0.22, 3px 5px 30px blur), no other shadows, no gradients, no
decorative borders. Ink #1d1d1f fine caption text bottom-left, one small Action
Blue #0066cc dot as accent only. Photorealistic, 21:9 aspect, quiet confidence,
reverent composition, low density, precise and intentional. Shot as an Apple
keynote hero image.

想定出力: パーチメント白の広い余白に、被写体（プロダクトや小物）が1つだけ中央に置かれ、下に薄い1本の影。

左下に細い黒のキャプション、Action Blue の点が1つだけ差し込まれた、極端にミニマルなキーノート風の絵が出ます。
使いどころ: プロダクトLPのヒーロー画像 / SaaSの機能紹介サムネ / 高級感を出したい単品プロモ画像。

1つの主役をきれいに見せる用途に強い。
調整のコツ: 影は複数入れると壊れるので single drop-shadow only を必ず明示。

被写体を複数指定すると Apple 感が一瞬で消えるので1オブジェクト厳守。

Nano Banana は色を飽和させがちなので #f5f5f7 exactly, no color cast と念押しします。

2. Spotify——「近黒×ネオングリーン×アルバム主役」のレシピ

真っ黒に近い #121212 の劇場で、アルバムアートだけが色を放つ。

Spotify Green は差し色として1点だけ、装飾には絶対使わない。

「近黒の劇場でアルバムが光る」——これが再現の核です。

プロンプト:

Premium dark-theater music streaming aesthetic, near-black #121212 background,
immersive dark cocoon composition. Central subject rendered as a square album-art
tile with saturated color that glows against the surrounding darkness. Heavy
dramatic drop shadow rgba(0,0,0,0.5) 0px 8px 24px beneath the tile. Pill-shaped
control button in Spotify Green #1ed760 as the only accent, no other green
decoration. Silver #b3b3b3 caption text uppercase with letter-spacing 1.8px.
Circular play button icon. Dense layout with minimal whitespace. Tactile, glowing,
theatrical, achromatic surroundings with one album tile as color source.

想定出力: 真っ黒に近い背景に、正方形のアルバムアート的タイルが浮かび、その色だけが場を照らす。

下には Spotify Green のプレイボタンとピル型ボタン。

テキストは白/シルバーの大文字で字間が広く、全体はぎゅっと詰まった劇場的な絵になります。
使いどころ: 音楽・ポッドキャスト系サムネ / ダーク基調のリリース告知バナー / エンタメ系YouTubeサムネ / 「今夜の1曲」的なSNS投稿画像。
調整のコツ: functional only, single accent を書かないと画面全体が緑に染まる事故が起きます。

Midjourney は暗い画面で自動補正をかけるので --stylize 50 に落とすと近黒が保てる。

Nano Banana は大文字化を無視することがあるので uppercase, letter-spacing wide を明示します。

3. Linear——「近黒×ラベンダー×プロダクトUIが主役」のレシピ

真っ黒に近いキャンバスに、少し明るいチャコールの角丸パネル。

その中にKanbanやissue一覧のUIモックが入って、上に字間の詰まった大きな見出しが載る。

ラベンダーは1点だけの差し色。

「software-craft」の静けさが Linear の空気です。

プロンプト:

Software-craft dark documentation aesthetic, near-pure-black #010102 canvas.
Central rounded charcoal panel #0f1011 with 16px corner radius and 1px hairline
border #23252a, containing a mock product UI screenshot (kanban board or issue
list style). Aggressive negative-tracked headline text in near-white #f7f8f8
above the panel, weight 600, letter-spacing -1.8px. Single lavender-blue #5e6ad2
accent used only as a small brand mark or focus ring. Muted gray body text
#d0d6e0 below. No gradients, no atmospheric glow, no drop shadows. Flat surface
ladder, quiet luxurious restraint, dense technical composition. 16:9 aspect.

想定出力: 真っ黒に近い背景に、少し明るいチャコールの角丸パネルが浮かび、その中にKanbanやissue一覧のようなUIモックが入っている絵。

上には字間の詰まった大きな見出し、ラベンダーの点が1箇所だけ差し色として入る、装飾が一切ない仕上がり。
使いどころ: SaaS LPのヒーロー / エンジニア向けツール紹介記事のOG / GitHub連携ツールのバナー / 「開発者向け」を訴求したいSNS画像。
調整のコツ: Midjourney はグラデ・グロウを勝手に足すので no gradient, no atmospheric glow, no drop shadow を3連発で明示。

lavender-blue used scarcely を書かないと画面全体が紫に染まります。

Nano Banana は近黒を暗すぎると解釈するので #010102 canvas, not pure black と指示するのが安全。

上の3プロンプトのどれかを、今開いている画像生成AIに投げてみてください。

1枚出たら、色や構図を少しだけ変えて2枚目を出す。

それだけで「Apple風の下地」が1つ手に入ります。

外注15万円 vs 480円——ブランド画像生成プロンプトの相場感

3ブランドで手が動いた人向けに、コストの話をしておきます。

私がフリーランス時代に受けていた案件の相場感で、外注コストと本レシピ集を並べたのがこの表です。

1ブランドあたり19円は、コンビニのブラックコーヒーより安い。

素材購入1点3,000〜5,000円と比べると、同じ予算で20〜30ブランドぶんの下地が揃う計算です。

もちろん「外注1回分の予算があれば必ず節約できる」と断定はできません。

案件の下地として使えば、という条件付きの話。

ただ、明日「Notion風で」「Claude風で」の指示が来た瞬間に手ぶらだと、探す時間だけで1〜2時間持っていかれるのを私は何度も経験しました。

ここまでの3ブランドで手が動いた人は、たぶん明日その指示が来ても手ぶらじゃないはず。

ここから先は、同じ密度のレシピが25ブランド分、7カテゴリで並んでいます。