freemcplab / Diretório / Playground / Stitch MCP

● Comunidade davideast ⚡ Instantâneo

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.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

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

Demo ao vivo

Como fica na prática

pronto

Instalar

Escolha seu cliente

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

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

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

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

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

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

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

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

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

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

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

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Stitch MCP

Turn a Stitch screen into production React

👤 Developers ⏱ ~15 min intermediate

Quando usar: You finished a screen in Stitch and want a PR-ready component.

Fluxo

Pull design

stitch_get_active_design; inspect tree.✓ Copiado

→ Tree loaded
Map tokens

Map Stitch tokens to your tailwind config.✓ Copiado

→ Token map ready
Generate

Generate React component using your project's conventions.✓ Copiado

→ Component file ready

Resultado: Component lives in your repo with your tokens, not pasted Stitch CSS.

Combinações

Combine com outros MCPs para 10× de alavancagem

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✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
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

Custo e limites

O que custa rodar

Cota de API: Stitch API quota applies
Tokens por chamada: Design trees are mid-size
Monetário: Free MCP; Stitch usage applies
Dica: Strip out hidden layers before generating code — keeps token count down

Segurança

Permissões, segredos, alcance

Escopos mínimos: stitch:read

Armazenamento de credenciais: Stitch API token in env

Saída de dados: stitch.google.com

Solução de problemas

Erros comuns e correções

Design returns empty

Confirm the right Stitch project is active in your account

Generated code uses Stitch tokens

Provide a token-mapping config first

Alternativas

Stitch MCP vs. outros

Alternativa	Quando usar	Troca
figma MCP	Source is Figma	Different design tool

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills