コピペだけでOK！「AIでプロクオリティのかっこいいサイト作りたい」ってなった時の超便利ツール作りました！
ChatGPTとかLovableとかBoltとか、今いろんなAIツールがたくさん出てきてるけど、
「よし、AIでサイト作るぞ！」となったとき、こんな経験ないですか？
最初のプロンプトで詰まる！！！
AI：「どんなデザインにしますか？」
、、、どんなデザインって言われても😅
「おしゃれな感じで」「シンプルに」とか打ち込んでみるものの、出てきた結果が「まあこんな感じかな…」で終わることが多い。
イメージはあるんだけど、うまく言葉にできない。
それがずっとモヤモヤしてました😑
そんなとき、クロドに相談してたら awesome-design-md というものを教えてくれた！
クロド風に言うと「GitHubリポジトリ」と言うのですが、要はデータ集的なものだと思ってください！
AppleとかSpotifyとかBMWとか、有名サービス58社のデザインシステムが DESIGN.md という形式でまとめられてる宝庫👏👏
で、DESIGN.mdというのは、カラーパレット・フォント・ボタンのスタイル・余白の取り方とか、デザイン要素をAIが読める形式でまとめたファイルのこと。
つまり、「AIツールに渡せる！」 のです！
これをLovableやBoltとかAIツールのチャット欄に貼り付けて「このデザインに従って作って」と伝えるだけで、プロっぽいデザインのサイトが出てくる、というわけです♡
ただ、ひとつ思ったことがありました。。。
DESIGN.mdをAIに渡してデザインが作れます、というのはわかる。「便利そうだな」というのも伝わる。
でも「じゃあAppleのデザインってどんな感じなんだっけ？」
「58社の中からどれを選べばいいの？」
そうなったとき、視覚的に比べて選ぶ手段がない😑
「で、実際それはどんな見た目なの？」ってのが大事なのでは！？！？
テキストで「シグネチャーパープルグラデーション、軽量エレガント」って書かれても、パッとイメージできる人ってそんなに多くないと思うんです。
デザイナーさんとかみたいな専門家やエンジニアにとっては「なるほど」ってなるかもしれないけど、僕みたいな非専門家にとっては「で、実際それはどんな見た目なの？」というのが先に来る。
便利さは伝わるのに、その便利さが自分ごとになるまでもうひとステップある、っていう感じなんです。
「実際に見て、選んで、コピーするだけ！」にできたらこの壁がなくなるのでは？
ということで、ビジュアルカタログを作ることにしました！😎👏👏
58社のデザインプレビューをカードにして並べて、気に入ったデザインが見つかったら「DESIGN.mdをコピー」ボタンを押すだけ。
DESIGN.mdが自動で取得・コピーされるから、あとはChatGPTでもLovableでもBoltでも、チャット欄に貼り付けるだけ！
カテゴリフィルター・検索つきで、完全スタンドアロン。
サーバーとか難しいものは不要！ファイルをダブルクリックするだけでWEBページが開く仕様（全て盛り込んだAll in OneなHTMLファイル）にした。
余談なんですが、作ってる途中でちょっとしたバグが出まして。。。
大したことのない話なのでサクッと書きますが、ページ内にタブ（Colors・Typographyなど）があるんですが、それをクリックしても何も起こらない、という現象。
こういうものを作る時には必ずと言っていいほど付き物ですね😅
「タブが動かない！」とクロドに伝えたら、すぐ原因を特定してくれてサクッと修正完了！👏
こういうとき本当に助かります😄
そしてこのファイルを 「DesignVault」 と命名！！！🤩
最終的にこのDesignVaultと名付けたツールは2バージョン作りました。
v1（DesignVault.html）
Claude CodeやAntigravityなどスキル対応のVibeコーディングエージェント向け。コマンドもそのまま使える。
v2（DesignVault-v2.html）
LovableやBoltなど、コードの知識がない人でも使えるバージョン。「DESIGN.mdをコピー」ボタンひとつでどんなAIツールにも対応できちゃう！
ChatGPT・Cursor・Claude Code・Lovable・Boltなど、AIツールでHP作りたいけどデザインに迷ってる方、このファイルひとつで「選ぶ→コピー→貼る」が完結するので試してみてください！
どのデザインが好みでしたか？🤔
自分は青と黒がかっこいい「Framer」と、緑がかわいい「Spotify」が好きです！
早速何かWebページを作ってみたくなりました！w