freemcplab / Annuaire / Playground / Stitch MCP

● Communauté davideast ⚡ Instantané

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.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

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

Démo en direct

Aperçu en pratique

prêt

Installer

Choisissez votre client

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

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

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

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

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

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

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

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

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

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Stitch MCP

Turn a Stitch screen into production React

👤 Developers ⏱ ~15 min intermediate

Quand l'utiliser : You finished a screen in Stitch and want a PR-ready component.

Déroulement

Pull design

stitch_get_active_design; inspect tree.✓ Copié

→ Tree loaded
Map tokens

Map Stitch tokens to your tailwind config.✓ Copié

→ Token map ready
Generate

Generate React component using your project's conventions.✓ Copié

→ Component file ready

Résultat : Component lives in your repo with your tokens, not pasted Stitch CSS.

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

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✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
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

Coût et limites

Coût d'exécution

Quota d'API: Stitch API quota applies
Tokens par appel: Design trees are mid-size
Monétaire: Free MCP; Stitch usage applies
Astuce: Strip out hidden layers before generating code — keeps token count down

Sécurité

Permissions, secrets, portée

Portées minimales : stitch:read

Stockage des identifiants : Stitch API token in env

Sortie de données : stitch.google.com

Dépannage

Erreurs courantes et correctifs

Design returns empty

Confirm the right Stitch project is active in your account

Generated code uses Stitch tokens

Provide a token-mapping config first

Alternatives

Stitch MCP vs autres

Alternative	Quand l'utiliser	Compromis
figma MCP	Source is Figma	Different design tool

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills