DESIGN.mdガイド
DESIGN.mdは、Webサイトのデザインシステムを、コーディングエージェントが読めるファイルにします。カラー、タイポグラフィ、スペーシング、角丸、コンポーネントと、その使い方のルールです。これらのガイドでは、DESIGN.mdの活用方法を手順ごとに紹介し、それぞれDESIGN.mdギャラリーの実際のファイルを使った実例を載せています。
初めての方は、DESIGN.mdとは何かから始めてください。作る準備ができたら、あらゆるWebサイトからDESIGN.mdを取得しましょう。
ユースケース別のガイド
- AIコーディングエージェントで開発する開発者
Claude CodeとCursorに、Webサイトに合ったUIを作らせる
気に入ったサイトを抽出し、DESIGN.mdをリポジトリに置いてエージェントに参照させます。Claude CodeとCursor用のプロンプトそのままを紹介します。
- 個人の創業者と小規模チーム
デザイナーがいなくても大丈夫。実績あるデザインシステムをアプリに借りる
参考サイトの選び方、DESIGN.mdのどこを残してどこを変えれば、コピーではなく自分のものになるかを解説します。
- リビルド、リブランド、移行を計画しているチーム
サイトをリビルドするなら、まずデザインシステムを抽出
リビルド、リブランド、フレームワーク移行の前に現在のサイトをDESIGN.mdとして記録し、手で確認すべき点を把握します。
- プロトタイプを作るデザイナーとエージェンシー
2つの参考サイトを組み合わせて、プロトタイプ用のデザインを1つに
抽出した2つのDESIGN.mdファイルをトークン単位で比較し、手作業かエージェントで、プロトタイプ用の1つの仕様にまとめます。
- エージェントやエージェントのワークフローを作る開発者
MCPで、必要なときにコーディングエージェントへデザイン仕様を渡す
MCPサーバーを接続すると、エージェントが自らサイトのDESIGN.mdを抽出し、完了を待って、それをもとに構築できます。