【Google AI 実験室 #3】Google Stitch で「電子部品の在庫管理アプリ」の画面を作り、HTML まで持ち出す｜モードは 2 つだけ・修正は世代追加・書き出しは 608px 前提

はじめに：言葉から出てきた画面は、どこまで自分の手元に持ってこられるのか

作りたいものが決まっているのに、最初の画面が描けなくて止まる――electwork では、これが毎回起きます。手元の引き出しには NE555P も 2SC1815 も 74HC595 も入っていて、「何がいくつ、どこにあるか」を管理したいのはずっと前から分かっている。でも在庫管理アプリを作ろうとすると、一覧はカードか表か、検索は上か下か、詳細画面に何を並べるか、そこで手が止まる。欲しいのはコードではなく、叩き台の画面です。

Google Stitch は、その叩き台を言葉から出すための Google Labs の実験です。この回のゴールは単純で、「電子部品の在庫管理アプリ」というお題 1 本を、言葉 → 画面 → 修正 → HTML まで通しで運んでみて、どこまでが自分の手に残るのかを確かめることです。生成された絵がきれいかどうかではなく、その絵がローカルのブラウザで開けて、手元のプロジェクトに持ち込めるかまで行きます。

やったのは 5 つです。

1. 同じ 1 本のプロンプトで、アプリ版とウェブ版を作って並べる
2. 品質モードを変えて、同じプロンプトをもう一度投げる
3. チャットで 3 回修正する（ライトモード化 → 画面追加 → 配色変更）。3 回目で 1 回目が生き残るか
4. 書き出して、ブラウザで開く
5. その間ずっと、日次クレジットがどう減るかを数える

所要時間は約 3 時間、費用は 0 円でした。使ったのは 1 日分のクレジット 400 のうち 55 です（詳しくは 💰 費用の節）。

🧭 Stitch とは：Labs の実験が「デザインキャンバス」になるまで

立ち位置

Stitch は Google Labs に並ぶ実験の 1 つで、labs.google の一覧では「Try It Now」（今すぐ試せる）の側に置かれています。一覧での説明は「自然言語を、反復と共同作業ができる高忠実度の UI に変換する」。ロゴには今も (Beta) が付いています。

Google Labs の他の実験と違い、Stitch は Gemini アプリにも Google AI Studio にも吸収されていません。独自ドメイン（stitch.withgoogle.com）で動き、サポート窓口も Google ヘルプセンターではなく Google AI Developers Forum の Stitch カテゴリです。つまり製品ではなく実験という立て付けが、公開から 1 年以上たった今も続いています。

この 1 年半で 3 回変わっている

2026-03 の更新が一番大きく、ここで Stitch は「プロンプトを入れると画面が出てくる箱」から、キャンバスとエージェントと外部連携を持つ道具に変わりました。今触れるのはこの形です。

入口と出口

Stitch の全体像は、3 つの入口と4 つの出口で捉えると分かりやすくなります。

入口はテキスト・画像・音声の 3 つ。出口は HTML/CSS・Figma・DESIGN.md・MCP/SDK の 4 つです。この記事ではテキストの 1 入口と、HTML/CSS の 1 出口を実際に通します。

プロンプトの型は 4 要素

Stitch は「何でも書ける入力欄」に見えますが、公式ドキュメントは要素に分けて書くことを勧めています。トップページの見出しがそのまま思想で、Start with a prompt. Iterate into a design. ——最初のプロンプトは完璧でなくていい、大事なのは反復のほう、という立て付けです。

公式が繰り返し言っているコツは 3 つです。複雑なアプリほど最初は高レベルに始めて、あとから画面ごとに詳細化する。1 回のプロンプトで変えるのは 1 つか 2 つ。変更対象は「ログイン画面の主ボタン」のように名指しする。 ドキュメントは「最初のプロンプトでフォントや HEX 値まで悩まなくていい。白紙のプロンプト欄を抜け出して創作に入るのが先」と書いています。

機械向けに置かれている llms.txt では、同じ考え方が Anatomy（構造）/ Vibe（美意識）/ Content（中身） の 3 層として説明されています。人間向けの 4 要素と、エージェント向けの 3 層。同じ道具の説明が 2 つの粒度で置かれているのが、この製品の今の状態をよく表しています。

デザインモードは「エンジンの選択」——ただし画面と合っていない

Stitch は 1 つのモデルではなく、用途別のエンジンを切り替える作りになっています。ドキュメントの Design Modes が挙げているのは次の 4 つです。

ところが、実際のドロップダウンを開くと選択肢は 2 つしかありませんでした。ここが今回いちばん大きな食い違いで、詳しくは 🧰 準備の節で画面と一緒に置きます。

バリエーション：1 回で最大 5 案

Stitch には、同じ画面に対して一度に複数案を出す機能があります。ドキュメントいわく「あなたは複数案を見比べるのが得意なのに、1 案ずつしか出さないのはもったいない」。

• 一度に 1〜5 案
• Creative Range（どこまで original から離すか）を指定する。UI の説明は Refined（構造は保ったままフォント・余白・色をいじる）と Creative（レイアウトも画像もテーマも全部作り直す）の 2 段階。MCP の Enum では REFINE / EXPLORE（既定）/ REIMAGINE の 3 段階
• 変える対象も選べる。Enum は LAYOUT（配置）/ COLOR_SCHEME（配色）/ IMAGES（画像）/ TEXT_FONT（フォント）/ TEXT_CONTENT（本文）

面白いのは、チャットでの修正とバリエーションで、推奨されるプロンプトの書き方が逆なことです。チャットは「1 回に 1 つだけ」。バリエーションは「大振りしていい。テーマ変更とレイアウト変更を 1 つのプロンプトに混ぜてよい」――どうせ複数案出るのだから、というわけです。

アプリとウェブは「変換」する

Device Types が言っているのは、App と Web はサイズの違いではなく主たる設計面の違いだということです。

• App モード：縦スクロール前提、親指の届く下側にナビゲーション、積み上げ型のコンテンツ
• Web モード：横方向の広がり、上側のナビゲーション、多段グリッド

そして両者を行き来する方法として、公式は「リサイズではなく翻訳（translate）せよ」と書いています。既存のデザインを参照画像として渡し、ナビゲーション・ヒーロー・グリッド密度という 3 つの観点で「大きい画面をどう使うか」を指示する、という手順です。

