FReptar0/design-guard

Google Stitch を使用してウェブプロジェクト向けの完全な DESIGN.md を生成します。

手順

0. ディスカバリーチェック（何よりも先に必ず実行）:
   • .dg-research/ ディレクトリが存在し、JSON ファイルが含まれているか確認します。
   • .dg-research/ が存在せず、ユーザーが特定のビジネス名、会社名、ブランド名、カフェ名、レストラン名、店舗名、または実在のエンティティを言及している場合：
     • 中断します。ユーザーに次のように伝えます：「まず /dg-discover を実行して [ビジネス名] を調査することをお勧めします。これにより、AI のデフォルト値ではなく、実際の市場データと競合データに基づいた DESIGN.md が生成されます。代わりに /dg-discover を実行しますか？」
     • ユーザーが明示的に調査をスキップすると言った場合のみ、/dg-design を続行します。
   • .dg-research/ が存在し、JSON ファイルが含まれている場合：.dg-research/latest.json を読み取り、ビジネス概要、競合分析、ブランドカラーを取得します。この調査データはビジネスコンテキストのプライマリソースです。CLAUDE.md のプロジェクトレベルコンテキストよりも優先して使用してください。手順1に進みます。
   • ユーザーのリクエストが一般的な場合（特定のビジネスが言及されていない、「ポートフォリオサイトを作って」や「SaaSダッシュボードを作成して」など）：直接手順1に進みます。調査は実際のビジネス向けであり、一般的なプロジェクト向けではありません。

コンテキストの分離（重要 -- 生成前に読んでください）

DESIGN.md を生成する際には、2 つのコンテキストを区別します。

1. ホストプロジェクト -- 実行中のコードベース（Design Guard）。CLAUDE.md はこのプロジェクトについて記述しています。そのビジネスモデル、機能、CLI コマンド、テスト数、技術アーキテクチャはすべて Design Guard に関するものであり、ユーザーのターゲットビジネスに関するものではありません。

2. ターゲットビジネス -- ユーザーが DESIGN.md を必要としているビジネス。これは以下から取得します：

   • ユーザーが提供するブランドブリーフ（手順1）
   • .dg-research/latest.json の調査データ（/dg-discover から入手可能な場合 -- これがプライマリソースです）
   • ターゲットビジネスに関する WebSearch/WebFetch の結果

ルール:

• ターゲットビジネスが Design Guard とは異なる場合：

  • CLAUDE.md のビジネス説明、機能一覧、統計、または技術詳細を使用しないでください
  • CLI コマンド、テスト数、TypeScript、Node.js、MCP、Stitch をターゲットビジネスの機能として参照しないでください
  • ターゲットを「オープンソース」、「デザインインテリジェンス」、または CLAUDE.md のプロジェクト概要にあるフレーズで説明しないでください
  • DESIGN.md 内のすべてのビジネス事実は、ユーザーのブリーフまたは調査データからのみ取得する必要があります
  • プロジェクトルートに既存の DESIGN.md が存在する場合、その色、フォント、ビジネスコンテキストを新しいものにコピーしないでください -- ブリーフと調査から新規に生成してください

• ターゲットビジネスが Design Guard 自身である場合：

  • CLAUDE.md はビジネスコンテキストの有効なソースです -- ユーザーのブリーフと併用してください

• ターゲットビジネスに関係なく、CLAUDE.md の DESIGN.md 8セクション仕様と検証ルールに常に従ってください。FORMAT ルールは常に適用され、BUSINESS コンテキストが分離される対象です。

1. ユーザーが引数としてブランドブリーフを提供した場合はそれを使用します。そうでない場合は以下を尋ねます：

   • 会社名/製品名
   • 業界またはドメイン
   • ターゲットオーディエンス
   • 美的方向性（例：「プレミアムコーポレート」、「遊び心のあるスタートアップ」、「ミニマルSaaS」）

2. 次の8セクションを正確に含む DESIGN.md を生成します：

   1. ビジュアルテーマと雰囲気 — 全体的な美学を説明する2〜3の印象的な文章。具体的な形容詞と参照を使用し、一般的な用語は避けます。
   2. カラーパレットと役割 — 役割、名前、Hex、使用法の列を持つMarkdownテーブル。最低5つの役割（プライマリ、セカンダリ、サーフェス、オンサーフェス、エラー）。すべての色は16進数値で、「信頼できる青」のような説明は避けます。各色に説明的な名前を付けます（例：「プライマリ」ではなく「ディープネイビー」）。
   3. タイポグラフィ — Google Fonts からのフォントファミリー（Inter、Poppins をプライマリとして避ける — AI 生成デザインを示します）。サイズは rem/px、ウェイトは数字（400/600/700）、行の高さ。見出し、本文、等幅フォントを含めます。コントラストを得るためにセリフ/サンセリフのペアリングを使用します。
   4. スペーシングとレイアウト — 基本単位（例：4px）、スケール、最大コンテンツ幅、グリッドシステム、ブレークポイント。
   5. コンポーネントパターン — 構造とスタイルルールを持つ少なくとも3つのコンポーネント（ボタン、カード、入力など）。border-radius とシャドウのスタイルをバリエーション付けます。
   6. アイコン — スタイル（アウトライン/ソリッド/デュオトーン）、デフォルトサイズ、ソースライブラリ。
   7. 画像ガイドライン — 写真スタイル、イラストスタイル、アスペクト比。画像が何を伝えるかについて具体的に記述します。
   8. すべきこととすべきでないこと — それぞれ最低3つ。以下のアンチスロップデフォルトを必ず含めること：

   すべきこと

   • 少なくとも1つの機能セクションで非対称または標準的でないレイアウトを使用する
   • カードのサイズとスペーシングを変えて視覚的なリズムを生み出す
   • 指定されたカラーパレットのみを使用する（AIが選んだ色は使わない）
   • すべてのテキストで高いコントラスト（最小4.5:1）を維持する
   • セクションの背景を変化させる（明るい面と暗い面を交互に）

   すべきでないこと

   • Inter、Poppins、またはシステムサンセリフを主要フォントとして使用しない
   • どこにも紫から青へのグラデーションを使用しない
   • すべての要素に均一な border-radius（>12px）を使用しない
   • 2番目のページセクションとして標準的な3列アイコングリッドを使用しない
   • 2行より長い本文テキストを中央揃えにしない
   • 一般的なストックフォトのイラスト（3Dブロブ、抽象的な形状）を使用しない

3. 検証ルール:

   • すべての色は16進数値（#RRGGBB）である必要があります
   • フォントサイズは rem または px のみ
   • 最低5つのカラーロール、3つのコンポーネントパターン、3つの「すべきこと」と3つの「すべきでないこと」
   • 合計で約3000トークン未満に抑える（Stitch はすべての生成でコンテキストとして読み取ります）

4. DESIGN.md が既に存在する場合、上書きする前に確認を取ります。

5. ファイルをプロジェクトルートの DESIGN.md に書き込みます。

6. 書き込み後、mcp__stitch__list_design_systems を使用して Stitch デザインシステムが存在するか確認します。ユーザーが Stitch プロジェクトを持っている場合：

   • mcp__stitch__create_design_system でデザインシステムを作成することを提案します
   • または mcp__stitch__update_design_system で既存のものを更新します
   • mcp__stitch__apply_design_system でプロジェクトに適用し、将来のすべての生成がそれを尊重するようにします

7. 次のステップ: 新しいデザインシステムを使用して最初の画面を作成するために /dg-generate を実行することを提案します。

参照: 完全な仕様については docs/design-md-guide.md を参照してください。