Google Labsは2026年3月18日、バイブデザインを支援するStitchの大幅アップデートを発表し、提供を開始した。

• Introducing “⁠vibe design⁠”⁠ with Stitch - Gooogle Blog

最近のアップデートの概要

Stitchではワイヤーフレームから作り始めるのではなく、達成したいビジネス目標やユーザーに感じてほしいこと、現在のインスピレーションから始めるバイブデザイン（vibe design）をもとに、AIを活用してデザインを構築する。

今回の発表前の3月5日にはGemini 3.1 ProがStitchで利用できるようになり、推論性能や品質、細部への注意がより強く求められる場面でのデザインエージェントの能力が向上した。これにより、大規模なデザインシステムや厳格なデザインルールを扱う作業にも向くようになっている。また、複雑なダッシュボードや情報量の多いデータテーブル、多段階のフォームの生成に加え、ブランドガイドラインに沿ったより精密なCSSの生成にもより適したものになっている。

2月26日には、キャンバス画面上に生成したデザイン上のテキストを直接編集できるようになっている。

今回のアップデートの詳細

今回のアップデートでは、以下の新機能を導入した。

AIネイティブキャンバスとエージェントマネージャー

Stitchのキャンバス画面が再設計され、画像やコード、テキスト、PRD（製品要件定義書）などを配置できるノードベースの無限キャンバスが導入された。これらをこのキャンバスに持ち込み、プロジェクト全体をエージェントで進める際の推論コンテキストとして利用できる。

新機能のエージェントマネージャーを使うことで進行状況を追跡し、作業タスクをクリックするだけで関連画面へ移動できるようになった。これにより、整理された状態を保ちながら複数のアイデアを並行して検討できるようになった。

さらに、Stitchはダークモードが基本だが、背景を明くしたライトモードも選択できるようになった。

よりスマートなデザインエージェント

デザインエージェントも更新され、キャンバス全体のコンテキストを理解できるようになった。「⁠アップロードしたばかりの画像でロゴ（またはプロフィール画像）を差し替える」「⁠これらの画面からプロダクトブリーフを作成し、キャンバスに配置する」「⁠ブランドの新しいランディングページをデザインするために、わたしにインタビューする」といった具体的な指示が可能になっている。また、「⁠これらの画面のモバイル版を作成する」といった指示で、モバイルとデスクトップの画面をキャンバス上に配置できるようになった。

音声で操作するライブモード

キャンバスに直接話しかけてバイブデザインを行う音声操作機能「ライブモード」がプレビュー版として導入された。音声モード中のStitchは、ユーザーの作業内容やクリックしたものを認識できる。また、Stitchはリアルタイムでデザインの批評を返し、アイデアを整理する相手として機能する。たとえば、「⁠3つの異なるメニューオプションを出して」「⁠この画面を別のカラーパレットで見せて」といった指示を出しても、並行して処理できる。「⁠ダッシュボード画面を見せて」といった音声指示だけでキャンバスを操作することにも対応し、対話を通じてアイデアをデザインに落とし込めるようになっている。この音声操作機能は、今後数週間でさらに改善される予定。

Instant Prototypes

キャンバス画面で生成されたデザインを選択してInstant Prototypeをクリックすると、（⁠1枚の）静的なデザインをインタラクティブなアプリフローとして画面が切り替わってプレビューできるようになった。Stitchは画面の並び順を評価して接続を追加できる機能のほか、ユーザーがクリックした場所に応じて次の画面を自動生成する機能などがあり、画面遷移の流れをわかりやすく把握できるようになった。また、ログイン時とログアウト時のような画面の状態違いも確認できるという。なお、トランジションやインタラクションのデザイン機能は近日公開予定。

直接リンクやモバイル向けQRコードで共有することも可能で、フィードバックループによってアイデアの検証や画面フロー全体の磨き込みを素早く進められる。

デザインシステムとDESIGN.md

