Google Stitch 連携

Google Stitch とは

Google Stitch は、Google が開発した AI デザインツールです。テキストプロンプトからデザインカンプ（モックアップ）を生成でき、DESIGN.md のようなデザインシステム文書を入力として受け取ることで、一貫性のあるデザインを出力します。

Stitch の特徴

• テキストプロンプトからデザインカンプを即時生成
• デザインシステム文書（DESIGN.md）に準拠した出力が可能
• 反復的なフィードバックによるデザイン改善
• 生成されたデザインからコード実装への橋渡し

DESIGN.md → Stitch ワークフロー

create-design スキルで生成した DESIGN.md を Stitch に投入し、デザインカンプの生成から実装までの一気通貫ワークフローを解説します。

全体フロー

要件定義 → DESIGN.md 生成 → Stitch 投入 → デザインカンプ → フィードバック → 実装
         (create-design)    (コピペ)      (AI生成)       (反復)        (AIエージェント)

ステップ 1: DESIGN.md の準備

create-design スキルで DESIGN.md を生成します。

/create-design

既存の DESIGN.md がある場合

プロジェクトにすでに DESIGN.md がある場合は、そのまま使用できます。フォーマット仕様 に照らして 9 セクションが揃っているか確認してください。

ステップ 2: Stitch への投入

1. stitch.withgoogle.com にアクセス
2. プロンプト入力欄に DESIGN.md の内容を貼り付け
3. 生成したい画面の指示を追加
4. 「Generate」を実行

DESIGN.md の全文を貼り付ける

DESIGN.md は 9 セクション全体で一つのデザインシステムを構成しています。セクションを省略すると、Stitch が不足部分を独自に補完してしまい、意図しないデザインになる可能性があります。

ステップ 3: デザインカンプの生成

Stitch が DESIGN.md に基づいてデザインカンプを生成します。生成結果は以下の観点で確認してください:

確認項目	チェック内容
カラーパレット	DESIGN.md Section 2 の色が正しく使われているか
タイポグラフィ	フォントファミリー・サイズ階層が合っているか
コンポーネント	ボタンやカードの角丸・シャドウが仕様通りか
レイアウト	スペーシングスケールが守られているか
全体の雰囲気	Section 1 の Visual Theme に合致しているか

ステップ 4: フィードバック・反復

生成結果に対して、具体的なフィードバックを送って改善します（詳しくは後述の「スタイル微調整」を参照）。

---

Stitch への効果的なプロンプト例

基本プロンプト

もっともシンプルな使い方です。DESIGN.md を添えて画面を指定します。

以下の DESIGN.md に従って、ダッシュボード画面のデザインを生成してください。

[DESIGN.md の全文をここに貼り付け]

---

画面要件:
- ヘッダーにロゴとナビゲーション
- 左サイドバーにメニュー
- メインエリアに統計カードとグラフ
- 直近のアクティビティリスト

画面指定: 特定の画面やコンポーネントを指定

複数画面を一度に生成する場合や、特定のコンポーネントに焦点を当てる場合のプロンプト例です。

ページ全体

DESIGN.md に従って、以下のデッキ一覧画面を生成してください。

画面構成:
- ヘッダー: ロゴ、検索バー、ユーザーアバター
- フィルターバー: フォーマット選択、色フィルター、ソート
- グリッドレイアウト: デッキカード（4列）
  - 各カードにはデッキ名、フォーマット、色構成、勝率、最終更新日を表示
- フローティングアクション: 新規デッキ作成ボタン

コンポーネント単体

DESIGN.md の Section 4 (Component Stylings) に従って、
以下のコンポーネントのデザインバリエーションを生成してください。

コンポーネント: カード検索モーダル
- 検索入力フィールド（オートコンプリート付き）
- フィルターチップ（色、タイプ、レアリティ、コスト）
- 検索結果リスト（カード画像サムネイル + テキスト情報）
- ページネーション

モバイル版

DESIGN.md の Section 8 (Responsive Behavior) に従って、
デッキ詳細画面のモバイルレイアウトを生成してください。

Collapsing Strategy:
- サイドバーのデッキ情報はアコーディオンに折り畳み
- カードリストは縦1列レイアウト
- フローティングアクションバーをボトムに配置
- タッチターゲット 44px 以上を確保

スタイル微調整: デザインカンプへのフィードバック

生成されたデザインカンプを修正する際のプロンプト例です。

以下の点を修正してください:

1. カードの角丸が大きすぎます。DESIGN.md の Border Radius Scale で
   lg (12px) を使ってください。

