Google は、Stitch（AI デザインからコードへのツール）に対する重要な 2.0 アップデートをリリースしました。最大の新機能は デザインシステムのインポート です — 現在、任意のライブウェブサイト（Stripe、Apple、またはデザインが整ったサイトのいずれか）を Stitch に指すことができ、色、タイポグラフィ、境界線、影、スペーシングを自動的に抽出して、再利用可能なデザインシステムへと変換します。
そのデザインシステムを Stitch 内で生成した任意の UI に適用すると、HTML と Tailwind CSS を使用して 実際の、インタラクティブで本番運用に耐えるコード を生成します。
全編ウォークスルーを見る
ステップごとの内訳
1. テキストプロンプトからダッシュボードを生成
Stitch で空白のキャンバスから始め、望む内容を説明するシンプルなテキストプロンプトを入力します。たとえば、サイドバーとチャートを備え、収益、アクティブユーザー、チャーン率を追跡するモダンな SaaS アナリティクスダッシュボードなどです。Stitch は Gemini 3.1 Pro モデルを使用して、全体のレイアウトをネイティブにコードとして生成します。
2. 任意のウェブサイトからデザインシステムをインポート
生成されたダッシュボードは初期状態としては適度に見えますが、プレミアムなシリコンバレー風の見た目を得るには、実際のウェブサイトからデザインシステムをインポートできます。この例では、stripe.com を使用します。ウェブ上で最もクリーンなデザインシステムのひとつとして広く評価されています。
デザインシステムパネルで、ウェブサイトからインポート をクリックし、URL を貼り付けると、Stitch がライブサイトをクロールして、正確な HEX 色、コーナー半径、パディング値、タイポグラフィ、そして視覚的階層をカスタムデザインシステムへ抽出します。
3. AI チャットで適用と修正
インポートしたデザインシステムを適用すると、AI ツールは常に完璧には動作しません。このケースでは、Stitch はライトモードの Stripe カードと元のプロンプトのダークモード背景を混在させてしまいました。しかし、Stitch は AI エージェントとして動作するため、修正すべき点を自然言語で伝えるだけで、レイアウト全体を正しく再計算します。
4. デザインルールブックを確認する
内部的には、Stitch はインポート元のウェブサイトを基にマスターデザインルールブックを生成します。この文書には正確な HEX 色、コーナー半径、パディング、視覚的階層が定義されています。デザイナーは、この仕様書を直接開発者に渡すことができます。
5. ライブのインタラクティブなプロトタイプを作成
Stitch は静的モックアップを作成するだけではありません。ライブのインタラクティブなウェブアプリを起動し、タブをクリックしたり、UI と対話したり、アプリケーションの流れを体感したりできます。すべて実際のフロントエンドコード上で動作します。
6. バックエンド統合のため Google AI Studio へエクスポート
開発者向けには、生成された HTML と Tailwind CSS は完全に本番運用に耐えます。ブラウザで生のコードを表示することも、プロジェクト全体を直接 Google AI Studio にエクスポートしてバックエンドを接続し、データベースを組み込み、フロントエンドを完全に機能する製品へと変えることもできます。
要点
- Stitch 2.0 は、任意のライブウェブサイト URL からデザインシステムをインポートできます
- 色、タイポグラフィ、間隔、視覚的階層を自動的に抽出します
- 生成されるコードは HTML + Tailwind CSS を使用しており、本番運用に耐えます
- インタラクティブなプロトタイプでバックエンドを構築する前に UI をテストできます
- バックエンド統合のため Google AI Studio への直接エクスポート
- Stitch は現在ベータ期間中は無料です
動画の章
- 0:00 — はじめに: Google Stitch 2.0 とは？
- 0:29 — テキストプロンプトから SaaS ダッシュボードを生成
- 0:50 — 最初の結果: ダークモードのダッシュボード
- 1:01 — ライブURLから Stripe のデザインシステムをインポート
- 1:38 — デザインシステムの適用（及び不具合）
- 2:00 — AI チャットでダーク/ライトモードの混在を修正
- 2:20 — 最終結果: ピクセル単位で完璧な Stripe テーマのダッシュボード
- 2:34 — 内部でデザインルールブックがどのように機能するか
- 2:58 — ライブのインタラクティブプロトタイプを作成
- 3:13 — 本番運用に耐える HTML + Tailwind CSS の表示
- 3:24 — バックエンド統合のため Google AI Studio へのエクスポート
- 3:41 — AI はデザイナーを置き換えるのか？
