はじめに

すぐに使い始めて、いくつかのコツやヒントを学びましょう。

Stitch MCP は、Stitch エディタ内でのデザイン生成の力を、そのまま IDE や CLI、あるいはお好みの AI ツールに持ち込みます。デザインをそのままコードベースに変換し、新しい画面を生成できます。これにより、Stitch をプログラムで制御し、自動化できるようになります。

始める前に

認証

まず最初に、Stitch MCP での認証が必要です。このガイドは、Stitch MCP の認証がすでに完了していることを前提としています。始めるには、セットアップと認証ガイド をご覧ください。

どのコーディングエージェントを使うか？

お好きなコーディングエージェントを使用できます。Stitch MCP サーバーは、リモート HTTP MCP サーバーをサポートするコーディングエージェントに統合できます。

これから作るもの

Stitch から React のコンポーネントシステムへ。プロンプトを書けば、Stitch のデザインから適切に構造化された React コンポーネント一式が得られます。

Stitch へのプロンプティング

Stitch のプロジェクトと、そのプロジェクト内の各画面を表示するよう求めるプロンプトを書きます。

PROMPT
ActionShow me my Stitch projects.
FormatList out each screen under each project and its screen id.

以下に示すようなレスポンスが表示されますが、内容は使用するツールやモデルの選択によって異なります。

1. Raffinato Coffee Store App
Created: Jan 14, 2026 • Desktop • Light Mode • Private

Screens (3):

- Home Menu
- Full Menu
- Checkout

各 Stitch プロジェクトには、一連の画面を含めることができます。デザインのコードと画像が含まれているのは、この画面です。

遊びのためのプロンプティング

MCP ツールの真髄は、文脈に応じたデータ取得と AI モデルの知能を組み合わせられる点にあります。Stitch プロジェクトを理解してもらうよう頼んだり、ローカルマシン上のコンテキストに基づいて新しいデザインやコードを生成するようエージェントに指示したりできます。あるいは、ただ楽しい質問を投げかけるだけでもかまいません。

PROMPT
For funTell me what my Stitch Projects say about me as a developer.

これはとても楽しいプロンプトです。実行して共有したくなったら、Twitter / X でぜひ声をかけてください。それでは、本題に戻りましょう。

コードのためのプロンプティング

エージェントが、どのプロジェクトまたは画面を扱いたいのかを把握すれば、コードや生成された画像にアクセスできます。

PROMPT
Project + ScreenDownload the HTML code for the Full Menu screen in the Raffinato project.
Tool GuidanceUse a utility such as curl -L
ActionCreate a file named ./tmp/${screen-name}.html with the HTML code.

HTML ファイルは、そのデザイン専用の Tailwind CSS 設定を含む完全な <html> ドキュメントです。

HTML から他の UI フレームワークへ

LLM は、HTML をさまざまな UI システムに変換するのが得意です。この HTML ファイルが出発点となります。エージェントにプロンプトを出すことで、HTML を React、Vue、Handlebars に変換できるだけでなく、Flutter や Jetpack Compose のような Web プラットフォーム以外の UI フレームワークにも変換できます。

画像のためのプロンプティング

上記と同様に、エージェントに Stitch 画面の画像を依頼できます。

PROMPT
Project + ScreenDownload the image for the Full Menu screen in the Raffinato project.
Tool GuidanceUse a utility such as curl -L
ActionCreate a file named ./tmp/${screen-name}.png containing the image.

これで画像のローカルコピーが手に入ります。ただし、まだ大したことは起きていません。そこで、一気に進めて、画面全体を React コンポーネントに変換しましょう。

Stitch MCP でエージェントスキルを使う

多くのコーディングエージェントは Agent Skill Open Standard をサポートしています。スキルは、指示ベースのプロンプトと、MCP サーバーの特定のツール呼び出しなどのリソース一式をまとめたものです。このスキルというパラダイムは、Stitch MCP から React コンポーネントシステムを生成するのに最適です。

React コンポーネントシステムを作成する

add-skill ライブラリを使うと、GitHub の URL から直接、よく使われるコーディングエージェントにエージェントスキルをインストールできます。

npx add-skill google-labs-code/stitch-skills --skill react:components --global

このスキルは、どの Stitch ツールを使うか、実行する手順、React コンポーネントを分割する際のベストプラクティスをエージェントに伝えます。具体的な動作を確認したい場合は、Stitch Agent Skills の GitHub リポジトリ をご覧ください。

インストールが完了したら、このスキルを呼び出すプロンプトを書いて、作業を任せることができます。

PROMPT
Skill TriggerConvert the Landing Page screen in the Podcast Project.

エージェントが作業を進め、Vite のローカルサーバーで動作する React アプリを仕上げてくれます。

原文: https://stitch.withgoogle.com/docs/mcp/guide/

本ページは Google Stitch 公式ドキュメントの翻訳です。原文の著作権は Google LLC に帰属します。本サイトは独立した非公式の翻訳です。

← 前へMCP セットアップ次へ →リファレンス