freemcplab / Directorio / Playground / Stitch MCP

● Comunidad 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 qué usarlo

Características clave

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 en vivo

Cómo se ve en la práctica

listo

Instalar

Elige tu 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"
      ]
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

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

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

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

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

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

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

Añádelo a context_servers. Zed recarga en caliente al guardar.

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

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Stitch MCP

Turn a Stitch screen into production React

👤 Developers ⏱ ~15 min intermediate

Cuándo usarlo: You finished a screen in Stitch and want a PR-ready component.

Flujo

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.

Combinaciones

Combínalo con otros MCPs para multiplicar por 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✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
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

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Stitch API quota applies
Tokens por llamada: Design trees are mid-size
Monetario: Free MCP; Stitch usage applies
Consejo: Strip out hidden layers before generating code — keeps token count down

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: stitch:read

Almacenamiento de credenciales: Stitch API token in env

Salida de datos: stitch.google.com

Resolución de problemas

Errores comunes y soluciones

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 otros

Alternativa	Cuándo usarla	Contrapartida
figma MCP	Source is Figma	Different design tool

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills