Google Stitch & Hatter Agent
エージェント型デザインの時代
UIジェネレーターから「エージェント型・推論エンジン」へ。Deep Design、ネイティブMCP統合、Vibecoding—デザインとコードの境界が消える
Stitchの進化：生成から反復、そして推論へ
Google Stitchは単なるUI画像ジェネレーターから、包括的なdesign-to-code推論エンジンへと根本的な進化を遂げています。Phase 3の「Hatter Agent」は自律的にデザインを決定し多段階で最適化する次世代エージェントです。
Galileo AI / Early Stitch
Text Prompt → Single Screen
単純な画像生成
Gemini 2.5 Flash/Pro
Fast Iteration & Figma Export
速度とフィデリティへの注力
Hatter Agent (Gemini 3)
Agentic Design & Deep Design
システム全体の自律的な設計と構造化
Hatter Agent：「描く」から「考える」へ
従来のAIは「表面的な模倣」に過ぎず、見た目は良いがUXロジックやアクセシビリティが欠如していました。Hatterはシニアデザイナーのように意図（Intent）を理解し、自律的に微調整（Self-Correction）を行います。
Standard AI Output
表面的な模倣。見た目は良いが、UXロジックやアクセシビリティが欠如。レイアウトはパターンマッチングによる複製。
Hatter Agent Output
「Deep Design」に基づく自律的な推論で、プロ級のデザインを最初から出力。
Hatterプロンプトの解剖：Context / Constraints / Instruction
Hatterへの入力は3層構造です。Zoom-Outでアプリ全体のコンテキストを与え、Hard Constraintsでアクセシビリティや画面サイズを制約し、Agent Autonomyで「何を自律決定に委ねるか」を明示します。
ネイティブMCP統合：コピペの終わり
Stitch内にクラウド上のMCPサーバーが統合されました。デザインは静的なファイルではなく、コーディングエージェントがAPI経由で常に参照可能な「生きた仕様書」となります。Cursor、Claude Code、Gemini CLIなどの開発ツールへ直接エクスポートが可能です。
Google Stitch Cloud
Project Assets
MCP Server
stitch.googleapis.com/mcp
Local IDE / Coding Agent
Cursor / Claude Code / Gemini CLI
$ list_projects()
$ get_screen_code(id='screen_1')
Vibecoding：雰囲気がそのまま実装仕様になる
「Vibe（雰囲気・意図）」がそのままバックエンドの実装仕様になる新しい開発パラダイム。Stitchで生成したデザインがMCP経由で機能仕様として機能し、コーディングAIがデザインコンテキストを読み取り実装します。
ビジュアルとフローを生成
Stitchでデザインの「Vibe」を表現。テキストや画像からUIを自動生成
MCPサーバーとしてマウント
デザイン = Functional Spec。MCP接続でIDE側からアクセス可能に
コーディングAIが読み取り実装
Cursor / Claude CodeがデザインコンテキストをMCP経由で取得し、バックエンドまで自律実装
Sandwich Method：ハイブリッドワークフロー
Stitchの弱点（特に日本語タイポグラフィの処理）を補うため、全エージェントからFigmaへ「編集可能レイヤー」としてエクスポートする機能が強化。Stitchで爆速生成し、Figmaで人間が最終的な微調整を行う「品質重視ルート」が現在のベストプラクティスです。
Stitch / Hatter
AIがベースデザインとコードを爆速生成。Deep Designで構造化
Figma Polish
人間が日本語タイポグラフィ、ブランドカラー、微調整を担当
Production Code
最終的なコード品質の確認とデプロイ
App Store向けアセットのワンクリック自動生成
作成したUIデザインから、Apple App StoreやGoogle Playに提出するためのスクリーンショット一式、説明文（コピー）、アプリアイコンをワンクリックで自動生成。インディー開発者やスタートアップの市場投入（GTM）を劇的に加速させます。
Generated Icon
Square & Rounded versions。App Store/Play Store両対応のアイコンを自動生成
Marketing Screenshots
デバイスフレーム内のスクリーンショット一式を自動レイアウト
Marketing Copy
Title & Descriptionのテキストブロックを自動生成。ASO最適化にも対応
競合比較：Code-First × 学習コストゼロの優位性
Stitchの優位性は「Code-First」かつ「学習コストゼロ」。Figmaがコラボレーションツールであるのに対し、Stitchは「動くアプリ」を即座に求める層に特化しています。
| Feature | Google Stitch | Figma AI | V0 (Vercel) | UX Pilot |
|---|---|---|---|---|
| Output | Code-First | Design-First | Code-First | Design-First |
| Learning Curve | Zero | Steep | Low | Medium |
| Agentic Design | Hatter | — | — | — |
| MCP Integration | Native | — | Partial | — |
| Figma Export | Editable Layers | Native | — | Limited |
制約事項と注意点
Japanese Typography
日本語フォント（Noto Sans JP）の自動適用はまだ弱い。CSS/Tailwindでの手動オーバーライドが必要です。Figmaでの仕上げが推奨されます。
Dynamic Quotas
クォータは毎日GMT 0:00にリセットされる。Hatterのような高推論エージェントはクレジット消費が激しいため、利用計画が必要です。
Security Tokens
エンタープライズ利用では、APIキーではなくOAuth（短命トークン）による管理が推奨されます。
将来展望：Gemini 4 & Agentic Search
Context Window Expansion
単一画面から、アプリ全体のフローや50画面以上のシステムを一括生成
AI Mode SEO
検索エンジンではなく、AIエージェントに最適化されたUI/コード構造へ
Component Libraries
プロトタイプ品質から、本番運用に耐えうるコンポーネントライブラリ生成へ
戦略的要点：3ステップの推奨ワークフロー
Hatter for Logic
まずはHatterで構造とロジックを固める
MCP for Code
MCPをIDEに接続し「Vibecoding」フローを確立する
Figma for Polish
最終的な品質と日本語調整はFigmaで仕上げる
デザインとコードの境界が消える
エージェント型デザインの時代
Google Stitchは「Hatter Agent」「ネイティブMCP」「Figmaハイブリッド」の3本柱で、UIジェネレーターから推論エンジンへの質的転換を遂げました。