2. ヘッダーの背景色が bg-secondary になっていますが、
   bg-primary (#0F0F0F) に変更してください。

3. ボタンのホバー状態が未実装です。Section 4 の Primary Button の
   hover 定義（brand-hover #6D28D9, scale 1.02）を反映してください。

4. テキストの階層が不明確です。ページタイトルは h1 (2.5rem, 700)、
   セクション見出しは h2 (2rem, 600) で明確に差をつけてください。

フィードバックのコツ

• DESIGN.md のセクション番号やトークン名を具体的に引用する
• 「もう少し大きく」ではなく「24px から 32px に変更」のように数値で指定する
• 修正箇所ごとに番号をつけて構造化する

---

デザインカンプ → 実装コードへの変換

Stitch で生成したデザインカンプを、AI コーディングエージェントを使って実装コードに変換する手順です。

変換ワークフロー

Stitch デザインカンプ
    ↓ (スクリーンショット or 画面説明)
AI エージェント (Claude / Cursor)
    ↓ (DESIGN.md + デザインカンプの情報)
Next.js + Tailwind CSS コード

AI エージェントへの指示方法

方法 1: DESIGN.md + 画面説明で実装

プロジェクトの DESIGN.md に従って、以下のダッシュボード画面を
Next.js (App Router) + Tailwind CSS + shadcn/ui で実装してください。

画面構成:
- ヘッダー: 固定、bg-primary、高さ 64px
- サイドバー: 幅 280px、bg-secondary、折り畳み可能
- メインエリア:
  - 統計カード 4枚（横並び、gap-lg）
  - グラフエリア（カード内に配置）
  - アクティビティリスト（テーブル形式）

注意事項:
- DESIGN.md のカラートークンを Tailwind の設定に反映する
- Section 4 のコンポーネント仕様に厳密に従う
- Section 5 のスペーシングスケール (4px ベース) を使用する
- Section 8 のレスポンシブ仕様でモバイル対応する

方法 2: Stitch のスクリーンショット + DESIGN.md で実装

添付のデザインカンプ（Stitch生成）を Next.js + Tailwind CSS で
実装してください。

実装規約:
- カラー値は DESIGN.md Section 2 のセマンティックトークンを使用
- コンポーネントは shadcn/ui をベースにカスタマイズ
- レスポンシブは DESIGN.md Section 8 の Collapsing Strategy に従う
- アニメーションは duration 300ms 以内 (Section 7 の制約)

DESIGN.md:
[DESIGN.md の内容をここに貼り付け]

Tailwind CSS への変換例

DESIGN.md のトークンを Tailwind の設定に反映する例です。

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  theme: {
    extend: {
      colors: {
        // Background Surfaces
        bg: {
          primary: '#0F0F0F',
          secondary: '#1A1A2E',
          tertiary: '#16213E',
          elevated: '#1E293B',
        },
        // Text & Content
        text: {
          primary: '#F8FAFC',
          secondary: '#94A3B8',
          muted: '#64748B',
        },
        // Brand & Accent
        brand: {
          primary: '#7C3AED',
          hover: '#6D28D9',
          subtle: '#7C3AED1A',
        },
        // Semantic
        success: '#10B981',
        warning: '#F59E0B',
        error: '#EF4444',
        info: '#0EA5E9',
      },
      spacing: {
        // 4px base scale
        'xs': '4px',
        'sm': '8px',
        'md': '16px',
        'lg': '24px',
        'xl': '32px',
        '2xl': '48px',
        '3xl': '64px',
      },
      borderRadius: {
        'sm': '4px',
        'md': '8px',
        'lg': '12px',
        'xl': '16px',
      },
      boxShadow: {
        'elevation-low': '0 1px 3px rgba(0,0,0,0.3)',
        'elevation-mid': '0 4px 12px rgba(0,0,0,0.4)',
        'elevation-high': '0 8px 24px rgba(0,0,0,0.5)',
        'elevation-dialog': '0 16px 48px rgba(0,0,0,0.6)',
      },
    },
  },
}

export default config

---

Tips & ベストプラクティス

DESIGN.md の品質が出力品質を決める

入力の質 = 出力の質

Stitch は DESIGN.md の記述に忠実にデザインを生成します。曖昧な記述は曖昧なデザインにつながります。特に以下のセクションは詳細に記述してください:

• Section 2 (Color Palette) -- HEX 値とセマンティックロールの両方を必ず記述
• Section 4 (Component Stylings) -- 状態別の定義を省略しない
• Section 7 (Do's and Don'ts) -- プロジェクト固有の制約を具体的に

画面単位で反復する

一度にすべての画面を生成するのではなく、画面単位で生成・フィードバック・改善のサイクルを回すことを推奨します。

1画面目: ダッシュボード → フィードバック → 確定
2画面目: デッキ一覧 → フィードバック → 確定
3画面目: デッキ詳細 → フィードバック → 確定
...

Stitch と AI コーディングエージェントの使い分け

作業	推奨ツール	理由
デザインの方向性検討	Stitch	視覚的に素早く比較検討できる
ページ全体のレイアウト	Stitch	全体のバランスを視覚的に確認
コンポーネント実装	AI エージェント	コードで直接実装した方が速い
レスポンシブ対応	AI エージェント	ブレークポイント実装はコードで
デザインの微調整	Stitch → AI エージェント	大きな変更は Stitch、細かい調整はコード

DESIGN.md のバージョン管理

DESIGN.md はプロジェクトの Git リポジトリで管理することを推奨します。

# プロジェクトルートに配置
your-project/
├── DESIGN.md          # デザインシステム文書
├── CLAUDE.md          # AI エージェント設定
├── src/
│   └── ...
└── ...

なぜ Git 管理するのか

• デザインの変更履歴を追跡できる
• AI エージェントが自動的に DESIGN.md を参照する（CLAUDE.md と同様）
• チームメンバー間でデザインの一貫性を維持できる
• Stitch に投入する最新版が常にリポジトリにある

よくある問題と対処法

問題	原因	対処法
色が DESIGN.md と違う	セマンティックトークンではなく色名で指示	HEX 値を明示的に指定してフィードバック
コンポーネントの角丸が不統一	Border Radius Scale が未定義	Section 5 に明確なスケールを追加
レスポンシブが崩れる	Collapsing Strategy が不足	Section 8 に画面別の振る舞いを追記
生成のたびにデザインが変わる	Visual Theme の記述が曖昧	Section 1 に具体的な比喩・参照を追加