Communitygithub.com

Stitch MCP

コードエージェントをGoogle Stitchに接続し、画面のHTMLとスクリーンショットを読み取ってプロジェクトのフレームワークで再構築できるようにします。

Stitch MCP とは？

Stitch MCP（npmパッケージ `@_davideast/stitch-mcp`）は、Google Stitch が生成するUI画面をコードベースに取り込むためのブリッジです。これは独立したオープンソースプロジェクトであり、Stitchをコーディングエージェント（Claude Code、Cursor、VS Code、Codex、Gemini CLI等）のMCPサーバーとして登録し、画面のマークアップを単一のツール呼び出しで取得できるようにします。さらに、画面のプレビューやAstroプロジェクトへのエクスポートも可能です。このスキルは、ユーザーが「このStitch画面を実装して」「StitchをClaude Code/Cursor/Codexに接続して」といったリクエストをした際に、認証方式（APIキーまたはOAuth）、接続方法（プロキシ経由またはダイレクトHTTP）、各クライアントの設定方法、エージェントが実行できる非対話型フラグ、ツールの入出力、そしてトラブルシューティング方法をカバーします。実際の作業は、取得した静的なHTMLページをプロジェクトのフレームワークに合ったコンポーネントに変換し、デザイントークンやデータレイヤーにマッピングするプロセスです。

対応✓Claude Code✓Codex CLI✓Cursor✓Antigravity✓Gemini CLI✓OpenCode
npx skills add https://github.com/TerminalSkills/skills/tree/HEAD/skills/stitch-mcp
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Stitch MCP は何をしますか？

概要

Google Stitch は、プロンプトからUI画面を生成し、各画面をHTMLドキュメントとスクリーンショットとして保存します。stitch-mcp（npmパッケージ @_davideast/stitch-mcp、独立したオープンソースプロジェクト）は、コードベースへのブリッジです。これは3つの役割を果たします: コーディングエージェントにStitchをMCPサーバーとして登録する、エージェントが画面のマークアップを単一の呼び出しで取得できるヘルパーツールを追加する、画面をプレビューしたりAstroプロジェクトとしてエクスポートする。以下の情報はバージョン0.9.0で確認したものです。フラグが拒否された場合は、任意のコマンドを --help 付きで実行してください。

エージェントの実際の作業はフェッチ後に始まります: Stitchの出力は画面ごとに1つの静的なHTMLページであり、それをリポジトリに適合するコンポーネントに変換するのが仕事です。

手順

1. 開始点を確認する

以下の順序で質問するか、調べてください:

  • どのMCPクライアントが使用されているか（Claude Code、Cursor、VS Code、Codex、OpenCode、Gemini CLI、Antigravity）、および stitch サーバーがすでに登録されているかどうか。
  • ユーザーがStitch APIキーを持っているかどうか。持っていない場合、セットアップはブラウザと課金が有効なプロジェクトが必要なGoogle Cloud OAuthを経由します。
  • Stitchプロジェクトと実装する画面。プロジェクトIDは 7302915846120394175 のような長い数字です。画面IDは32桁の16進数文字列です。表示名は受け付けられません。
  • リポジトリから読み取るターゲットスタック: フレームワーク、スタイリングシステム、既存のコンポーネントとデザイントークン。ReactとTailwindを決して想定しないでください。

2. 認証方法を選択する

モード提供方法選択する状況
APIキー環境変数 STITCH_API_KEY、.env ファイル、またはMCPサーバーの env ブロックデフォルト。ヘッドレス、CI、SSH経由で動作し、更新の必要なし
ウィザード経由のOAuthinit が独自のgcloud SDKを ~/.stitch-mcp/ にダウンロードしてサインインユーザーがキーを持っていないが、Google Cloudプロジェクトを所有している場合
既存のgcloud経由のOAuthSTITCH_USE_SYSTEM_GCLOUD=1 と以下の3つのコマンドgcloudがすでにインストールされ、サインインしている場合

既存のgcloudルート。ブラウザを開くため、ユーザーが実行します:

gcloud auth application-default login
gcloud config set project orchard-design-prod
gcloud beta services mcp enable stitch.googleapis.com --project=orchard-design-prod

キーが存在しない場合、CLIはOAuthを想定します。チェック実行では、クリーンなマシンで doctor を実行すると、何かを報告する前に約500 MBのgcloud SDKが ~/.stitch-mcp/ にフェッチされるため、キールートを意図する場合は最初にキーをエクスポートしてください。

3. 接続方法を選択する