外に出るための口：DESIGN.md・MCP・SDK・Agent Skills

2026-03 の更新で増えた、Stitch の外と繋がるための 4 つです。ここが、単なる画面ジェネレータと違うところです。

DESIGN.md — デザインシステムを Markdown 1 枚に

公式ドキュメントの説明が、そのまま思想です。

すべてのプロジェクトには視覚的なアイデンティティ（色・フォント・余白・コンポーネントの作法）がある。それは従来 Figma ファイルか、ブランド PDF か、デザイナーの頭の中にあった。そのどれも AI エージェントには読めない。

そこで置かれたのが DESIGN.md です。並べ方が分かりやすい。

中身は 2 層で、YAML front matter に機械可読なデザイントークン（正確な HEX 値・フォント属性・余白スケール）、Markdown 本文に人間向けの設計意図。トークンがエージェントに正確な値を渡し、散文が「なぜその値なのか」を伝える、という分担です。作り方は 3 通りあって、①エージェントに作らせる（「温かい色で角丸の、親しみやすいコーヒーショップの注文アプリ」と書くだけ）②既存のブランドから導く（URL か画像を渡すと、配色・書体・スタイルを抽出する）③手で書く。仕様は「規定ではなく土台」と明言されていて、未知のセクションや独自トークンは拒否せず受け入れる、と書かれています。

MCP サーバー — リモート MCP という珍しい形

Stitch の MCP サーバーは、ローカルで動くのではなくクラウドにあるリモート MCPです（エンドポイントは https://stitch.googleapis.com/mcp）。認証は 2 通り。

• API キー：Stitch の設定ページで発行して、X-Goog-Api-Key ヘッダに入れる。手軽
• OAuth：gcloud auth login と gcloud auth application-default login の二重ログインをして、アクセストークンを取る。トークンは通常 1 時間で切れるので、期限切れのたびに手で貼り直す必要がある

Cursor・Antigravity・VSCode・Claude Code・Gemini CLI それぞれの設定例が載っています（Gemini CLI は gemini extensions install https://github.com/gemini-cli-extensions/stitch の 1 行）。使えるツールは 14 個で、プロジェクト管理（create_project / get_project / list_projects）、画面管理（list_screens / get_screen）、生成（generate_screen_from_text / edit_screens / generate_variants）、デザインシステム（upload_design_md と create_design_system_from_design_md を含む 6 個）。各ツールに MCP の振る舞い注記（readOnlyHint / destructiveHint / idempotentHint / openWorldHint）が付いていて、読み取り専用の 5 個がちゃんと readOnly になっています。

SDK と Agent Skills

• @google/stitch-sdk（GitHub・Apache-2.0・TypeScript・Node.js 20 以上） — npm install して STITCH_API_KEY を環境変数に置くだけで、MCP の設定ファイルなしに TypeScript から叩けます。stitch.createProject() → project.generate(プロンプト) → screen.getHtml() / screen.getImage() の 3 段。variants には variantCount（1〜5）・creativeRange・aspects が引数として切られていて、「どれくらい冒険するか」と「どこを触らせるか」が API の型になっています。Vercel AI SDK と Google ADK への組み込みも用意されています
• stitch-skills（GitHub・Apache-2.0・13 スキル） — Agent Skills 標準に沿ったスキル集で、Gemini CLI・Claude Code・Cursor・Antigravity・Codex から使えます。enhance-prompt（曖昧な思いつきを、生成に耐えるプロンプトに整える）、code-to-design（React や Vue のコードを Stitch のデザインに変換）、extract-design-md（ソースコードからデザインシステムを抽出）、extract-static-html（動いている Web アプリから自己完結した静的 HTML を抜く）。既存コードから設計へ逆流させる方向が揃っているのが特徴です

提供形態と上限

ここが、この道具のいちばん歯切れの悪いところです。Stitch には、料金と上限を書いた公開ページがありません。 価格ページも、ヘルプセンターの記事も、2026-09-22 時点で見つかりませんでした。公式ドキュメント（Stitch / MCP / SDK / DESIGN.md / Agent Skills の全 5 章）にも、料金・生成回数・プランに触れたページは 1 つもありません。事前に分かったのは次の 2 つだけです。

• 無料で使える。有料プランは無い。 2025-10 に「クレジットを使い切った。有料プランはあるか」と聞いた利用者に対し、開発側は「今のところクレジットを増やす有料プランはありません」と回答しています。2026-02 に「API キーを紐づけて追加クレジットを買わせてほしい」という要望が出た際も、機能要望として受け付ける旨の返答にとどまっています
• 日次のクレジット制で、上限の実数は変わり続けている。 2025-12-02 の開発側の回答は「現在は 1 日 150 デザイン」。2026-01 には利用者が「上限が倍になってありがとう」と書き、2026-09 の利用者の投稿には 0/400 6/400 という画面表示が出てきます。どれも公式の数値ページではありません

つまり、今日の上限は画面を見るしかない。というわけで、この回はクレジットの減り方そのものを実測項目に入れました（💰 費用の節）。

🧰 準備：サインインしたら、もう使えた

拍子抜けするほど何も要りません。

初回サインイン時の同意画面は出ませんでした。 サインインするとそのままキャンバスの入口に着きます。

入力欄のプレースホルダは「どんなネイティブ モバイルアプリをデザインしますか？」。下には英語の例プロンプトが 3 つ並んでいます。日本語 UI なのに例文だけ英語のまま、というのは BETA らしいところです。

モードは 2 つだけだった

ドロップダウンを開いて、最初に「あれ」となったのがここです。

ドキュメントが挙げる 4 モードは、名前もモデルも 1 つも一致しません。Thinking with 3 Pro に相当する上位モードも、スクリーンショットを渡して作り直す Redesign も、初期画面のメニューには出てきませんでした。ドキュメントが書かれたあとにモデル構成が入れ替わって、ページだけ取り残されている――という状態に見えます。

有料プランやアップグレードへの導線は、初期画面にも設定ページにも見当たりませんでした。 2026-02 のフォーラムで開発側が「有料プランは無い」と答えていたとおりです。

クレジットは 1 日 400

設定ページの「今日の使用量」カードに、その日の残量が出ます。

上限の実数を書いた公式ページは無いので、これがこの日の 400 という数字の出どころです。フォーラムの 2025-12 の回答が「1 日 150 デザイン」だったことを考えると、9 か月で 2.7 倍。読む時点でまた変わっている可能性は高いです。

設定ページで先に見ておきたいもの

同じページに、この記事では触らなかった 2 つの口もあります。

• API キー：「キーを作成」ボタンがあり、一覧は「表示するキーがありません」。注記に「不正行為の自動検出オン — 公開されていることが判明した API キーは自動的に無効になります」
• MCP を設定：折りたたみを開くと「Model Context Protocol（MCP）を使用して、IDE または CLI を Stitch に接続します」の説明と、クライアント選択のドロップダウン（「IDE または CLI を選択」）、そして「API キーを作成」ボタン。設定ページから、そのまま MCP の設定を生成できる導線になっています

覚えておくと速くなる操作

キャンバス操作はショートカット前提で作られています。

画面を選ぶと、上部に Generate ▾ / Modify ▾ / Preview ▾ / More のメニューが出ます。右上は「エクスポート」と「共有」。既定のズームは 32% で、画面が増えるとすぐ迷子になるので Ctrl+←→ が効きます。

🔬 手を動かした記録

使ったプロンプトは 1 本だけです。アプリ版・ウェブ版・モード違いで、これをそのまま使い回します。

電子部品の在庫管理アプリ。自宅の電子工作用パーツを管理する。
画面は4つ:
1) 在庫一覧（カード表示・型番・カテゴリ・残数・保管場所）
2) 部品の詳細（型番・メーカー・パッケージ・残数・保管場所・データシートへのリンク・メモ）
3) 型番検索（部分一致・カテゴリとパッケージで絞り込み）
4) 入出庫の記録（数量の増減・日付・理由）
サンプルデータの型番は NE555P、2SC1815、74HC595、MCP23017、W25Q128 を使う。
保管場所は「引き出しA-3」のような表記。
落ち着いた実用的な配色。暗い作業部屋でも見やすいこと。

3 層の型に当てはめると、1〜4 行目が構造、最後の 2 行が見た目、NE555P… と 引き出しA-3 の 2 行が中身です。狙いは、言葉で名指しした具体的な中身がどこまで生成物に残るかを測れるようにしておくこと。型番 5 つと保管場所の表記は、あとで照合できる目印になります。

A. アプリ版（バランス）

「アプリ」を選んで投げた結果です。

指定していないものが 2 つ増えています。 1 つはアプリロゴ（PartsVault Logo）、もう 1 つはデザインシステム Workbench Instrument です。後者は色とフォントとコンポーネントの定義書で、中身はこうでした。

「落ち着いた実用的な配色。暗い作業部屋でも見やすいこと」という 1 行から、ダーク基調＋シアンのアクセントという判断が出てきて、その判断が名前付きのデザインシステムとして残る。このあと画面を足したときも、この定義が引き継がれます。

指定した中身がどう入ったかは次のとおりです。

そして、アプリ名を勝手に決めてきました。 ヘッダーに SYS.VAULT、ロゴに PartsVault。こちらは「電子部品の在庫管理アプリ」としか書いていません。

詳細画面の作り込みが、想像より一段深いところまで来ていました。

• 電気的仕様（RATINGS） の表：Ta = 25°C の条件付きで、電源電圧 4.5〜16.0 V／出力電流 ±200 mA／タイミング周期 µs〜Hours／動作温度範囲 0〜+70 °C
• DIP-8 のピンアサイン：TOP VIEW の図で、左に 1 GND・2 TRIG…、右に 8 VCC・7 DISCH…
• データシートリンク：「PDF データシートを開く（TI公式）」
• エンジニアリングメモ：「オシレータ実験用。CMOS版(LMC555)とピン互換だが…」「引き出し A-3 の青い仕切りトレイ内に保管中」

型番検索の画面も同じ調子で、「部分一致・3 件ヒット（全538パーツ）・1.8ms」という検索結果の演出が入り、カテゴリ／パッケージ（SOP・SOIC・TO-92・QFP・QFN）／保管棚（A〜D）のフィルタが付いていました。538 という母数はどこにも指定していません。

生成が終わると、次にやるといいことが 2 つ提案されます。「QRコード・バーコードのスキャン画面を追加する」「引き出しキャビネットのトレイ配置図（ラッ…）」。在庫管理アプリの文脈を読んだ提案で、実際 2 つ目は自分でも欲しかったやつでした。

B. ウェブ版（バランス）

まったく同じプロンプトを、新規プロジェクトで「ウェブ」に切り替えて投げます。

時間は倍かかったのに、クレジットは 2 少ない。 画面数は同じ 4 で、ロゴが付かなかった分だけ安いのかもしれませんが、ここは推測です。はっきりしているのは、消費が「時間」ではなく「生成物の数」に紐づいて見えることです。これはあとの修正の節でもっと分かりやすい形で出てきます。

並べて見た違いは 3 つでした。

公式ドキュメントが言う「App と Web はサイズの違いではなく主たる設計面の違い」は、この 3 点にそのまま出ています。縦に積むか、横に敷くかでレイアウトの組み方が別物になり、入出庫の画面は「入出庫トランザクション記録」という名前に変わって、クイック入力フォーム＋今日の集計カード＋ログテーブル（CSV エクスポート付き）という構成になりました。

デザインシステムも別物が生成されます。

同系のダークブルーという方向は揃っているのに、実際の値と本文書体は違う。同じ言葉から毎回違うシステムが生えるので、2 つの器で見た目を揃えたいなら、あとから片方の DESIGN.md を持ち込むほうが早そうです。

指定していない型番が 3 つ増えた

ウェブ版で一番はっきりした違いは、レイアウトではなく中身のほうでした。

「この 5 つを使う」と書いたのに、3 つ足されました。 しかも足されたのが ESP32-WROOM・AMS1117-3.3・ATmega328P という、実際に電子工作の引き出しに入っていそうな顔ぶれなのが厄介です。ぱっと見では気づけません。

