Google Stitch CLI 完全ガイド：ターミナルから UI を生成する
公式 Stitch CLI のコマンド単位の入門チュートリアル：インストールとログイン、generate と serve のワークフロー、agent-skills による Claude Code／Cursor へのワンクリック導入、dev server のスナップショット連携、そして stitch loop と stitch-loop スキルの違いを整理します。
2026 年 10 月 1 日、Google Labs が公式の Stitch CLI（@google/stitch）を正式にリリースしました。公式は発表時に印象的な一文を添えています。Stitch には MCP があり、SDK があり、しかし CLI がなかった——それが今、ついに揃った、と。
この一文が CLI の立ち位置を示しています。それはもう 1 つの「生成ボタン」ではなく、Stitch を 3 本目の公式接続チャネルとして完成させるものです。すでにターミナルで作業することに慣れた開発者にとって、デザイン生成、プロトタイプのプレビュー、コーディングエージェントの接続は、もはやブラウザタブから始める必要はありません。
本記事は開発者向けのコマンド単位の入門チュートリアルです。インストールとログインから完全なワークフローまで、3 つのことを明確にします——CLI に何ができるか、既存の MCP／SDK とどう役割分担するか、そしてコミュニティで混同されやすい stitch-loop スキルと本当に同じものなのか。
ヒント：Stitch CLI は現在急速にイテレーションされている段階で、コマンドと引数は変わる可能性があります。本記事は 2026 年 10 月の公開資料に基づいています。実際の操作ではターミナル内の
stitch --helpの出力を基準にしてください。
1. Stitch の 3 つ目のピース：CLI が補ったもの
CLI 以前、Stitch にはすでに 2 本の公式接続チャネルがありました。3 つを並べて比較すると、役割分担が明確になります。
| 接続方式 | 対象 | 典型的なシーン | 向かないとき |
|---|---|---|---|
| Stitch MCP | コーディングエージェントがプロトコル経由で呼び出す | Claude Code や Cursor などから Stitch プロジェクトを直接読み書きする | 手動で段階的にフローを制御したい |
| Stitch SDK | コードを書く開発者 | 生成能力を自分のツールチェーンに組み込む | 画面を 1 つ素早く生成したいだけ |
| Stitch CLI | ターミナルユーザーとエージェントが共用 | ローカル生成、プレビュー、エージェント接続を一気に | ブラウザから完全に離れたくない |
CLI は 3 つの能力をもたらします。
- ローカルのコーディングエージェントと接続：Stitch の能力を、ターミナルで作業中のエージェントに渡します。
- 画面とデザインシステムの生成：Web 版と同等の中核生成能力をコマンドから直接呼び出せます。
- ローカル開発サーバーのスナップショットを Stitch に送り返す：新設された逆方向のチャネルで、Stitch が「コードから実際に生まれた」画面を見られます。
2. 5 分で導入：インストールから最初の画面まで
インストールとログイン
環境要件：Node.js 20 以上。
npm install -g @google/stitch
stitch login
プロジェクト作成と最初の画面生成
stitch create project --title "My App"
stitch generate screen --device DESKTOP --prompt "Clean analytics dashboard with sidebar navigation"
stitch serve
stitch serve はローカルでプレビューサービスを起動します。生成結果はすぐに確認でき、Web 版に切り替える必要はありません。
主要コマンド早見表
| コマンド | 役割 |
|---|---|
stitch login | アカウントにログイン |
stitch create project | プロジェクトを作成 |
stitch generate screen | 単一画面を生成。--device で DESKTOP か MOBILE を選択 |
stitch generate variants | 現在のデザインを基にバリアントを生成。--creative-range で発散の度合いを制御 |
stitch serve | 生成結果をローカルでプレビュー |
stitch agent-skills add --user | ローカルのコーディングエージェントに Stitch Skills をインストール |
バリアントコマンドの --creative-range は 3 つのレベルを提供し、SDK の variants パラメータ体系と一致します。
stitch generate variants --creative-range REFINE # 現在の方向で微調整
stitch generate variants --creative-range EXPLORE # 隣接する方向を探索
stitch generate variants --creative-range REIMAGINE # 大胆に再構築
3. 1 つのコマンドですべてのコーディングエージェントに接続：agent-skills add
stitch agent-skills add --user
この 1 つのコマンドが、以下のエージェントに Stitch Skills をまとめてインストールします。
- Claude Code
- Cursor
- Codex
- Gemini CLI
- Antigravity
インストール後、エージェント内に /stitch コマンドが追加され、3 つのことを直接実行できます。画面の生成、URL からのデザインシステム抽出、Stitch プロトタイプの React コンポーネントへの変換です。
手動で Skills をインストールする場合との違い
以前はエージェントごとに Skills を個別に設定する必要があり、エージェントが増えるほど保守コストが上がりました。今は 1 つのコマンドですべてをカバーし、アップグレード時も再実行するだけです。旧方式で Skills を設定済みのプロジェクトは、CLI の方式で一度入れ直し、複数エージェントのバージョンを揃えることをおすすめします。
4. 逆方向のチャネル：dev server のスナップショットを Stitch に送り返す
従来の Stitch のワークフローは一方通行でした。デザインがコードを生成する。CLI は逆方向を補いました——ローカル開発サーバーのスナップショットを Stitch に送り返すのです。
このステップの価値は、Stitch が静的などスクリーンショットではなく、実際に動作している画面を見られる点にあります。以降のイテレーションは「コードから実際に生まれた姿」を基に行われ、現状を言葉で説明するコミュニケーションコストが減ります。
この能力の公開されている詳細はまだ限られています。具体的なコマンドと対応範囲は公式ドキュメントを基準にしてください。
5. stitch loop とは：stitch-loop スキルとの違い
これは現在、中国語圏の資料で最も混同されやすい点です。2 つの名前は非常に似ていますが、まったく異なる階層に属します。
- stitch loop（CLI コマンド）：公式が内部で長く使ってきた agentic ワークフロー。エージェントがコードベース、ログ、分析、ユーザーフィードバックを継続的に監視し、洞察と改善案を主体的に提示します。位置づけは「24 時間 365 日の継続的改善」です。
- stitch-loop スキル（Stitch Skills）：リレー方式の複数ページ生成スキル。「一度に 1 組のページを生成する」問題を解決します。
一文で区別すると：stitch loop は継続的改善を担い、stitch-loop スキルはバッチ生成を担う。 初めてこの 2 つの名前を見たなら、これだけ覚えておけば混同しません。
stitch loop の公開されている詳細は現在少なく、公式は完全なドキュメントを示していません。今後の更新を継続的に追うことをおすすめします。
6. 実戦ワークフロー：生成、イテレーション、DESIGN.md の凍結、エージェント実装、検証
CLI を実際のプロジェクトに組み込むには、次の 5 ステップをおすすめします。
stitch generate screenで初期画面を生成する。--creative-rangeで満足のいくデザイン方向にイテレーションする。- 最終的な視覚ルールを DESIGN.md に蓄積し、凍結する。
- コーディングエージェントに DESIGN.md に沿ってページを実装させる。
- ブラウザに戻って効果を検証し、ずれを次のイテレーションにフィードバックする。
重要な注意： 「DESIGN.md の凍結」のステップを飛ばさないこと。コミュニティの実践で繰り返し検証されているように、エージェントに記憶だけで UI を書かせると、画面ごとに新しいスタイルになる結果を招きがちです。DESIGN.md の書き方と検証方法は、DESIGN.md を CI に組み込む：公式 lint ツールでデザイン規約を検証可能なエンジニアリング成果物にする をご覧ください。
7. 既知の制限と注意点
- alpha 段階：機能と引数の変化が速いため、自動化フローではバージョンの固定に注意してください。
- 利用枠の制限：生成系のコマンドはアカウントの利用枠に依存します。バッチ操作の前にクォータを確認しましょう。
- 「偽の成功」問題：コミュニティからは「成功を報告したが実際には変更されていない」ケースが報告されています。重要なステップは人手での確認をおすすめします。
- エージェント接続は万能ではない：Skills のインストール後も、明確で具体的なタスク記述が必要です。
8. よくある質問（FAQ）
Q1：Stitch CLI は無料ですか？
CLI 自体は npm から無料でインストールできます。生成能力は Stitch アカウントの利用枠体系に従います。具体的な枠は公式の説明を基準にしてください。
Q2：すでに MCP があるのに、CLI も必要ですか？
ワークフローがコーディングエージェント中心なら MCP のほうが快適です。ターミナル操作に慣れている、あるいはスクリプト化やバッチ生成が必要なら CLI のほうが直接的です。両者は共存でき、どちらかを選ぶ必要はありません。
Q3：インストール後に stitch コマンドが見つからない場合は？
まず Node.js のバージョンが 20 以上であることを確認し、次に npm のグローバルインストールパスが PATH に入っているか確認します。npm install -g @google/stitch を再実行すれば大抵解決します。
9. まとめ
CLI は Stitch を「ブラウザの中のデザインツール」から「ターミナルとエージェントの両方から呼べるデザイン能力」へと変えました。開発者にとって最も重要なアクションは 3 ステップです。CLI をインストールし、agent-skills で手元のエージェントをつなぎ、DESIGN.md をワークフローに組み込む。
続けて読む：
- まずエージェントの基礎を補う：Stitch Skills ＋ Claude Code チュートリアル
- プロンプトの書き方を体系的に学ぶ：Stitch プロンプトチュートリアル
- Stitch の能力の全体像を見る：Google Stitch 2026 アップデート