1. はじめに

DMD Builder は、Web デザインのルール（スタイルガイド）を GUI で設定し、AI コーディングエージェントが読み取れる形式（design.md）として書き出すデスクトップアプリです。

コーディングの知識がなくても、プレビューを見ながら直感的に 「デザインの仕様書」 を作成できます。

v2.1.0 からは AI 連携機能 を搭載し、Claude / Codex とのワンクリック連携が可能になりました。

2. 基本的な流れ

Bandicam_20260506_123826.mp4

1. アプリを起動する
   • スプラッシュ画面の後、プロジェクト選択ダイアログが表示されます もし表示がされなかった場合は、画面左下にあるフォルダマークをクリックしてください
   • 作成したプロジェクトはヘッダーにあるプロジェクト名から、開くこともできます
2. 新規プロジェクトを作成する
   • プロジェクト名を入力 → 自動で 書類/DMD Builder/[プロジェクト名]/ が作成されます
   • 直近に作成済みのプロジェクトは最近のファイルに表示されます。それ以外のプロジェクトファイルを読み込む際は、既存ファイルを開く→プロジェクト名、をクリックし、design.mdを読み込むことで、プロジェクト機能が利用できます。
3. 5 つのタブを順に設定する
   • カラー / 文字 / 余白 / パーツ / レイアウト
4. プレビューで確認
   • PC / SP、ライト / ダークの各モードで見え方をチェック
5. 保存（⌘S / Ctrl+S）
   • design.md と関連ファイル（base-rules.md / rules.md / ai-logs/）が自動更新
6. AI に渡す
   • ヘッダーの 「AIに指示する」 ボタンから、Claude Code / Claude アプリ / Codex を起動
   • design.md を参照したプロンプトが自動生成され、ワンクリックで AI 連携できます

Bandicam_20260425_145950.mp4

3. 各タブの説明

カラー

• 5 種以上のカラートークンを設定（メイン / サブ / テキスト / ベース / ボーダー 等、カスタム追加も可能）
• HEX / RGB 両対応