同じ調子で、存在しない数字と機能も並びます。「全 124 件のパーツ」「総部品数 4,288 個」「警告残少 12 点」「Lab Bench 1」、さらにヘッダーには LINK STATUS SERIAL: COM3 と BARCODE / QR [F2]。保管場所も「パーツキャビネットB-…」「帯電防止ケースA-5」と、指定した表記を勝手に拡張しています。

Preview メニューは実在した

ドキュメントが書いている Preview > Device Type は、画面を選んだときの上部メニューにありました。

この 390 という数字が、あとで書き出しの節に効いてきます。

C. 品質モードを変える（速度）

同じプロンプトを、アプリ版のままモードだけ「速度」に変えてもう一度。

時間は 15 秒しか縮まらず、クレジットは同額でした。 つまり「速度モードを選ぶ理由」は、速さでも安さでもないということになります。差が出たのは中身の密度です。

面白いのは、指定外の型番を足さなかったのは速度モードのほうだったことです。情報量が少ないぶん、余計な創作も少ない。「落ち着いた実用的な配色」という同じ 1 行からオレンジが出てきたのも、見た目の判断は毎回振り直されることをよく表しています。

D. 手描きスケッチからの生成は試していない

公開時の発表が最初に挙げていた機能が、これです。「ホワイトボードのデザインスケッチ、いいと思った UI のスクリーンショット、粗いワイヤフレーム」をアップロードすると、対応するデジタル UI を作る。llms.txt にも Sketch-to-UI が中核機能として書かれています。

この回では試していません。 入力欄の左に ＋（添付）ボタンがあることは確認しましたが、画像を添付した生成そのものを実行していないので、読み取り精度についてはこの記事では何も言えません。ここは次回に回します。

E. チャットで 3 回修正する

ここからが本番です。UI 生成ツールの実用性は、初回の出来ではなく修正の効き方で決まります。 対象は A で作ったアプリ版（バランス）のプロジェクト。公式が「1 回のプロンプトで変えるのは 1 つか 2 つ」と言っているので、それに従って 1 本ずつ投げました。

計画では 1 本目を「全画面をダークモードに」にするつもりでしたが、生成物が最初からダークだったので意味がありません。逆向きにして、ライトモード化から始めます。

E-1: 全画面をライトモードにしてください。

E-2: 「発注リスト」画面を追加してください。残数が最小在庫を下回った
     部品だけを並べ、まとめて発注数を入力できるようにしてください。

E-3: アクセントカラーをオレンジに変更してください。画像とアイコンも
     新しい配色に合わせてください。

狙いは最後の分岐です。積み上げた修正が、次の修正で巻き戻らないか。 ここが崩れる道具は、3 回目以降が苦行になります。

修正は「上書き」ではなく「世代追加」だった

E-1 を投げた結果が、この記事でいちばん予想と違ったところです。

既存の 4 画面は一切変わっていません。 キャンバスの 2 段目に、ライト版のデザインシステムと 4 画面が新しく並びました。画面は 4 → 8 枚、デザインシステムは 1 → 2 つ。2 段目の並び順は 型番検索／入出庫／在庫一覧／部品詳細 で、1 段目（部品の詳細／在庫一覧／型番検索／入出庫）とも違います。

この作りには、はっきりした利点と面倒さの両方があります。

• 利点：前の世代がキャンバスに残るので、やり直しでも前の案が消えない。ダーク版とライト版を並べて見比べられます。世代をまたいだ「あの時のほうが良かった」に戻れる
• 面倒さ：画面が増え続ける。3 回の修正で 14 画面になりました。Fit to View（Ctrl+1）は最新世代にフィットするので、全世代を一望するには手で縮小する必要があります

直前の状態は引き継がれる

E-2 で追加した発注リストは、頼んでいないのにライト配色で生成されました。つまり「世代追加」といっても毎回ゼロから作るのではなく、直前の状態を引き継いでいます。

中身も 2 クレジットとは思えない作り込みでした。

• 補充要件サマリー：3 SKU 不足・推奨発注数 130 pcs・推定費用合計 ¥3,420
• ボタン：「保有数一括適用」「CSV出力」
• 仕入先フィルタ：すべて(3) ／ 秋月電子通商(2) ／ 千石電商 ／ Digikey
• 行 3 件：W25Q128（危険水準 -2）／74HC595（残りわずか）／2SC1815-GR（試作量産 不足 -45）。それぞれに -5 / -1 / +1 / +5 のステッパーと小計
• 下部に RESTOCK POLICY の注記

「秋月電子通商」「千石電商」を仕入先として出してきたのは、プロンプトに書いていません。日本語で日本の部品在庫の話をしているという文脈から補われています。金額も件数も当然ダミーですが、発注画面の叩き台としては、この解像度で出てくるのはありがたい。

3 回目でも 1 回目は生きていた

E-3 は、デザインシステム Precision Industrial Inventory（オレンジ主体）＋ 5 画面を 3 世代目として生成しました。5 画面の内訳は 発注リスト／部品の詳細／入出庫の記録／型番検索／在庫一覧。つまり E-1 のライトモードも E-2 の発注リストも、両方とも引き継がれています。 ボタン・バッジ・アイコン・ロゴもオレンジ系に揃いました。

E-3 で「画像とアイコンも新しい配色に合わせてください」と添えたのには理由があります。公式 Prompt Guide に、テーマの色を変えるときは画像もそれに追随させるかどうかを明示せよという項目があるからです（Update theme to light orange. Ensure all images and illustrative icons match this new color scheme.）。言ったとおり、ロゴを含めて追随しました。

左パネルのエージェントログには、元のプロンプトと E-1・E-2・E-3 の 4 件が時系列で並びます。どの世代がどの指示から生えたのかは、ここで辿れます。

F. 書き出して、ブラウザで開く

作った絵が Stitch の中にしか無いなら、叩き台としても弱い。ここが最後の関門です。

まず躓いたのが入口でした。何も選ばずに右上の「エクスポート」を押すと、何も出ません。

画面が選択されていません。エクスポート オプションを表示するには、キャンバスで画面を選択してください。クイックヒント: すべて選択 プレス Ctrl + A

書き出しは画面単位の選択が前提です。1 枚選ぶと、右パネルに Format の一覧が出ます。

AI Studio を選ぶと、こう書かれています。「画面数が多い場合、エクスポートに 1〜2 分かかることがあります」「Stitch データを Google AI Studio にエクスポートしようとしています。AI Studio にエクスポートされたコンテンツには、AI Studio 利用規約と生成 AI の使用禁止に関するポリシーが適用されます」。

Figma への経路が「貼り付け」から変わっているのも、ここで分かりました。2025-05 の発表は Paste to Figma、llms.txt は editable Figma files と書いていますが、実画面は code.to.design というサードパーティのサービスに HTML を送って変換する方式です。パネルにも「HTML は code.to.design に送信され、利用規約とプライバシーポリシーに従って処理されます」と明記されています。今回は実行していません。

zip の中身

.zip を選んで落としました。2 通り試しています。

1 画面あたり code.html ＋ screen.png ＋ DESIGN.md の 3 点セット。ドキュメントが「zip に入るのは画像と HTML の両方」と書いていたのは正しく、さらに DESIGN.md も同梱されます。

全選択の 14 画面というのは、この日作った全世代です。

DESIGN.md が 3 つ（workbench_instrument / workbench_instrument_inventory_system / precision_industrial_inventory）入るのも、世代ごとにデザインシステムが生えた結果です。

HTML の中身

code.html の先頭はこうなっていました。