プロキシ経由 stdioダイレクト HTTP
クライアントが起動するものnpx @_davideast/stitch-mcp proxy を子プロセスとしてなし。https://stitch.googleapis.com/mcp を呼び出す
エージェントが使用できるツールStitch自身のツール + ステップ6の4つのヘルパーStitch自身のツールのみ
OAuthトークンの有効期間プロキシが自動更新1時間、その後手動で交換
適している状況インタラクティブなデザイン→コードセッションプロセスを起動できないパイプラインやサンドボックス

具体的な理由がない限りプロキシを選択してください: get_screen_code がないと、エージェントは get_screen を呼び出し、ダウンロードURLを見つけて、自分でマークアップをフェッチする必要があります。

4. サーバーを登録する

Claude Code、シェル環境から取得したAPIキーを使用したプロキシ:

claude mcp add stitch -e STITCH_API_KEY="$STITCH_API_KEY" -- npx @_davideast/stitch-mcp proxy

Claude Code、ダイレクトHTTP（-s user は ~/.claude.json に書き込み、-s project は ./.mcp.json に書き込みます）:

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp \
  --header "X-Goog-Api-Key: $STITCH_API_KEY" -s user

Cursor（.cursor/mcp.json）とAntigravityは同じ形式を共有します。このバリアントはOAuthを使用するため、ファイルに秘密情報は含まれず、コミットしても安全です:

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": { "STITCH_PROJECT_ID": "orchard-design-prod" }
    }
  }
}

APIキールートの場合、env ブロックには代わりに STITCH_API_KEY が含まれます。そのファイルはバージョン管理の対象外にするか、クライアントの環境変数補間機能を使用してください。

他のクライアントでの違い:

  • VS Code（.vscode/mcp.json）: トップレベルのキーは servers で、各エントリに "type": "stdio"（または "type": "http" と url、headers）が必要です。
  • Codex（~/.codex/config.toml）: [mcp_servers.stitch] テーブルに command = "npx" と args = ["@_davideast/stitch-mcp", "proxy"]。変数は [mcp_servers.stitch.env] の下に配置します。
  • OpenCode（opencode.json）: "mcp": { "stitch": { "type": "local", "command": ["npx", "@_davideast/stitch-mcp", "proxy"], "environment": { } } }。
  • Antigravity（ダイレクトモードのみ）: フィールドは serverUrl であり、url ではありません。
  • Gemini CLI: gemini extensions install https://github.com/gemini-cli-extensions/stitch。

npx @_davideast/stitch-mcp init は、プロンプトを通じて同じ設定を書き込みます。-c, --client（claude-code、cursor、vscode、codex、opencode、gemini-cli、antigravity）と -t, --transport（stdio または http）を受け付けてそのうちの2つをスキップできますが、ウィザードであることに変わりはありません。エージェントシェルから実行するのではなく、ユーザーに渡してください。

MCP設定を変更した後は、クライアントを再起動してください。

5. 使用前に確認する

npx @_davideast/stitch-mcp doctor --verbose   # 機械可読な結果を取得するには --json を追加
npx @_davideast/stitch-mcp tool               # CLIがアクセスできる全てのツールを一覧表示

doctor は、モードに応じて以下をチェックします: キーの存在、キーがAPIに受け入れられるか、gcloud 400.0.0以降、ユーザーがサインインしているか、アプリケーションデフォルト認証情報、アクティブなプロジェクト、APIに到達可能か。tool の一覧に build_site が含まれていれば、ヘルパーツールが利用可能です。

6. 画面を見つけて取得する

いくつかのコマンドはターミナルUIを開き、エージェントシェルでハングします: init、screens、view、および --routes やそのJSONフラグのない site。代わりに以下を使用してください:

npx @_davideast/stitch-mcp tool list_projects -o json
npx @_davideast/stitch-mcp site -p 7302915846120394175 --list-screens
npx @_davideast/stitch-mcp tool get_screen_code -o json \
  -d '{"projectId":"7302915846120394175","screenId":"c41f0a9e7d2b4c6385a1f09b3e7d5a12"}'

site --list-screens は { success, projectId, screens: [{ screenId, title, suggestedRoute, hasHtml }] } を出力します。hasHtml: false の画面は、まだ取得するマークアップがありません。

