Google Stitch 2.0は、数秒で本番品質のUIを生成できます。
しかし、単一のコンポーネントをきめ細かく調整しようとした瞬間に、システムが崩れ始めます。
本記事は、実際のプロダクトのフローを構築しながらStitchをハンズオンで評価し、実運用でどこが優れていてどこで失敗するのかに焦点を当てます。
TL;DR
- UI生成の品質が非常に高い（シニアレベルに近い出力）
- Gemini 3 Flashによる反復速度が非常に速い
- DESIGN.mdが出力間の一貫性を向上させる
- コンポーネント単位の編集は信頼できない
- フィードバックなしでエージェントが応答しなくなることがある
結論：生成には強いが、制御された改善には弱い
デモ動画
背景
この評価は、AIによる農業アプリケーションのための実際のプロダクトフローを構築しながら行いました。
ワークフローには以下が含まれていました：
- プロンプト → UI生成
- 複数画面のナビゲーション
- 「Edit with AI」によるコンポーネント単位の編集
- エクスポートのパイプラインテスト
うまくいく点
高品質なUI生成
Gemini 3.1 Pro（「Thinking」モード）を使用すると、Stitchは次のようなレイアウトを生成します：
- 強い視覚的階層
- クリーンな余白と整列
- 一貫したコンポーネントの構造化
出力は、多くの場合、最初の反復としてシニア〜ミッドシニアのデザイナーが作るような内容に近いです。
速い反復ループ
Gemini 3 Flashを使うと：
- 複数のUIバリエーションが数秒で生成される
- 探索コストが大幅に削減される
これにより、初期段階のデザインサイクルを1つのインタラクションループに圧縮できます。
指示からデザインへの翻訳が正確
以前のバージョンと比べて：
- プロンプトの解釈がより一貫している
- レイアウトの意図が保持される
- コンポーネントのグルーピングが概ね正しい
DESIGN.mdが一貫性を向上させる
以下のようなデザインルールを定義すると：
- 色
- タイポグラフィ
- コンポーネントの制約
反復を重ねてもより一貫した出力が得られます。
エクスポート層が適切に構造化されている
利用可能な出力には以下が含まれます：
- AI Studio
- Figma
- コードエクスポート
これにより、デザインと実装の間に明確なブリッジが作られます。
どこで壊れるか
ケーススタディ：Scanボタンコンポーネント
浮かせた「Scan Crop」ボタンを微調整している最中に、以下の挙動が観測されました。
意図した挙動
- デフォルト状態：円形アイコンボタン
- 最初の操作："Scan"ラベル付きのピルへ展開
- 2回目の操作：スキャンアクションを実行
ステップ1：Edit with AI
結果：
- ボタンが円形の形に畳まれた（想定通り）
- スキャンのアイコンが削除された（想定外）
この結果、視覚的に曖昧で、明確な操作感（affordance）のないコントロールになりました。
ステップ2：的を絞った修正
指示：
"他のすべてのプロパティは変更せずに、スキャンアイコンを追加して"
結果：
- 目に見える更新がない
- フィードバックがない
- エラーのシグナルがない
ステップ3：繰り返しの試行
- 同じ指示を複数回発行した
- 変化は観測されない
結果
- 編集パイプラインが応答しなくなった
- コンポーネントをこれ以上改善できなかった
- 編集フローを諦める必要があった
分析
この挙動は、単なる生成ミスというよりシステム全体の制限を示しています。
弱いコンポーネント単位の編集
システムは、次のようなスコープ付きの修正が苦手です：
- 構造を保持しながら、1つの属性だけを変更する
決定論的な制御の欠如
編集は：
- 信頼できない
- 正確に適用されない
エージェント状態の不整合
システムは次のことができないようです：
- 過去の編集コンテキストを維持する
- 段階的な変更を適用する
サイレントフェイル（無音の失敗）
以下がありません：
- エラーフィードバック
- リトライ機構
- 復旧のためのガイダンス
システムは単に応答を止めます。
なぜ重要か
これは実用上の使いやすさに直結します：
- 反復的な改善に対する信頼が下がる
- 制御された編集ではなく再生成を強いられる
- 後工程のプロトタイピングが遅くなる
Stitchは生成には強いものの、改善（リファイン）では信頼性がありません。
欠けている機能
本番レベルのワークフローには、次のようなものが必要です：
決定論的な編集モード
スコープ付きで予測可能な変更を適用すること。
コンポーネントのロック
特定の属性を編集している間も構造を保持すること。
フィードバックシステム
編集が失敗したときに明確なシグナルを出すこと。
ビジュアル・ディフ
変更前と変更後を表示すること。
リトライ機構
失敗した編集を自動的に処理すること。
戦略的観察
Stitch 2.0は、生成の問題をほぼ解決しています。
残っている課題は「制御」です。
最終評価
強み：
- 高品質なUI生成
- 高速な反復
- AIネイティブなデザインワークフローへの強い方向性
制約：
- 編集が脆い
- 決定論的な制御が欠如している
- エージェントの信頼性に問題がある
結論
Stitchは、すでに非常に高能力なプロトタイピングシステムです。
しかし、コンポーネント単位の編集が信頼できるようになるまでは、本番用途のための従来のデザインワークフローを置き換えることはできません。
現時点では：
- 素早い生成のために使う
- 精密な改善のために頼りすぎない
