インストール
npx skills add google-labs-code/stitch-skills向いている人
すでに Google Stitch で画面を作っており、コーディング系 agent に開放の Agent Skills 標準で新しい画面の生成、既存画面の編集、デザインバリアントの作成をさせたいなら、この一式が合います。Google Stitch 向けのスキルとプラグインの集まりです。説明ページは
https://github.com/google-labs-code/stitch-skills
製品本体は
https://stitch.withgoogle.com/
より向くのは、Stitch MCP の登録を終え、環境変数と資格情報が公式導入説明どおり整っており、下のスキル導入コマンド1本だけを受け入れる人です。これらのスキルは agent 環境で Stitch MCP が設定済みかつ稼働していることを求めます。MCP がなければ呼べるデザインバックエンドがありません。導入説明は
https://stitch.withgoogle.com/docs/mcp/setup/
初回は確認できる小さな生成またはバリアントにし、いきなり本番デザインシステム一式を直さないでください。公式はいくつかのコーディング環境を名指しし、そのうち1つは手動導入が必要と書きますが、その手順はありません。名指し名簿を唯一使える環境と読まず、書いていないインストーラも作らないでください。集まりは Agent Skills 開放標準に従い、スキル名は stitch::generate-design の形で出ます。書いていない他の stitch:: 名を自分で足さないでください。まだ Stitch アカウントや MCP 資格情報がなければ、先に Setup ドキュメントへ行き、先に npx を走らせないでください。
3分で初回トライ
スキルは公式のこの任意導入コマンドだけです：
npx skills add google-labs-code/stitch-skills
別のマーケット、プラグイン、2本目のスキルインストーラを探さないでください。入れたら agent を再起動し、スキルが出ることを確認します。
前提：Stitch MCP が上の Setup ドキュメントどおり登録され、環境変数と資格情報が設定され、プロセスが動いていること。MCP が未準備なら設定確認で止め、生成を呼ばないでください。ローカルで npx も動く必要があります。
スキル導入済みかつ MCP 稼働中の agent で、低リスク作業を1回：stitch::generate-design を呼び、短いテキストでサンドボックス画面を説明する（例：「タイトルと主ボタンだけの空状態ページ」）。先に Stitch へ送るプロンプト、既存画面を直すか、ローカルファイルを書くかを言い直させます。新しい下書きだけを生成し正式稿を上書きしないと確認してから続行を許します。
成功の合図：Stitch に対応する新しい画面、または開けるデザイン結果が出ること。Stitch と無関係な偽 HTML ではありません。スキルがバックエンド不可と言ったら、MCP が動いているか、資格情報が公式ドキュメントどおりかを戻って確認し、導入コマンドを変えて未記載の入手先を試さないでください。ドキュメントにない秘密プレースホルダを求められたら止め、Setup ページに書かれた環境変数名だけを使います。
利用ケース
ケース 1：テキストまたは画像から新しい画面を生成する。stitch::generate-design の説明は、テキストまたは画像から新しい画面を生成することです。画面の一文説明、または使う権利のある参考画像を用意し、スキルに Stitch で第一稿を出させます。画像パスまたはテキストが未準備なら先に止めます。生成は Stitch 側に落ち、外部呼び出しです。プロンプトを確認してから実行します。公式はプロンプトテンプレートや画像サイズ制限を書いていません。それらの細部が欠けているときは説明を短くし、パラメータを偽造しないでください。
ケース 2：既存画面を直す、またはバリアントを出す。同じスキルは既存画面の編集とデザインバリアント作成も明記しています。Stitch 内の既存下書きを指定し、1〜2個のバリアントだけを求め、一括上書きしないでください。公式はバリアント数上限も巻き戻しボタンも書いていないので、先にどの画面を直すか、別保存するかを言わせ、確認してから走らせます。ケース 1 と同じスキルの別操作であり、別インストールではありません。agent が未記載のプラグインコマンドで同じことをしようとしたら拒否し、導入済みスキル名だけを使い続けてください。
利用上の境界
稼働中の Stitch MCP がなければ、この一式を普通の作画スキルとしては使えません。先にサーバー登録と環境変数・資格情報の設定を終える必要があります。欠けた項目について公式は迂回手段を出していません。スキル導入コマンドを MCP 導入コマンドと取り違えないでください。
公式のスキル導入は npx skills add google-labs-code/stitch-skills だけです。ページには特定ホスト向け、--target 付きの npx plugins add もあります。それはプラグインの着地点であり、本ガイドが採るスキル導入入口ではありません。「手動導入」と名簿に書かれた環境について、公式は複製できる手順を出していないので、ディレクトリコピーやマーケット指令を発明しないでください。
generate-design は Stitch 内で画面を作成または変更し、副作用のある外部呼び出しです。プロンプト、対象画面、別保存するかを先に照合してから実行します。公式は生成結果を本番アプリへ直接出すことを認めておらず、表以外のスキル名も列挙していません。書いていない能力を推測しないでください。画像から生成するときは、使う権利のある参考図だけを使います。既存画面を編集する前に、Stitch でそれがまだ下書きであることを確認し、引き渡済み画面を上書きしないでください。