freemcplab / ディレクトリ / プレイグラウンド / Stitch MCP

● コミュニティ davideast ⚡ 即起動

Stitch MCP

Name: Stitch MCP MCP Server
Author: davideast

Bridge between Google Stitch's AI design canvas and your real codebase — Claude reads the design and writes React/Vue/SwiftUI for it.

Stitch is Google's AI UI design tool. Stitch MCP lets Claude pull the active Stitch design (layout tree, tokens, generated assets) and translate it into your project's component conventions, instead of you copy-pasting screenshots.

▶ デモを見る 📦 インストール 💡 ユースケース

なぜ使うのか

主な機能

Pull current Stitch design as a structured tree
Maps Stitch tokens to your design-system tokens
Outputs React / Vue / Svelte / SwiftUI
Round-tripping: edit code, sync changes back as notes
Image-asset export with naming conventions

ライブデモ

実際の動作

準備完了

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

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

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

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

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "stitch-mcp",
      "command": "npx",
      "args": [
        "-y",
        "stitch-mcp"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "stitch-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "stitch-mcp"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add stitch-mcp -- npx -y stitch-mcp

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： Stitch MCP

Turn a Stitch screen into production React

👤 Developers ⏱ ~15 min intermediate

使うタイミング： You finished a screen in Stitch and want a PR-ready component.

フロー

Pull design

stitch_get_active_design; inspect tree.✓ コピーしました

→ Tree loaded
Map tokens

Map Stitch tokens to your tailwind config.✓ コピーしました

→ Token map ready
Generate

Generate React component using your project's conventions.✓ コピーしました

→ Component file ready

結果： Component lives in your repo with your tokens, not pasted Stitch CSS.

組み合わせ

他のMCPと組み合わせて10倍の力を

stitch-mcp + shadcn-ui-mcp

Map Stitch components onto your shadcn primitives

Combine stitch-mcp with shadcn-ui-mcp: Map Stitch components onto your shadcn primitives✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
get_active_design	(see docs)	Fetch current Stitch design tree	1 call
export_assets	(see docs)	Export image assets with names	1 call
map_tokens	(see docs)	Map Stitch tokens to a target token system	1 call

コストと制限

運用コスト

APIクォータ: Stitch API quota applies
呼び出しあたりのトークン: Design trees are mid-size
金額: Free MCP; Stitch usage applies
ヒント: Strip out hidden layers before generating code — keeps token count down

セキュリティ

権限、シークレット、影響範囲

最小スコープ： stitch:read

認証情報の保管： Stitch API token in env

データ送信先： stitch.google.com

トラブルシューティング

よくあるエラーと対処法

Design returns empty

Confirm the right Stitch project is active in your account

Generated code uses Stitch tokens

Provide a token-mapping config first

代替案

Stitch MCP 他との比較

代替案	代わりに使う場面	トレードオフ
figma MCP	Source is Figma	Different design tool

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る