Google Stitch AIプラットフォーム対応！零設定でクロスプラットフォームの設計コード画像を迅速に生成・抽出するMCPツール

Stitch MCP

Stitch MCPは、Google Stitch AIデザインプラットフォーム用の汎用MCPサーバーで、MCP互換のエディターでAIを通じてUI/UXデザインコードと画像を迅速に生成および抽出でき、ゼロ設定とクロスプラットフォーム使用をサポートします。

開発者ツール人工知能チャットボット #UIデザイン #AI生成 #フロントエンド開発 #デザインツール .JavaScript

スコア : 2.5ポイント

ダウンロード数 : 15.9K

更新時間 : 2026-03-12

サイトを開く

Stitch MCPとは？

Stitch MCPは、Google Stitchデザインプラットフォームの機能をあなたのAIプログラミングアシスタント（Cursor、Claudeなど）に接続するブリッジツールです。このサーバーを通じて、AIにStitchプラットフォームを直接操作させることができます。新しいUIデザインの生成、既存デザインのスタイルシステムの抽出、デザインコードとスクリーンショットのダウンロードなどが可能です。

Stitch MCPの使い方は？

Stitch MCPを使用するには、次の3つの簡単な手順が必要です。1) Google CloudでStitch APIを有効にする；2) ローカル認証を設定する；3) AIエディターにMCPサーバーの設定を追加する。これらの手順を完了すると、自然言語指令でAIアシスタントにStitchデザインプラットフォームを操作させることができます。

適用シーン

Stitch MCPは、以下のシーンに特に適しています。迅速なプロトタイプデザイン、デザインの一貫性の維持、既存デザインからのデザインシステムの抽出、チーム協力によるデザイン、AI支援によるUI/UX開発ワークフロー。フロントエンド開発者、UIデザイナー、製品マネージャーのいずれも、このツールを使って作業効率を向上させることができます。

主要機能

デザインDNA抽出

既存の画面デザインをスマートに分析し、フォント、色、レイアウトなどのデザイン要素を抽出し、再利用可能なデザインシステムを形成します。

テキストからのデザイン生成

自然言語の記述に基づいて新しいUIデザインを生成し、既存のデザインコンテキストに基づいてスタイルの一貫性を維持します。

コード抽出

Stitchプラットフォームから直接デザインに対応するHTML/CSS/フロントエンドコードをダウンロードし、デザインからコードへのシームレスな変換を実現します。

高解像度スクリーンショット

デザインの高解像度スクリーンショットを取得し、ドキュメント、デモ、またはさらなる分析に使用します。

プロジェクト管理

Stitchプロジェクトを作成、一覧表示、管理し、デザイン作業空間を整理します。

画面管理

プロジェクト内の各デザイン画面を閲覧、表示、管理し、詳細なメタデータを取得します。

利点

ゼロ設定：一度ログインすると、すべてのMCP互換エディターで使用できます。

クロスプラットフォーム：Windows、macOS、Linuxシステムを完全にサポートします。

完全無料：Google Stitch APIは現在無料で使用でき、追加コストはかかりません。

シームレスな統合：主流のAIエディター（Cursor、Claudeなど）と深く統合されています。

デザインの一貫性：デザインDNAの抽出により、複数のページでスタイルを統一します。

制限

Google Cloudアカウントとプロジェクトの設定が必要です。

Google Stitchサービスの可用性に依存します。

初期設定には基本的なコマンドライン操作の知識が必要です。

デザイン生成の品質はStitchプラットフォームの能力に制限されます。

使い方

Google Cloudの設定

Google Cloudにログインし、Stitch APIサービスを有効にします。Google Cloudプロジェクトがあり、正しいプロジェクトIDが設定されていることを確認してください。

ローカル認証の設定

stitch - mcpサーバーにアプリケーションのデフォルト認証を設定し、Googleサービスにアクセスできるようにします。

AIエディターの設定

使用しているAIエディターに応じて、stitch - mcpサーバーをMCP設定に追加します。以下はClaude Desktopの設定例です。

使用開始

AIエディターを再起動すると、自然言語指令でStitch MCPのすべての機能を使用できます。

使用例

デザインの一貫性を維持する

既存のアプリに新しいページを追加する必要がある場合、まず既存ページのデザインシステムを抽出し、そのシステムを基に新しいページを生成することで、視覚的なスタイルを統一することができます。

迅速なプロトタイプデザイン

製品マネージャーまたはデザイナーは、自然言語の記述で迅速にUIプロトタイプを生成でき、手動での描画やコーディングは必要ありません。

デザインからコードへの変換

デザイナーがデザインを完了した後、開発者は直接フロントエンドコードを抽出し、開発プロセスを加速することができます。

デザインシステムドキュメント

チームは既存のアプリのデザイン要素を抽出し、チームが参照するためのデザインシステムドキュメントを作成することができます。

よくある質問

Stitch MCPは無料ですか？

使用するためにプログラミング知識が必要ですか？

どのAIエディターをサポートしていますか？

デザイン生成の品質はどの程度ですか？

デザインの一貫性をどのように確保しますか？

デザインを他のツールにエクスポートできますか？

🚀 Stitch MCP

Google Stitch用の汎用MCPサーバーで、AIを使って素敵なUI/UXデザインを瞬時に構築できます。Cursor、Claude、Antigravity、およびMCP互換のエディターとシームレスに連携します。

🚀 クイックスタート

この仕組み

Stitch Flowchart

この素敵な点

ゼロコンフィグ: 一度ログインするだけで、どこでも動作します。
汎用性: Windows、Mac、Linuxで動作します。
無料: Google Stitch APIは無料で使用できます。

クイックセットアップ (2分)

1. 前提条件: Google Cloud

Stitch APIを有効にしたGoogle Cloudプロジェクトが必要です。

# Google Cloudにログイン
gcloud auth login

# プロジェクトを設定 (実際のプロジェクトIDに置き換えてください)
gcloud config set project YOUR_PROJECT_ID
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

# 有効化
gcloud beta services mcp enable stitch.googleapis.com

2. 認証情報のインストール

これにより、stitch-mcpがあなたの代わりにGoogleと通信する権限が付与されます。

gcloud auth application-default login

3. AIエディターに追加

これをMCP設定ファイルにコピーして貼り付けてください。

Claude Desktopの場合: ~/Library/Application Support/Claude/claude_desktop_config.json

Cursorの場合: 設定 > MCP > 新しいサーバーを追加

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp"],
      "env": {
         "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

✨ 利用可能なツール

ツール名	機能
`extract_design_context`	🧠 画面をスキャンして「デザインDNA」（フォント、色、レイアウト）を抽出します。スタイルを統一するために使用します。
`fetch_screen_code`	💾 画面の生のHTML/フロントエンドコードをダウンロードします。
`fetch_screen_image`	🖼️ 画面の高解像度スクリーンショットをダウンロードします。
`generate_screen_from_text`	✨ あなたのプロンプト（およびコンテキスト）に基づいて新しい画面を生成します。
`create_project`	📁 新しいワークスペース/プロジェクトフォルダを作成します。
`list_projects`	📋 利用可能なすべてのStitchプロジェクトをリストします。
`list_screens`	📱 特定のプロジェクト内のすべての画面をリストします。
`get_project`	🔍 特定のプロジェクトの詳細を取得します。
`get_screen`	ℹ️ 特定の画面のメタデータを取得します。