# AIと開発するためのデザイン指示書「DESIGN.md」の使い方

このファイルは、AIコーディングエージェント（Cursor, Windsurf, GitHub Copilotなど）と一緒に開発を行う際、AIに**あなたのプロジェクトのデザインルールを迷わず守らせるため**のテンプレート「DESIGN.md」の解説書です。

## 1. DESIGN.mdって何？

DESIGN.mdは、例えるなら「AIに渡す、ブランドマニュアル」です。

AIは非常にコードを書くのが速いですが、放っておくと「AI自身がその時良いと思ったデザイン（色、余白、サイズ）」を勝手に作ってしまいます。ページごとにボタンの色が違ったり、余白がバラバラになったりするのはこれが原因です。

このマニュアルを渡しておくことで、AIの行動にルールを敷くことが可能です。

## 2. Tailwind CSSに関する注意とカスタマイズ

テンプレートの中には `Tailwind CSS`の記述が含まれています。しかし、プロジェクトによって使っている技術は異なります。

ご自身の環境に合わせて、DESIGN.mdの書き方を自由に変更してください。

### もしTailwind CSSを使っていない場合
例えば、従来の普通のCSS（スタイルシート）を使っている場合は、テンプレートの以下のような部分を書き換えてAIに伝えます。

【テンプレートの記述（Tailwind向け）】
> カード・パネル内のパディング: 基本的に `p-6` を使用します。

【通常のCSS向け】
> カード・パネル内のパディング: cssファイルに `.card-panel { padding: 24px; }` を定義して、このクラスを当ててください。インラインスタイル（style="..."）は絶対に書かないでください。

AIは文脈を理解できるので、「このプロジェクトではTailwindではなく、外部のCSSファイルでデザインを管理するんだな」と理解し、それに合わせたコードを提案するようになります。

## 3. DESIGN.mdの使い方（3ステップ）

1. 書き換える: 同梱されている `DESIGN.md` テンプレートを開き、`[ ]` で囲まれた部分をご自身のプロジェクトの色やフォントに書き換えます。
2. 配置する: アプリやウェブサイトのソースコードが入っている一番上のフォルダ（ルートディレクトリ）に、この `DESIGN.md` を保存します。
3. AIに伝える: 最初だけ、AIへのチャットで「デザインは DESIGN.md のルールに従ってね」と一言添えるか、AIエージェントの基本ルール設定（Cursor Rulesなど）に「常に DESIGN.md を参照すること」と書き込んでおきます。

たったこれだけで、デザインの崩れを直す無駄なやり取りが激減し、本来作りたい機能の開発に集中できるようになります！