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 نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit

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

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "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 أخرى لتحقيق نتائج 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✓ تم النسخ

الأدوات

ما يوفره هذا الـ 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