ツールソース入力返されるもの
list_projects、get_projectStitchなし / name（projects/ID）アカウントが開けるプロジェクト
list_screens、get_screenStitchprojectId / name（projects/ID/screens/SCREEN_ID）メタデータとダウンロードURL（マークアップではありません）
generate_screen_from_text、edit_screens、generate_variantsStitchプロンプト駆動プロジェクト内の新規または変更された画面
get_screen_codeプロキシprojectId、screenId{ screenId, projectId, htmlContent }
get_screen_imageプロキシprojectId、screenId{ screenId, projectId, imageContent }、base64エンコードされたスクリーンショット
build_siteプロキシprojectId、{ screenId, route } の routes[]{ success, pages: [{ screenId, route, title, html }], message }
list_toolsプロキシなし名前、説明、入力スキーマ

tool NAME -s は任意のツールの入力スキーマを出力します。-f, --data-file はJSON本文をファイルから読み取り、-o は json、pretty（デフォルト）、raw を受け付けます。

7. マークアップをプロジェクトコードに変換する

  1. 各画面について get_screen_code と get_screen_image を取得します。HTMLには正確な色、間隔、フォントスタックが含まれています。画像は結果がどのように見えるべきかを示します。
  2. ファイルを書き込む前に、画面間で繰り返されるもの（ナビゲーション、フッター、ボタン、カード）を棚卸しし、それぞれを既存のコンポーネントまたは新しい共有コンポーネントにマッピングします。
  3. 生の値をプロジェクトのトークンにマッピングします。テーマ変数と一致する16進数カラーはその変数になります。一回限りの値はリテラルのままにし、引き継ぎノートにリストアップします。
  4. セマンティックな要素、実際のリンクとフォームコントロール、そしてハードコードされたサンプルコンテンツの代わりにプロジェクトのデータレイヤーを使用して構造を再構築します。
  5. 実行中のページをデザインの幅でスクリーンショットと比較し、次にスマートフォンの幅で比較し、意図的な逸脱をすべて報告します。

create_project、delete_project、およびデザインシステムツールはユーザーのStitchアカウントを変更します。これらはユーザーが明示的に要求した場合にのみ呼び出し、デザインを実装する結果として呼び出さないでください。

8. エージェントなしでプレビューまたはエクスポートする

コマンド目的知っておくべきフラグ
serve -p IDローカルのViteサーバー、/screens/ の下に画面ごとに1つのURL--list-screens はパスをJSONとして出力します。--json はヘッドレスで起動し、サーバーの準備ができたらJSONを出力します
site -p ID画面からルートへのマップからAstroプロジェクトを書き出します-o DIR 出力フォルダー。-r JSON はマップを指定してUIをスキップします。-e はマップを build_site の入力として出力します
upload -p ID -f FILEPNG、JPG、WEBP、またはHTMLファイルを新しい画面として追加します--title
proxyMCPサーバー自体--debug は /tmp/stitch-proxy-debug.log にログを記録します
logoutOAuthサインインを取り消します--force、--clear-config（最初にユーザーに確認します: バンドルされたgcloud設定を削除します）

Astroの出力には src/layouts/Layout.astro、src/pages/ の下にルートごとに1つのファイル、ダウンロードされたアセットが public/assets/ に含まれます。npm install && npm run dev でポート4321で起動します。

例

例1: 既存のNext.jsアプリに1つのStitch画面を実装する

Ilse Brandt は、予約アプリ（Next.js App Router、tailwind.config.ts にトークンを持つTailwind）を管理しています。彼女はClaude Codeを使用しており、シェルプロファイルにStitch APIキーを持っており、「StitchプロジェクトからPricing画面を実装して」と依頼します。

claude mcp add stitch -e STITCH_API_KEY="$STITCH_API_KEY" -- npx @_davideast/stitch-mcp proxy
npx @_davideast/stitch-mcp site -p 7302915846120394175 --list-screens

一覧には {"screenId":"c41f0a9e7d2b4c6385a1f09b3e7d5a12","title":"Pricing","suggestedRoute":"/pricing","hasHtml":true} と表示されます。クライアントを再起動した後、エージェントはこれらのIDで get_screen_code と get_screen_image を呼び出し、次に以下を報告します:

画面: Pricing (c41f0a9e…5a12) -> app/pricing/page.tsx
再利用: components/SiteHeader.tsx、components/Button.tsx (バリアント "primary")
作成: components/pricing/PlanCard.tsx、components/pricing/BillingToggle.tsx
トークン: #1F6F5C -> colors.brand.600; 24px カード間隔 -> gap-6; 44px 見出しは text-[44px] のまま
意図的に変更: プラン価格はサンプル値の代わりに lib/plans.ts から読み込む
確認済み: 1440px と 390px をスクリーンショットと比較。トグルはキーボード操作可能

例2: ヘッドレスシェルから3つの画面をAstroサイトとしてエクスポートする