すべての新しいデザインは、まとまりのあるデザインシステムから自動的に開始されるようになり、一貫性が大幅に向上した。任意のURLからデザインシステムを抽出できるほか、人気のデザインシステムから選ぶこともできる。

さらに、エージェントが読み取り可能なマークダウンファイル「DESIGN.md」を利用することで、デザインルールのエクスポートや他ツールからのインポートに対応する。これにより、別のStitchプロジェクトへデザインを適用する際などに、毎回ゼロから作り直す手間を省くことができる。

なお、今回の発表とは別に最近リリースされたStitchのMCPサーバーやSDK、さらにエージェントスキルを使って、Stitchの機能を他のツールやワークフローから活用できることに触れられている。さらに、作成したデザインをGoogle AI StudioやAntigravityといった開発者向けツールへエクスポートする機能も備わっている。

新インターフェースの紹介

刷新されたStitchのユーザーインターフェースについて、画面キャプチャをもとに駆け足で紹介する。

トップページ

トップページのプロンプト入力欄が大きくなった。右下にはライトモードにするためのボタンが付いた。

トップページのプロンプト入力欄の基本的にはこれまでと同じ構造だが、初手でデザインシステムを選択できるようになっている。選べるものはAlexandria、Bauhaus、Glacier、Carbon、Neon Tokyo、Terra、Silk、Obsidian、Sahara、Candy。

音声操作のライブモードも付いていて、クリックすると新規プロジェクト画面に遷移し、ライブモードが始められるようになっている。

キャンバス画面

トップページのプロンプト入力欄で「Redesign」を選択し、既存の画面キャプチャを添付してプロンプトを簡単に入れて、新規プロジェクト画面に遷移したのが次の画面。インターフェースが刷新されているのがわかる。

Redesignの場合には画像状態なので、「⁠3.1 Pro」が選択されていることを確認して、画面下部のプロンプト入力欄上部に提案されたざっくりとしたプロンプトを選択すると、Gemini 3.1 Proが使われるデザインエージェントが生成したデザインが表示される。その際、デザインシステムも適当に選ばれて進むようで、デザインシステムも同時にキャンバスに表示された。

デザインシステム

Design Systemsパネルも表示されるので、詳細を詳しく見てみるとテーマとDESIGN.mdの両方が表示できるようになっているのがわかる。DESIGN.mdには詳細な文章が書かれていて、ここで編集もできるようになっている。

デザインシステムは、既存のサイトのURLを入力して抽出することもできる。Design Systemsパネルの上部にある＋ボタンから「Import from website」を選択してgihyo.jpを入力してみると、次のようなデザインシステムが抽出された。

エージェントマネージャー

プロンプトの応答ログは、左側下から選択して確認できるようになっている。それぞれの作業タスクを選択すると、画面左側にそのときのプロンプトと応答が表示されるようになった。さらに、そのとき生成した画面に遷移できるようになった。

画面編集

キャンバス画面右側のメニューから鉛筆アイコンを選択して、生成したデザイン画面を選択すると、画面の編集ができるようになっている。今回のアップデートで、画面編集メニューがキャンバス画面上部に固定表示されるようになった。

Instant Prototypes

画面を選択して、画面編集メニューの一番左の生成ボタンを押して「Instant Prototype」を選択する。

すると、この画面を起点にして、画面を自動生成したり、画面遷移を確認したりできるPrototype画面に切り替わる。

画面上部でEditに切り替えてから、画面内の要素を選択するとメニューが表示される。

ここで「Imagine next screen」を選択してみると、選択した内容に合った画面が生成される。

そして画面上部でPreviewを押して切り替えると、画面遷移の流れを確認できるようになる。遷移できる箇所には青色の破線が表示されるようだ。

Prototype画面の右側のメニューでは、モバイル／タブレットやQRコードを選択できるようにもなっている。

エクスポート

もとのキャンバス画面に戻って、キャンバス画面右上にある（または、画面選択時のメニューの一番右に詳細ボタンから）エクスポートを選択すると、Instant Prototypeも選択できるようになっていることがわかる。