Google Stitch（DESIGN.md）

Google Stitch は Google Labs が提供する無料の AI デザインツールで、自然なプロンプトやラフなスケッチを、動作するモバイル／Web の UI 画面に変えてくれます。画像を返すだけではなく、実際のマルチ画面デザインを構築し、何より重要なのは DESIGN.md ファイルを生成する点です。これは Gemini が作り出す平文テキストのデザインシステム文書で、どんなコーディングエージェントも読めます。コミュニティが最も注目しているのがこの部分です。プロジェクトのルートに置けば、Claude Code や Cursor、Gemini CLI が、配色・字間・余白・コンポーネントのルールに沿った UI を出し続け、プロンプトごとにブレなくなります。

主な機能

• テキスト／画像から UI 生成：「分析ダッシュボード」と説明したり、ワイヤーをアップロードすると、画面・コンポーネント・状態を数分で生成します。
• DESIGN.md エクスポート：色、フォント、余白、コンポーネントルールをまとめた Markdown 仕様で、人もエージェントも読めて編集できます。
• ビジュアルデザインシステム：任意の URL からデザインシステムを抽出、またはデザイントークンを取り込み、全画面をブランドに統一。
• マルチ画面キャンバス：コンポーネントの状態を追跡し、画面同士のつながりを把握し、フロー全体を一つのビューから作り直せます。
• インタラクティブプロトタイプ：静的画面をクリック可能なプロトタイプに変え、ユーザージャーニーを即座に体感できます。
• MCP と Agent Skills：エージェントのワークフローに組み込み、より大きなビルドパイプラインの一ステップにできます。

使用シナリオ

このツールを使用すべき人は？

• 創業者・個人ビルダー：デザイナーを雇う前に、午後一発で信頼できる UI を作りたい人。
• フロントエンド開発者：ランダムな AI モックではなく、一貫性のある画面の起点が欲しい人。
• コーディングエージェントを運用するチーム：毎回 Claude Code や Cursor のプロンプトで色や余白を説明し直すのに疲れた人。
• デザイナー：複数案を素早く試作し、仕様をエージェントに渡して実装させたい人。

解決する問題

1. AI の UI ブレ：共通仕様がないと、エージェントはプロンプト間でデザインを忘れます。DESIGN.md が永続的な参照を提供します。
2. 高精細モックのコスト：手作業のモックは日単位。Stitch なら一回のセッションに圧縮できます。
3. アイデアからフローへ：1 プロンプトだけでは全体の旅を伝えられません。キャンバスが画面状態とナビゲーションを分かりやすく保ちます。

料金プラン

優位性と独自の価値提案

1. エージェントネイティブな設計仕様：DESIGN.md は移植可能な平文 Markdown で、Claude Code、Cursor、Copilot、Gemini CLI でプラグインなしに使えます。
2. 無料で第一社製：Google Labs が Gemini 上で構築・運用。基本利用に追加クレジット不要。
3. プロトタイプで終わらない：コードと、エージェントに実装させる仕様を両方出力します。

際立つポイント：DESIGN.md は「UI はどうあるべきか」の事実上の標準を、AGENTS.md が「コードはどう書くか」の標準であるのと同じ形で確立しました。

はじめに

クイックスタートガイド

1. Stitch を開く：Google アカウントで stitch.withgoogle.com へ。
2. 説明またはアップロード：「分析ダッシュボード」のようなプロンプト、またはスケッチ・参照画像を投入。
3. キャンバスで反復：画面・状態・フローを磨き上げます。
4. DESIGN.md をエクスポート：設計仕様をダウンロードし、プロジェクトのルートに配置。
5. エージェントに読ませる：AGENTS.md や CLAUDE.md に「UI タスクの前に DESIGN.md を読む」旨を追記。

統合

以下と自然に連携します：

• DESIGN.md ファイル経由で Claude Code と Cursor
• Gemini CLI と GitHub Copilot Workspace
• Markdown ファイルをコンテキストに取り込める任意のエージェント

よくある質問

Google Stitch は無料ですか？

はい。Stitch は Google Labs 経由で提供され、Google アカウントで使えます。実験モードには独自の上限があり、Google が提供状況を変える可能性もあります。

DESIGN.md は Claude Code 以外でも使えますか？

使えます。平文 Markdown のため、ファイルコンテキストを読み込めるコーディングエージェントなら、Cursor、Aider、Copilot Workspace、カスタムエージェントなどで利用可能です。

Figma の代わりになりますか？

複雑で深くリサーチされたフローにはなりません。高精細モックの手作業は不要になりますが、行動心理学やエッジケースを扱うシニアデザイナーの価値は残ります。

代替案

Google Stitch が適さない場合、以下を検討してください：

• Galileo AI（現 Google）：この系統の初期テキスト→UI ジェネレーター。
• v0 by Vercel：React／Next.js 生態系に深く入っている場合に好適。
• Lovable / Bolt：仕様だけではなくアプリ含めて生成したい場合に有力。

ヒントとベストプラクティス

1. プロンプトでファイル名を指定：「Using DESIGN.md, build a secondary button variant」のように、曖昧な UI 依頼より効果的です。
2. 仕様は凝縮：DESIGN.md に不要な情報を詰めず、主要なトークンとルールを渡します。
3. 出力を監査：構築後に配色や余白のブレを確認し、仕様を唯一の情報源に保ちます。

まとめ

Google Stitch は画面とともに DESIGN.md 仕様を届けることで、プロンプト駆動の UI 生成を再現可能でブランド一貫のワークフローに変えます。個人ビルダーやエージェント中心のチームには、洗練された UI に素早く到達し、コードが育つにつれ一貫性を保つ近道です。