Google Stitch
Google が提供する AIネイティブな UI デザインキャンバス。テキスト・音声のプロンプトだけで、無限キャンバス上に UI デザインを生成できる。ブラウザのみで動作し、Google アカウントさえあれば誰でも利用できる（インストール不要・クレジットカード登録不要）。
3つの特徴
1. AIネイティブなデザインキャンバス
テキストや音声で指示するだけで、無限キャンバス上に UI デザインが生成される。ゼロから画面を作る必要がなく、意図を言語化するだけで複数案が出る。
2. デザインエージェント
- 複数の案を並行で出す
- 既存サイト・アプリのスクリーンショットからデザインを読み取り再設計（Redesign モード）
- AIが設計作業を代行
3. DESIGN.md
デザインのルールをマークダウンファイルとして書き出す機能。Google は DESIGN.md を「agent-friendly markdown file」と定義している。他のデザインツールやコーディングエージェントにルールをそのまま渡せるため、ルールの使い回しが可能。
モデル選択
| モデル名 | 特徴 |
|---|---|
| 3 Flash | Gemini 3.0 Flash。高速。コーディングエージェントへのエクスポート向き |
| Thinking with 3.1 Pro | Gemini 3.1 Pro。速度より品質・推論を優先。初回ハンズオンに推奨 |
| Redesign | 既存アプリ・サイトのスクリーンショットから再設計する |
| Ideate | アイデア出し用 |
Vibe Design
Google が Stitch と共に提唱するデザイン哲学。最初から UI パーツを細かく指示するのではなく、「何を達成したいか」「ユーザーに何を感じてほしいか」という意図・感情から設計をスタートする。最初のプロンプトに方向性を置くことで後続の修正がぶれにくくなる。
詳細: Vibe Design
推奨ワークフロー（非デザイナー向け）
Step 1: 方針を言語化する（画面より先に）
誰に見せるか:
何を伝えたいか:
どう感じてほしいか:
避けたい印象:
Step 2: ラフ案の生成と修正
- プロンプトで初期案を出す
- 方向性の修正は1回につき1〜2点に絞る
- 色・トーン → ファーストビュー → コンポーネントの順に調整
Step 3: デザインシステムと DESIGN.md の生成
デザインシステム生成を指示すると、以下の2つが同時に作成される：
- ビジュアルボード — カラーパレット・タイポグラフィ・ボタンバリエーション・ナビゲーション・アイコンが一覧で並ぶキャンバス
- DESIGN.md — 右パネルに表示されるマークダウン形式のデザインルールファイル
ビジュアルボードを先に確認してから DESIGN.md のテキストを読む順番が推奨。
Step 4: DESIGN.md をページに適用
ラフ案ページを選択した状態でデザインシステム適用を指示する。新しくページを生成すると画像も差し替わるため、元のページにシステムを適用する方が判断しやすい。
確認観点（5点）:
- 見出しの強弱が揃っているか
- 余白の使い方が一貫しているか
- ボタン・カードの見た目がばらついていないか
- 実績一覧が見やすいか
- 問い合わせ導線が浮いていないか
Step 5: プロトタイプ確認
「Play」ボタンでプレビューモードに切り替え、以下の3点を確認する：
- 最初の3秒で何をしている人か分かるか
- 実績まで迷わず届くか
- 問い合わせまで遠すぎないか
Claude Code との MCP 連携
MCP（Model Context Protocol）を使うと、Claude Code から Stitch のプロジェクトに直接アクセスできる。コードのコピペや DESIGN.md の手動保存が不要になる。
設定手順
- Stitch のキャンバス右側エクスポートアイコン → Format「MCP」を選択
- 「MCP を設定」→ クライアント「Claude Code」を選択 → API キーを発行・コピー
- Claude Code 側に MCP を設定
Stitch のプロジェクト一覧を見せてくださいで接続確認
連携後の操作例
Stitch の更新日が最新のプロジェクトから[ページ名指定]のコードを取得して、
index.html と styles.css としてローカルに保存してください。
デザインシステムの情報も Stitch から取得して確認してください。
Stitch と Claude Code の役割分担
Stitch で方向を決める
↓
DESIGN.md でルール化する
↓
Claude Code で細部を揃える
| 役割 | 担当ツール |
|---|---|
| 複数案の比較・方向性の決定 | Stitch |
| デザインルールの言語化・持ち運び | DESIGN.md |
| DESIGN.md を守りながらの微修正 | Claude Code |
非デザイナーでも「Stitch（大枠） → DESIGN.md（言語化） → Claude Code（細部）」の順で進めれば、デザインが破綻しにくい。