<!DOCTYPE html>
<html class="light" lang="ja"><head><meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, ..." name="viewport"/>
<meta content="mobile_tab" name="shell-type"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined..." rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;..." rel="stylesheet"/>
<style>@layer base{html,body{width:100vw;margin:0;padding:0;
background-color:#f8f9ff;color:#0b1c30;}...}</style>
<script src="https://cdn.tailwindcss.com"></script>
<script id="tailwind-config">
  tailwind.config = { darkMode: "class", theme: { extend: { "colors": {
    "primary": "#ea580c", "on-primary": "#ffffff", ...

見どころを並べます。

390px では右が切れる

書き出した code.html をブラウザで開いて、Stitch 側の screen.png と見比べました。キャンバスで画面を選ぶと「390 x 1005」というサイズが表示されるので、まず 390px 幅で開きます。

KPI カード 3 枚、残数の列、増減の ± ボタン、下部タブの「入出庫」——右端に並ぶものが軒並み画面の外に出ます。430px でも同じでした。幅を広げていくと、608px でぴたりと一致します。

原因は固定幅の指定ではありません。CSS は html,body{width:100vw} で、幅自体は画面に追従します。3 カラムの KPI・チップ・数値列という中身の量が、390px には物理的に収まらないだけです。Stitch が書き出す screen.png が 608×1600 なのも辻褄が合っていて、プレビュー画像は 608px 幅でレンダリングされたものでした。

つまり Stitch のアプリ画面は「390px のモバイル」ではなく、実質 608px 前提で組まれた絵です。そのままスマホ幅で開いて「崩れている」と判断すると誤読します。この HTML を手元で使うなら、レスポンシブ化は自分の仕事だと思っておくのが正解です。

DESIGN.md が付いてくる

1 画面の zip に入っていた DESIGN.md は約 11,000 字。ドキュメントの説明どおり、YAML front matter ＋ Markdown 本文の 2 層構造でした。

---
name: Precision Industrial Inventory
colors:
  surface: '#f8f9ff'
  surface-container-lowest: '#ffffff'
  on-surface: '#0b1c30'
  primary: '#a33900'
  on-primary: '#ffffff'
  primary-container: '#cc4900'
  ...（surface / on-surface / primary / secondary / tertiary / error 各系統）
typography:
  headline-xl:
    fontFamily: Hanken Grotesk
    fontSize: 36px
    fontWeight: '700'
    lineHeight: 44px
    letterSpacing: -0.02em
  ...
---

トークンの切り方は Material 3 の色ロールそのものです（surface-container-low / on-surface-variant / inverse-primary など）。本文側の見出しは Brand & Style ／ Colors ／ Typography ／ Layout & Spacing ／ Elevation & Depth ／ Shapes ／ Components（Buttons・Input Fields & Search・Chips & Badges・Tabs・Data Tables & Lists・Cards & Drawers）。

本文が何を書いているかが、この仕組みの肝です。たとえば書体の項はこう書かれていました。

Data & Part Codes (JetBrains Mono): MPNs (Manufacturer Part Numbers), SKU strings, bin locations (BIN-A4-02), tolerances, and electrical parameter values (e.g., 10µF ±10% 25V 0805) must always render in this monospace tier to avoid ambiguity between characters like 0/O and 1/I.

「型番は等幅で。0 と O、1 と I を見間違えないために」——これは HEX 値からは復元できない情報です。front matter が「何色か」を機械に渡し、本文が「なぜそうするか」を人間とエージェントに渡す。DESIGN.md の 2 層構造が効いているのは、まさにこういう一文のためでした。ちなみにこの理由付けも Stitch が書いたもので、こちらが指示したわけではありません。

📊 実出力：同じ 1 本の言葉から出てきた 3 つ

同じプロンプトを 3 回投げて、出てきたものを並べます。

アプリ名・デザインシステム名・主色は、3 回とも全部違いました。 同じ言葉を投げても再現はしません。逆に言えば、気に入らなければもう一度投げるだけで別案が出ます。

名指しした中身がどこまで残ったか

型番を目印に置いたのは、自然言語で指定した固有名詞が生成物のどこまで通るかが、この手の道具を実務に使えるかどうかの分かれ目だからです。結果は「5 型番は 3 回とも全部通った。ただし残数は毎回違い、ウェブ版は勝手に 3 つ足した」。名指ししたものは消えないが、名指ししていない空欄は埋められる、と読むのが近そうです。

書き出した zip の中身

画面 1 枚（在庫一覧）— 232 KB / 3 ファイル
  code.html    32.6 KB
  screen.png    224 KB   (608 x 1600)
  DESIGN.md      11 KB

全選択（Ctrl+A）— 3.1 MB / 55 エントリ
  _1/ 〜 _14/              各 code.html + screen.png
  partsvault_logo/
  partsvault_orange_icon_logo/
  DESIGN.md × 3  (workbench_instrument /
                  workbench_instrument_inventory_system /
                  precision_industrial_inventory)

💡 分かったこと

• アプリとウェブは「同じ内容の再配置」ではなく、別の設計判断が入る。 下部タブ → 左サイドバー、カード縦積み → KPI ＋ テーブル、1 カラム → 3 カラム。しかもデザインシステムまで別物が生成される。片方を作ってから「これをウェブに」と頼むより、両方投げて見比べるほうが速い
• 品質モードの差は「速さ」ではなく「密度」。 速度モードは 15 秒しか速くなく、クレジットは同額。違いは情報量で、詳細画面から仕様表とピン配置が消えた。節約目的でモードを落とす意味は無い
• 修正は世代追加。前の案は消えないが、画面は増え続ける。 3 回の修正で 4 → 14 画面。やり直しに強い反面、書き出すと全世代が連番フォルダで落ちてくる
• 消費クレジットは再生成する画面数に比例する。 1 画面なら 2、4〜5 画面＋デザインシステムなら 9〜13。「全画面の」と言った瞬間に一桁増えるので、節約したいなら対象を名指しする
• 書き出した HTML は単体では成立しない。 Tailwind は CDN 参照、フォントは Google Fonts、画像は lh3.googleusercontent.com の外部 URL。ネットが無いと崩れ、画像は URL が失効すれば消える。「自己完結した HTML」ではなく「翻訳の土台」として受け取るのが正しい
• 上限の実数は画面でしか分からない。 公式に数値ページが無い道具は、自分で測って記録しておくしかない
• ドキュメントが画面に追いついていない箇所が 2 つあった。 モード 4 種（実際は 2 種）と、書き出し先の Antigravity（実際は無く、Netlify / Lovable / Bolt がある）。BETA の実験を記事にするときは、ドキュメントではなく画面を正とするしかない

💭 所感

この道具を触っていて一番「作る側の発想だ」と思ったのは、DESIGN.md でした。デザインシステムを JSON でも独自形式でもなく Markdown 1 枚に落として、それを「AI エージェントが読む文書」と位置づけている。実際に書き出してみたら、front matter に Material 3 のカラーロールが並び、本文に「型番は等幅で。0 と O を見間違えないために」と書いてある。HEX 値だけでは絶対に伝わらない理由が、同じファイルに同居しているのが効いています。

electwork でこれが効きそうなのは、Web Serial のプロッタや /tools/ の計算ツールのような、自分で書いた小さな HTML の見た目を揃えたいときです。今は 1 枚ずつ手で CSS を書いていますが、extract-static-html で今の画面を抜き、extract-design-md でルールを取り出し、次のツールはそのルールを読ませて作る――という流れが手作業より速いかどうかは、試す価値があります。

一方で、在庫管理アプリとして本当に使うにはまだ距離があります。Stitch が作るのは画面であって、データベースも認証も検索の実装もありません。出てくるのは「そういうふうに見える HTML」で、しかもその HTML は 608px 前提でレスポンシブでもない。ただ、最初の画面が描けなくて止まるという問題に対しては、これで十分すぎるほどでした。2 分で 4 画面と配色の根拠が出てきて、「発注リストも要るな」と気づかせてくれて、2 クレジットでそれが生える。叩き台が手元にあれば、あとは自分の言葉で直せます。そこから先を自分で書くことに、抵抗はありません。

一番うれしかったのは、実は E-2 の発注リストでした。こちらは「残数が最小在庫を下回った部品を並べて」としか書いていないのに、仕入先フィルタに「秋月電子通商」と「千石電商」が出てきた。 日本語で部品在庫の話をしている、という文脈だけからそこに辿り着いたわけです。数字は全部ダミーですが、自分が本当に作るならこの列が要ると気づかされたのは事実でした。

💰 費用

0 円です。Stitch には 2026-09 時点で有料プランが存在せず、日次クレジットの範囲で使います。#1・#2 で使った Gemini API の課金プロジェクトとは無関係で、このプロジェクトの利用額は動いていません。

代わりに記録したのが、クレジットの減り方です。

6 回の生成で 55 クレジット、1 日分の枠 400 のうち 約 14%。1 生成あたりの平均は 9.2 です。上限には当たっていません。 この調子なら、1 日に同じ規模の検証を 7 回できる計算になります。

1 回の消費は、モードでも所要時間でもなく 生成される画面の枚数でほぼ決まりました。

クレジットは 1 日あたり 400 で、翌日には 0 に戻ります（日次リセット）。なお、書き出し操作そのもので残量が減るかは測っていません。

⚠️ できないこと・確認していないこと

• Stitch が作るのは UI であって、動くアプリではありません。 データベース・認証・検索の実装・在庫数の永続化は含まれません。ボタンもタブも押せません
• 手描きスケッチからの生成は試していません。 画像添付そのものを実行していないので、読み取り精度についてこの記事は何も言えません
• Figma 書き出しは実行していません。 画面の説明文から、code.to.design というサードパーティに HTML を送って変換する方式であることまでを確認しました
• Edit Theme・バリエーション（1 回で最大 5 案）・Prototype・Agent manager・音声入力は使っていません。 この回は「言葉 → 画面 → 修正 → HTML」の 1 本道に絞りました
• MCP サーバーと SDK は触っていません。 設定ページに API キー発行と MCP 設定の導線があることまでです
• DESIGN.md を他ツールに持ち込む検証はしていません。 書き出せて、中身がどうなっているかまでです
• クレジットの上限に当てていません。 使い切ったときの挙動（生成が止まるのか、待たされるのか）は未確認です
• 生成された部品データの値は検証していません。 NE555P の定格・ピン配置・データシートリンクはすべて Stitch が補ったもので、正しさは確かめていません
• モードの名前・書き出し先・上限の数値は、その日の画面で見えたものです。公式の数値ページは存在せず、ドキュメントとも一致していません

✅ まとめ

1. Stitch は Google Labs の BETA の実験で、2025-05 の公開から Gemini 3 化（2025-12）、vibe design への作り替え（2026-03）と 2 度大きく変わっている。無料で、有料プランの導線は無く、1 日 400 クレジットの範囲で使う
2. 品質モードは「速度」と「バランス」の 2 つだけだった。公式ドキュメントが挙げる 4 モードとは名前もモデルも一致しない。差は速さではなく情報密度で、消費クレジットは同じ
3. 同じ 1 本のプロンプトから、アプリ版は下部タブ ＋ カード縦積み、ウェブ版は左サイドバー ＋ KPI ＋ テーブルが出た。デザインシステムまで別物が生成され、ウェブ版は指定していない型番を 3 つ足してきた
4. チャットでの修正は上書きではなく世代追加。 ライトモード化・画面追加・配色変更の 3 回で、画面は 4 → 14 枚に増えた。前の案が消えない代わりに、キャンバスは伸び続ける
5. 積み上げた修正は 3 回目でも生きていた。 ライトモードも追加した発注リストも、最後のオレンジ化世代に引き継がれた
6. 消費は再生成する画面数に比例する（1 画面 2／4〜5 画面＋DS 9〜13）。節約したいならモードではなく対象を名指しする
7. 書き出し zip は code.html ＋ screen.png ＋ DESIGN.md の 3 点セット。ただし HTML は Tailwind CDN 参照・画像は外部 URL でオフラインでは崩れ、画面表示は 390px ではなく 608px 幅で初めてプレビューと一致する
8. 全工程で 0 円・55 クレジット（400 の約 14%）。3 時間で、叩き台としては十分すぎる量の画面が手に入った

最初の画面が描けなくて止まる、という問題に対しては十分な道具でした。次に確かめたいのは DESIGN.md と MCP の側です。自分で書いた /tools/ の HTML からデザインルールを抜き出し、次に作るツールへ渡せるのか。そこが通れば、この道具は「叩き台を出す箱」から「自分の見た目を運ぶ経路」になります。

よくある質問（FAQ）

Q: Stitch は日本から使えますか

A: 使えました。日本語の UI で、日本語のプロンプトがそのまま通ります。Google アカウントでサインインするだけで、待機リストも招待コードも同意画面もありませんでした（2026-09-22 時点）。

Q: お金はかかりますか

A: かかりません。2026-09 時点で Stitch に有料プランは存在せず、画面にもアップグレードの導線はありませんでした。日次のクレジットの範囲で無料で使います。2026-02 に「追加クレジットを買わせてほしい」という要望が出た際も、機能要望として受け付ける回答にとどまっています。

Q: 1 日に何回まで生成できますか

A: 設定ページの「今日の使用量」に表示される 1 日あたりのクレジットは 400 でした。 生成 1 回の消費は画面数しだいで、画面 1 枚の追加なら 2、4〜5 画面まとめてなら 9〜13。この記事の全工程（6 回の生成）で 55 使っています。公式の数値ページは無く、2025-12 時点の開発側の回答は「1 日 150 デザイン」だったので、自分の画面の残量表示を見るのが確実です。使った分は翌日には 0 に戻ります（日次リセット）。

Q: Google AI Pro に入っていると上限が増えますか

A: 増えるという公式の案内は見つかりませんでした。 Stitch は Google AI Pro とも Gemini API の課金とも別の枠です。

Q: どのモデルが使われていますか

A: 画面のドロップダウンにあったのは 2 つだけです。「速度」＝ Gemini 3.5 Flash-Lite、「バランス」＝ Gemini 3.8 Flash（既定）。公式ドキュメントの Design Modes は Fast（Gemini Flash）・2.5 Pro・Thinking with 3 Pro・Redesign（Nano Banana Pro） の 4 つ、MCP の modelId は GEMINI_3_FLASH と GEMINI_3_1_PRO の 2 択で、3 つとも一致しません。画面で選べるものが実際に使われるものと考えるのが確実です。

Q: 入力したデータは学習に使われますか

A: 設定ページに「AI モデルのトレーニングを許可する」というトグルがあり、既定でオンでした。文言は「Google の生成 AI モデルのトレーニングのために、Stitch での今後の会話やコードを Google が使用することを許可します」。オフにできますが、自分から送ったフィードバックには（オプトアウトしても）適用されないと明記されています。業務の画面を投げる前に確認しておく場所です。

Q: 修正をお願いすると、元の画面は上書きされますか

A: されません。世代として追加されます。 「全画面をライトモードに」と頼んだら、既存の 4 画面はそのまま残り、キャンバスの 2 段目にライト版 4 画面が新しく生成されました。前の案が消えないのは利点ですが、3 回修正したら画面は 14 枚に増え、書き出すと全世代がまとめて落ちてきます。

Q: 指定した内容はちゃんと反映されますか

A: 名指しした固有名詞は通りますが、書いていない部分は勝手に埋められます。 指定した 5 型番は 3 回とも全部入りました。一方、残数は毎回違う値が入り、ウェブ版では指定していない型番が 3 つ追加され、「全 124 件」「総部品数 4,288 個」といった存在しない数字まで生成されました。ダミーデータ入りのモックとして受け取るのが前提です。

Q: 生成した UI はそのまま公開できますか

A: そのままでは動くアプリになりません。 出てくるのはフロントエンドの HTML/CSS で、データベース・認証・検索の実装は含まれず、ボタンもタブも押せません。叩き台として受け取り、自分で中身を実装する前提の道具です。

Q: 書き出した HTML はローカルだけで動きますか

A: 動きません。 Tailwind は https://cdn.tailwindcss.com を読み、フォントは Google Fonts、画像は lh3.googleusercontent.com の外部 URL を参照します。ネットが無いとレイアウトごと崩れます。手元に残すなら Tailwind をビルド済み CSS に差し替え、画像を保存し直す作業が要ります。

Q: 書き出した HTML はスマホ幅で正しく表示されますか

A: しません。 キャンバスの画面サイズ表示は「390 x 1005」ですが、書き出した HTML を 390px 幅で開くと右側が切れます（430px でも同じ）。608px にして初めて Stitch 側の screen.png と一致しました。レスポンシブ化は自分の仕事だと思っておくのが正解です。

Q: 書き出し先には何が選べますか

A: 2026-09-22 時点で 9 択でした。AI Studio（既定・プレビュー）／Figma／MCP／Netlify（プレビュー）／Lovable（プレビュー）／Bolt（プレビュー）／.zip／コードをクリップボードにコピー／プロジェクト概要（PRD 生成）。2026-03 のブログが挙げていた Antigravity は、この時点では選択肢にありませんでした。

Q: Figma に持っていけますか

A: 選択肢としてはあります。ただし表現も仕組みも変わっています。2025-05 の発表は Paste to Figma（貼り付け）、llms.txt は editable Figma files ですが、実画面は「HTML は code.to.design に送信され、利用規約とプライバシーポリシーに従って処理されます」というサードパーティ経由の変換でした。この記事では実行していません。

Q: 手描きのスケッチは本当に読めますか

A: 読める前提で作られています。公開時の発表から「ホワイトボードのスケッチ・UI のスクリーンショット・粗いワイヤフレーム」をアップロードできることが挙げられており、llms.txt にも Sketch-to-UI が中核機能として書かれています。この記事では試していないので、実際の読み取り精度については何も言えません。

Q: コーディングエージェントから使えますか

A: 使えます。リモート MCP サーバー（https://stitch.googleapis.com/mcp）が公開されていて、Cursor・Antigravity・VSCode・Claude Code・Gemini CLI の設定例がドキュメントにあります。認証は API キー（設定ページで発行・X-Goog-Api-Key ヘッダ）か OAuth（gcloud 経由・トークンは 1 時間で失効）。設定ページには「MCP を設定」の折りたたみがあり、クライアントを選んで API キーを作るところまで導線が繋がっています。ツールは 14 個。TypeScript から直接叩く @google/stitch-sdk も別にあります。

Q: 既存のコードから Stitch に持ち込めますか

A: stitch-skills の code-to-design（React や Vue のコードを Stitch のデザインに変換）と extract-design-md（ソースコードからデザインシステムを抽出）がその方向のスキルです。Codex・Antigravity・Gemini CLI・Claude Code・Cursor から使えます。この記事では試していません。

関連記事

• 【連載】Google AI 実験室 — この連載のとりまとめ。収録記事と、毎回やっていることのまとめ
• 【Google AI 実験室 #1】準備編：AI Studio で記事専用プロジェクトを作り、API キーを発行して Gemini を最初に呼ぶまで — Google AI Pro と API 課金が別会計であること、無料枠の規約。Stitch はそのどちらとも別枠
• 【Google AI 実験室 #2】データシート QA：Gemini にデータシート PDF を読ませ、IC実験室の実測値で採点する — AI の出力を「引用を返させて機械で照合する」型で採点する回

参考

ドキュメント類はすべて 2026-09-22 取得。画面の数値は 2026-09-22 〜 09-23 に取得。

• From idea to app: Introducing Stitch, a new way to design UIs — Google Developers Blog、2025-05-20。公開時の発表。Gemini 2.5 Pro・テキスト／画像からの生成・Paste to Figma・コード書き出し
• Stitch from Google Labs gets updates with Gemini 3 — blog.google、2025-12-10。Gemini 3 化と Prototypes
• Introducing “vibe design” with Stitch — blog.google、2026-03-18。UI 刷新・AI ネイティブキャンバス・デザインエージェント・Agent manager・DESIGN.md・音声・MCP サーバーと SDK・AI Studio／Antigravity への書き出し
• Google Labs — 実験一覧。Stitch は Try It Now
• stitch.withgoogle.com/llms.txt — Stitch 自身が機械向けに置いている要約。Vibe Design / Vibe Coding の定義、3 層のプロンプト構造（Anatomy / Vibe / Content）、Sketch-to-UI、editable Figma files の表現
• Stitch Prompt Guide: Effective Prompting — 公式のプロンプト指南（2025-06-05 投稿）。高レベル→詳細、形容詞で vibe を決める、1 回 1 変更、テーマ変更時に画像も追随させる指定
• google-labs-code/stitch-sdk — Apache-2.0・TypeScript。STITCH_API_KEY、generate / getHtml / getImage、variants の creativeRange と aspects、Vercel AI SDK・Google ADK 連携
• google-labs-code/stitch-skills — Apache-2.0。Agent Skills 標準。code-to-design / generate-design / manage-design-system / extract-design-md / extract-static-html / upload-to-stitch
• Stitch Docs（stitch.withgoogle.com/docs・ログイン後）— 章立ては Stitch ／ MCP ／ SDK ／ DESIGN.md ／ Agent Skills の 5 つ。この記事で引いたページ:
  • Everything you need to know to design with Stitch — IDEA / THEME / CONTENT / IMAGE のプロンプト式、デバイス種別は「とりあえず選べ」、Edit Theme・Prototype・Download、HTML は React / Angular / Vue / Jetpack Compose / Flutter / SwiftUI への翻訳の土台
  • Effective Prompting — 高レベル→詳細、形容詞で vibe、1 回 1〜2 変更、画像とテーマの追随指定
  • Device Types — App と Web は「主たる設計面」の違い、リサイズではなく translate、同一プロジェクト内で切り替えると中身が隠れる Pro Tip
  • Design Modes — Fast（Gemini Flash）／2.5 Pro／Thinking with 3 Pro／Redesign（Nano Banana Pro）（2026-09-22 の画面とは一致しない）
  • Using Variations — 1〜5 案、Creative Range（Refined / Creative）、バリエーションでは大振りしてよい
  • Controls & Hotkeys — V / H / Z、Space 長押し、Ctrl+K、Ctrl+←→、Ctrl+D、Shift+D、?
  • Setup & Authentication（MCP）— https://stitch.googleapis.com/mcp、X-Goog-Api-Key、OAuth は gcloud の二重ログインでトークン 1 時間、各クライアントの設定例
  • Reference（MCP）— 14 ツール、Enum（ModelId は GEMINI_3_FLASH / GEMINI_3_1_PRO・GEMINI_3_PRO は Deprecated、CreativeRange は REFINE / EXPLORE（既定）/ REIMAGINE、VariantAspect 5 種）
  • Build your first design（SDK）— Node.js 20 以上、STITCH_API_KEY、createProject → generate → getHtml / getImage
  • What is DESIGN.md? — README.md / AGENTS.md / DESIGN.md の対比、YAML front matter ＋ Markdown 本文、作り方 3 通り
  • Get started with Agent Skills — 13 スキル、enhance-prompt、生成は 15〜30 秒
• Google AI Developers Forum — Stitch カテゴリ — クレジット上限に関する開発側の回答（2025-10「有料プランは無い」／2025-12「1 日 150 デザイン」）と利用者の投稿（2026-01「上限が倍になった」／2026-09「/400 表示」）