Stitch CLI クイックスタート

Stitch CLI へようこそ。ターミナルで直接コマンドを実行するのが好きでも、/stitch を使ったコーディングエージェント経由でデザインワークフローを進めたい場合でも、空のフォルダから localhost で動くインタラクティブなデザインまで、数分でたどり着けます。

CLI をインストールする

npm を使って @google/stitch をグローバルにインストールします（Node.js 20 以降）。

npm install -g @google/stitch
stitch --version

または、npx @google/stitch でその場で実行できます。

ログインする

stitch login を実行すると、ブラウザ経由で Google OAuth にログインします。1 回のログインで、Stitch キャンバスプロジェクトとワークスペースのワークフローの両方が認証されます。

stitch login

ヘッドレス環境や CI パイプラインで実行している場合は、STITCH_API_KEY を設定するか、グローバル設定に API キーを保存します（stitch config set apiKey "your_api_key_here" --global）。ログイン状態は stitch status でいつでも確認できます。

`/stitch` スキルをコーディングエージェントに追加する

Claude Code、Cursor、Gemini CLI、Antigravity などのコーディングエージェントを使っている場合は、同梱の /stitch スキルをインストールして、エージェントが CLI を操作できるようにします。

stitch agent-skills add --user

インストール後は、エージェントのチャット内で /stitch を呼び出し、画面の生成、DESIGN.md の抽出と同期、実行中のアプリの監査を行えます。

PROMPT

/stitch Create a new Stitch project called “Checkout Redesign” and generate a clean desktop order summary screen.

ターミナルから最初の画面を生成する

すべてのステップはシェルから直接実行することもできます。まず Stitch キャンバスプロジェクトを作成し、現在のディレクトリに固定して、毎回のコマンドで --project を渡さなくて済むようにします。

stitch create project --title "Checkout Redesign"
stitch config set project <project-id>

次に、プロンプトから画面を生成します。

stitch generate screen \
  --title "Order Summary" \
  --device DESKTOP \
  --prompt "A clean two-column checkout summary on warm paper (#FAF8F5) with itemized billing, shipping selector, and a primary payment button"

画面が生成されたら、ローカルプレビューサーバーを起動して localhost でライブ HTML を確認するか、ブラウザで Stitch キャンバスのプロジェクトを直接開きます。

stitch serve
stitch open project

次に進む先

作っているものに応じて、合ったワークフローを選んでください。

画面の生成と編集 — 画面を作成し、クリエイティブなバリエーションを試し、細部を 1 つずつ磨き上げます。
コーディングエージェントと反復する — カスタムアートワークをアップロードし、最初のプロンプトで集中したデザインを枠に収め、localhost でインタラクティブな状態を組み込みます。
デザインシステムの同期 — /stitch または stitch upload design を使って、DESIGN.md の仕様をプロジェクトにバインドします。
ライブアプリのキャプチャ — ローカルの開発サーバーからライブのルートをスナップショットし、Stitch キャンバスにアップロードします。
アプリ UI の監査 — 実行中のアプリを DESIGN.md と比較するローカルデザインレビューを実行します。

既存のリポジトリで作業する

Stitch にコードベース全体を分析させ、ルートを検出し、プロダクトの目標に基づいて UI プロトタイプを提案させたい場合は、お使いのマシンでワークスペース機能を一度有効にします。

stitch enable loop

次に、ワークスペースのガイドを確認してください。

リポジトリの接続 — コードベースを Stitch ワークスペースとペアリングし、キャンバスプロジェクトをリンクします。
優先事項とコンテキスト — 常設の UI プロトタイピング目標を設定し、プロダクト仕様を添付します。
コードベースのプロトタイプ — コードベースの UX インサイトとソリューション仕様を Stitch キャンバスの画面に変換します。
CLI コマンドリファレンス — すべてのコマンド、サブコマンド、フラグを 1 か所にまとめています。