Tomasz Wrona はビルドホストにSSHで接続して作業しており、ターミナルUIを介さずにStitchプロジェクトから静的なマーケティングサイトを取得したいと考えています。キーはすでにセッションにエクスポートされています。

npx @_davideast/stitch-mcp site -p 5518204776390142068 --list-screens > screens.json
npx @_davideast/stitch-mcp site -p 5518204776390142068 -o ./harbour-site -r '[
  {"screenId":"0b7e3c915ad84f2e9c6d1a8f4e2b7c30","route":"/"},
  {"screenId":"9a2d6f1c4b8e47a3b5c0e7d19f3a6b48","route":"/services"},
  {"screenId":"e5c81b07d3f24a69a1b4c92d6e0f7a15","route":"/contact"}
]'
cd harbour-site && npm install && npm run build

結果: src/pages/index.astro、services.astro、contact.astro が共有レイアウトでラップされ、画像とフォントは public/assets/ の下に配置されます。エージェントは次に、3つのページで重複しているヘッダーとフッターのマークアップをそれぞれ1つのAstroコンポーネントに置き換え、2つのルートがパスを共有しない可能性があること、および不明な画面IDがビルドを中止し、欠落しているIDがリストされることをメモします。

ガイドライン

  • OAuth下での「Permission Denied」応答は、通常、次の3つのいずれかを意味します: 課金がオフ、プロジェクトでStitch APIが有効になっていない、またはアカウントにOwnerまたはEditorロールがない。doctor --verbose でHTTPエラーが表示されます。
  • 2つのgcloudインストールはよくある落とし穴です。バンドルされたものは ~/.stitch-mcp/config/ に認証情報を保持します。システムのgcloudでサインインしても、STITCH_USE_SYSTEM_GCLOUD=1 が設定されていない限り、バンドルされたものには影響しません。
  • CLIが読み取るその他の変数: STITCH_ACCESS_TOKEN（別の場所で取得したトークン）、STITCH_PROJECT_ID または GOOGLE_CLOUD_PROJECT（プロジェクトの上書き）、STITCH_HOST（代替エンドポイント）。
  • WSL、SSH、コンテナでは、OAuthリンクが開かれる代わりに表示されます。ユーザーはそれをブラウザにコピーします。APIキーを使用すればこの問題を完全に回避できます。
  • snapshot は、データファイルからCLI自身のターミナル画面をレンダリングするためのものです。Stitchのデザインを保存したりバージョン管理したりするものではありません。レコードが必要な場合は、フェッチしたHTMLをリポジトリに保持してください。
  • フェッチしたHTMLはデザインリファレンスとして扱ってください。そのままページに貼り付けると、インラインスタイル、リモートのフォントや画像URLが含まれ、アクセシビリティは考慮されていません。
  • 共有設定でパッケージ（@_davideast/[email protected]）を固定し、すべてのチームメイトとCIが同じツールセットを実行するようにしてください。このプロジェクトは実験的であり、Googleとは関係ありません。
  • 実装後のビジュアルポリッシュパスには、このスキルを impeccable および frontend-design スキルと組み合わせて使用してください。
  • デザインがFigmaや静的なモックアップ画像として存在する場合、またはユーザーが生成されたデザインを実装せずに欲しい場合には、適切なツールではありません。後者の場合、StitchのWeb UIで十分です。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

TerminalSkills/skills

>- Assists with using Bun as an all-in-one JavaScript/TypeScript runtime, package manager, bundler, and test runner. Use when building HTTP servers, managing packages, running tests, or migrating from Node.js. Trigger words: bun, bun serve, bun install, bun test, bun build, javascript runtime, bun runtime.

TerminalSkills/skills

>- You are an expert in AG2 (formerly AutoGen), the open-source multi-agent conversation framework. You help developers build systems where multiple AI agents collaborate through structured conversations — with tool use, human-in-the-loop, code execution, group chat orchestration, and nested conversations — for complex tasks like software development, research, and data analysis.

TerminalSkills/skills

>- You are an expert in Chi, the lightweight, idiomatic Go HTTP router built on `net/http`. You help developers build composable HTTP services using Chi's middleware stack, route groups, URL parameters, sub-routers, and context-based request scoping — providing Express-like ergonomics while staying 100% compatible with Go's standard library.

TerminalSkills/skills

When the user wants to perform load testing, stress testing, or performance testing of APIs and websites using k6. Also use when the user mentions "k6," "load test," "performance test," "stress test," "spike test," "soak test," "thresholds," "virtual users," or "VUs." For browser-based testing, see selenium.

TerminalSkills/skills

>- Build and manage monorepos with Nx. Use when a user asks to set up a monorepo, manage multiple packages/apps, cache builds, run affected tests, or migrate from Lerna.

TerminalSkills/skills

>- Installs Python packages, creates virtual environments, locks dependencies and manages Python versions with one fast command-line tool that replaces pip, pip-tools, pipx, poetry, pyenv and virtualenv. Use when a user asks to set up a Python project, add or upgrade a dependency, create a lockfile, migrate from requirements.txt, run a script with inline dependencies, install a Python version, run a tool with uvx, or speed up installs in CI and Docker.

TerminalSkills/skills

>- You are an expert in E2B, the cloud platform for running AI-generated code in secure sandboxes. You help developers give AI agents the ability to execute code, install packages, read/write files, and run long processes in isolated cloud environments — each sandbox is a lightweight VM that boots in ~150ms with full Linux, filesystem, and networking.

TerminalSkills/skills

>- Build and extend 3D building editor apps using Pascal Editor's architecture (React Three Fiber + Zustand scene graph). Use when: building 3D architectural tools, creating BIM-like editors, extending Pascal Editor with custom features, building floor plan generators.

TerminalSkills/skills

>- Programmatic video creation with React using Remotion. Use when a user asks to create videos with code, generate personalized videos, build animated data visualizations, add TikTok-style captions, render video programmatically, or automate video production. Supports CLI rendering, AWS Lambda, and Google Cloud Run deployment.

TerminalSkills/skills

>- Generate short-form videos with AI — script writing, text-to-speech narration, stock footage selection, subtitle generation, and video assembly. Use when: creating TikTok/YouTube Shorts/Reels content, automating video production, building content pipelines.

TerminalSkills/skills

>- You are an expert in dlt, the open-source Python library for building data pipelines. You help developers load data from any API, file, or database into warehouses and lakes using simple Python decorators — with automatic schema inference, incremental loading, and built-in data contracts. dlt is the "requests library for data pipelines.

TerminalSkills/skills

>- Self-host customer support with Chatwoot. Use when a user asks to set up open-source customer support, add live chat without SaaS costs, build a multi-channel inbox, or deploy a free Intercom alternative.

TerminalSkills/skills

>- Add live chat and customer support with Crisp. Use when a user asks to add a chat widget, implement live customer support, set up a help desk, create a knowledge base, or add a chatbot to a website.

TerminalSkills/skills

>- Track website analytics with Umami — privacy-focused, open-source Google Analytics alternative. Use when someone asks to "track website analytics", "Umami", "privacy-friendly analytics", "self-hosted analytics", "GDPR analytics", "replace Google Analytics", or "website traffic tracking without cookies". Covers setup, event tracking, custom properties, API, and self-hosting.

TerminalSkills/skills

>- Build and customize websites with Tilda — zero-code website builder with advanced customization. Use when someone asks to "build a website with Tilda", "Tilda Publishing", "customize Tilda site", "Tilda API", "landing page builder", "no-code website", "Tilda custom code", or "integrate Tilda with external services". Covers block-based building, custom HTML/CSS/JS, Tilda API, form handling, e-commerce, and integrations.

TerminalSkills/skills

>- Sync files and directories with rsync. Use when a user asks to copy files between servers, sync directories, create incremental backups, deploy files to a remote server, or mirror directories efficiently.

TerminalSkills/skills

>- Create, optimize, and manage YouTube content for channel growth, audience building, and monetization. Use when someone asks to "grow on YouTube", "optimize YouTube videos", "YouTube SEO", "YouTube Shorts strategy", "YouTube API integration", "automate YouTube uploads", "YouTube analytics", "YouTube thumbnail", or "YouTube content strategy". Covers long-form video, Shorts, SEO, thumbnail design, YouTube Data API, analytics, monetization, and growth strategies.

TerminalSkills/skills

>- Animate 3D objects and characters in Blender with Python. Use when the user wants to keyframe properties, create armatures and rigs, set up IK/FK chains, animate shape keys for facial animation, edit F-Curves, use the NLA editor to blend actions, add drivers for expression-based animation, or script any animation workflow in Blender.

TerminalSkills/skills

When the user wants to edit, review, or improve existing marketing copy. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this better,' or 'copy sweep.' This skill provides a systematic approach to editing marketing copy through multiple focused passes.

TerminalSkills/skills

>- Transcribe YouTube videos to text using OpenAI Whisper and yt-dlp. Use when the user wants to get a transcript from a YouTube video, generate subtitles, convert video speech to text, create SRT/VTT captions, or extract spoken content from YouTube URLs.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community