Claude Code ve Cursor için en iyi tasarım MCP sunucuları

Tasarım MCP sunucusu, bir kodlama ajanının Model Context Protocol aracılığıyla tasarımları okumasına, kullanıcı arayüzü referanslarını aramasına veya ekranlar üretmesine olanak tanır. Mevcut bir Figma tasarımı için Figma ile başlayın. Referans araması için Mobbin'i kullanın. Düzenlenebilir bir projede yeni mobil uygulama ekranları oluşturmak için Sleek, tam olarak bu iş için tasarlanmış bir seçenektir.

Bu karşılaştırma, sekiz sağlayıcının Claude Code ve Cursor için belgelediği özellikleri ve kurulum yöntemlerini kapsar. Kaynakları 28 Eylül 2026 tarihinde kontrol ettik. Sleek'in geliştiricisi biziz. Aşağıdaki öneriler, uygulamalı testlere dayanan bir çıktı kalitesi sıralamasına değil, her entegrasyonun ne yaptığına dayanmaktadır.

Tasarım MCP sunucusu nedir?

Tasarım MCP sunucusu, bir tasarım ürününün araçlarını yapay zekâ istemcisine sunar. Kodlama ajanı, sizden her detayı sohbete kopyalamanızı istemeden bu araçları çağırabilir ve veri ya da görsel alabilir. Protokol bağlantıyı sağlar; sunucu ise kodlama ajanının bir dosyayı okuyup okuyamayacağını, bir kataloğu arayıp arayamayacağını veya bir tasarımı değiştirip değiştiremeyeceğini belirler.

Barındırılan bir sunucu bir URL üzerinden bağlanır. Yerel bir entegrasyon ise bilgisayarınızdaki yazılıma bağlanır. İki etiket de sunucunun ekran oluşturup oluşturamayacağını söylemez. Bir sunucu seçmeden önce kullanılabilir işlemleri kontrol edin.

Tasarım MCP sunucuları nasıl karşılaştırılır?

Figma, tasarımın Figma'da bulunması gerektiği durumlarda kullanışlıdır. Mobbin mevcut ürünlerden referanslar sağlar. Stitch ve Sleek barındırılan ekran üretme iş akışları sunarken Pencil ve Paper bir kodlama ajanını yerel tuvale bağlar. Bazı özellikler örtüştüğü için en uzun araç listesi yerine ihtiyacınız olan çıktıyı ve iş akışını seçin.

Aşağıdaki tüm erişim detayları Eylül 2026 itibarıyla günceldir. Sağlayıcı kaynakları ve istemci talimatları tablonun ardından gelmektedir.

Tablo, üretim ile referans alımını birbirinden ayırır. Bir arama sonucu, bir kodlama ajanının ödeme akışı desenini anlamasına yardımcı olabilir; ancak uygulamanız için yeni bir ödeme ekranı değildir.

Figma MCP sunucusu ne yapar?

Figma MCP, yerleşim, değişkenler ve bileşenler dâhil olmak üzere geliştirme için tasarım bağlamı sağlar. Uzak sunucu ayrıca desteklenen istemcilerin Figma'nın kendi nesnelerini oluşturmasına ve düzenlemesine olanak tanır. Bir Figma tasarım dosyasını temel alarak çalışmak veya dosyaya içerik eklemek istediğinizde bunu kullanın. Masaüstü sunucusu ise yerel tasarım bağlamını okumak için kullanılabilir durumda kalmaya devam eder.

Figma'nın yardım merkezi, tüm plan ve kullanıcı lisansları için uzak erişimi, ücretli Dev veya Full kullanıcı lisansları için masaüstü erişimini ve beta süresince ücretsiz tuval yazımını listeler. Erişim sınırsız değildir: Figma'nın istek sınırı sayfası, Starter planına ayda 20 okuma aracı çağrısına kadar izin verir; ücretli Dev ve Full kullanıcı lisansları için daha yüksek limitler sunar.

Komutlar 2026-09-28 tarihinde kontrol edildi.

Uzak kurulum kılavuzu bu Claude Code eklentisini önerir:

claude plugin install figma@claude-plugins-official

Veya yalnızca sunucuyu ekleyin:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Claude Code'da /mcp komutunu açın ve kimlik doğrulamasını tamamlayın. Cursor için aynı kılavuz, kodlama ajanı sohbetinde şu komutu belirtir:

/add-plugin figma

Masaüstü yöntemi için Figma'nın Dev Mode inceleme panelinde MCP sunucusunu etkinleştirin. Masaüstü kılavuzu şu Claude Code komutunu verir:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Cursor'ın masaüstü yapılandırması şöyledir:

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Bir çerçeve bağlantısını yapıştırın ve kodlama ajanından bunu uygulamasını isteyin. Düzen zaten belirlendiğinde bu en net başlangıç noktasıdır. Uzak sunucunun yazma araçları, doğrudan Figma'da içerik oluşturmanız gerektiğinde de onu bir seçenek haline getirir.

Google Stitch MCP sunucusu ne yapar?

Google Stitch, Stitch projeleriyle çalışmak ve metinden ekran üretmek için barındırılan bir MCP bağlantısı sağlar. Elde edilen tasarım bir Stitch projesinde kalır. Google'ın tasarım üreticisini kodlama ajanları aracılığıyla kullanmak ve aynı iş akışının bir parçası olarak ekran verilerini almak isteyen geliştiriciler için uygundur.

Stitch MCP kurulum kılavuzu, API anahtarı ve OAuth kimlik doğrulamasını belgeler. API anahtarı yöntemi Stitch ayarlarından alınan bir anahtarı kullanır. Resmî Stitch SDK'sı da uzak uç noktayı, üretimi ve ekran HTML'i ile görsellerinin alınmasını belgeler.

Kurulum kılavuzundaki API anahtarı yapılandırmasını kullanan Claude Code:

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Cursor, .cursor/mcp.json dosyasında:

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Yer tutucuyu kendi anahtarınızla değiştirin ve bu dosyayı sürüm kontrolünün dışında tutun. Bir toplu işlem planlamadan önce Stitch hesabınızdaki güncel sınırları kontrol edin. Kurulum sayfası bir bağlantı kılavuzudur.

Mobbin MCP sunucusu ne yapar?

Mobbin MCP, kodlama ajanının gerçek ürün arayüzlerini aramasına ve ekran görselleri almasına olanak tanır. Bir akış tasarlamadan veya henüz karar vermediğiniz bir deseni uygulamadan önce kullanışlıdır. Belgelenmiş araçları mevcut materyalleri arar; yeni bir uygulama tasarımı üretmez. Çıktı, bir sonraki karar için referans materyalidir.

Mobbin'in tanıtımı, OAuth desteğini ve Pro, Team ile Enterprise planlarındaki erişimi doğrular. Araç listesi ekranları, akışları ve web sitesi bölümlerini kapsar. Yüksek çözünürlüklü görsel URL'lerinin süresi 30 gün sonra dolar.

Mobbin'in Claude Code kılavuzu, doğrulanmış bağlayıcının önce Claude Desktop'ta veya web'de kurulmasını tercih eder. Ayrıca yalnızca CLI kullanan şu alternatifi de belgeler:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Ardından /mcp komutunu açın, Mobbin'i seçin ve kimlik doğrulamasını yapın.

Cursor için sağlayıcının kurulum adımları, bir JSON kod parçacığı yerine Marketplace eklentisini kullanır:

1. Cursor Marketplace'te Mobbin eklentisini açın ve Add to Cursor seçeneğini belirleyin.
2. Add Plugin seçeneğini belirleyin.
3. Cursor'da Customize, ardından Installed ve ardından Mobbin bölümünü açın.
4. Authenticate seçeneğini belirleyin ve giriş yapın.

Banka uygulamalarındaki ilk kullanım ekranları gibi somut bir referans isteyin. Bir üreticiden veya kodlama ajanından kendi akışınızı uygulamasını istemeden önce kullanışlı desenleri seçin.

Sleek MCP sunucusu ne yapar?

Sleek MCP, bir kodlama ajanının bir Sleek projesinde düzenlenebilir iOS ve Android uygulama ekranları üretmesini sağlar. Kodlama ajanı ekran HTML'ini alabilir, ekranları görsel olarak sunabilir ve inceleme için bir proje bağlantısı döndürebilir. Tasarım brifiniz ile kodlama ajanının yazmasını istediğiniz kod arasındaki eksik adım mobil uygulama tasarımı olduğunda bunu kullanın.

Sleek MCP README dosyası, barındırılan bir sunucuyu, OAuth ile oturum açmayı ve Figma ile kod dışa aktarımlarını belgeler. Sleek'in ekran setini bir bütün olarak planlayabilmesi için kodlama ajanına tüm uygulama brifini tek bir mesajda verin. Üretim, çalışma alanı kredilerini harcar; okuma ve mevcut ekranları görsel olarak sunma harcamaz.

Claude Code:

claude mcp add --transport http sleek https://sleek.design/api/mcp

Önce /mcp komutunu açın, Sleek'i seçin ve tarayıcıda kimlik doğrulamasını tamamlayın. Cursor için tek bir proje için .cursor/mcp.json veya tüm projeler için ~/.cursor/mcp.json dosyasına aşağıdakileri ekleyin:

{
  "mcpServers": {
    "sleek": {
      "url": "https://sleek.design/api/mcp"
    }
  }
}

Sunucuyu etkinleştirin ve giriş yapın. README, OAuth kullanılmasını önerir; API anahtarları ise bunu destekleyemeyen istemciler için bir yedektir.

Ücretsiz hesaplar API'yi bir defaya mahsus verilen 60 krediyle deneyebilir. Herkese sunulan abonelik planları arasında sürekli API ve kodlama ajanı erişimi Starter değil, Pro veya Team planı gerektirir. Pro planı, Eylül 2026 itibarıyla aylık 20.000 krediyle aylık $69 veya yıllık $360'tır. Figma ve kod dışa aktarımları her plana dâhildir; Free planda dışa aktarımlar kilitli olmayan ekranlarla sınırlıdır.

MCP README dosyası, yeni ekran başına yaklaşık 30 kredi ve düzenleme başına 5 ila 30 kredi tahmin etmektedir. Proje başına aynı anda yalnızca tek bir tasarım çalıştırması aktif olabilir. design çağrısı 270 saniyeye kadar bekler ve gerekirse işlemin sürdüğünü bildiren bir durum yanıtı döndürür; kodlama ajanı, tasarım brifini tekrar göndermek yerine get_design_run işlevini sorgulamalıdır.

Sleek, tasarımlar ve dışa aktarılabilir kullanıcı arayüzü kodu üretir. Kodlama ajanınızın yine de uygulamanın verilerini ve davranışını bağlaması ve React Native veya SwiftUI ile geliştirme yapıyorsanız ekran kodunu uyarlaması gerekir. Bir REST API iş akışını tercih ediyorsanız Claude Code UI tasarım skill'leri kılavuzu, Sleek'in ayrı skill kurulumunu açıklar.

ScreensDesign MCP sunucusu ne işe yarar?

ScreensDesign MCP, iOS uygulama araştırmasını ekran üretimiyle birleştirir. Servisin MCP sayfasında, Eylül 2026 itibarıyla en çok gelir getiren 2.715'ten fazla uygulamanın yer aldığı bir kütüphane, eksiksiz UX akışları, gelir sinyalleri ve bu referanslardan ekran üreten araçlar sunuluyor. Mevcut mobil kalıpları inceleyerek işe başlayan bir brief için uygundur.

MCP erişimi ScreensDesign Pro gerektirir. Barındırılan sunucu, OAuth veya belirli izinlere sahip API anahtarlarını destekler. Claude Code için HTTP uç noktasını ekleyin ve /mcp üzerinden kimlik doğrulamasını yapın:

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

Cursor için bunu .cursor/mcp.json dosyasına ekleyin ve ardından sunucuya bağlanın:

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

Hesabınıza özel yapılandırma için sağlayıcının kurulum rehberini kullanın. Gelir sinyalleri yalnızca referans uygulamaları tanımlar; bir ekranı kopyalamanın uygulamanızın dönüşüm oranını artıracağını kanıtlamaz.

AIDesigner MCP sunucusu ne işe yarar?

AIDesigner MCP, mobil veya masaüstü ekran boyutları için Tailwind destekli HTML/CSS tasarımları üretir ve bunları iyileştirir. Depo bağlamını kullanabilir ve sonuçları tuvalinde paylaşabilir. Mevcut projenize uygun arayüz kodu üretmek istediğinizde bu aracı tercih edin. Çıktıyı projeye uygulamadan önce inceleyin.

Resmî kurulum rehberi, sunucuyu ve ajan talimatlarını yapılandıran bir CLI sunar. Claude Code için bunu projenizin kök dizininde çalıştırın:

npx -y @aidesigner/agent-skills init

Cursor için ortamı açıkça belirtin:

npx -y @aidesigner/agent-skills init cursor

Her ikisi de https://api.aidesigner.ai/api/v1/mcp adresine bağlanır. OAuth ile giriş işlemini istemcinin MCP panelinden tamamlayın. Üretim işlemi hesap kredilerini kullanır; ardı ardına varyasyonlar çalıştırmadan önce kredi hakkınızı kontrol edin. Dokümante edilen çıktı, eksiksiz bir yerel mobil uygulama değil, arayüz HTML'idir.

Pencil MCP sunucusu ne yapar?

Pencil, yeni adıyla pen.dev, bir kodlama ajanını masaüstü uygulamasında veya IDE uzantısında açık olan .pen belgesine bağlar. Kodlama ajanı, siz aynı dosyada çalışırken bu tuvali inceleyebilir ve değiştirebilir. Bu, kod deposunun yanında bir tasarım belgesi ve etkileşimli bir yerel düzenleme iş akışı isteyen geliştiriciler için uygundur.

Yapay zekâ entegrasyonu belgeleri, uygulamaya yerel bir stdio bağlantısını tanımlar. Kurulum kılavuzu, taşınabilir bir URL yerine şu Claude Code adımlarını sağlar:

1. pen.dev içinde bir .pen belgesi açın.
2. Settings bölümünü, ardından MCP bölümünü açın ve Claude Code CLI'yı etkinleştirin.
3. Claude Code'u başlatın veya yeniden başlatın.
4. /mcp komutunu çalıştırın ve pencil sunucusunun bağlı olduğunu doğrulayın.

Cursor için belgelenmiş IDE uzantısı yolunu kullanın:

1. Extensions bölümünü açın ve pen.dev kelimesini arayın.
2. Uzantıyı yükleyin.
3. Bir .pen dosyası oluşturun veya açın.

Fiyatlandırma sayfası, Eylül 2026 itibarıyla pen.dev uygulamasının şu anda ücretsiz olduğunu belirtmektedir. Bu durum, ayrı kodlama ajanı aboneliğinizi kapsamaz. Bu MCP iş akışı için belgeyi açık tutun; tahmin edilen bir barındırma uç noktası veya başkasının bilgisayarından kopyalanan bir ikili dosya yolu kullanmayın.

Paper MCP sunucusu ne yapar?

Paper MCP, bir kodlama ajanının HTML ve CSS ile oluşturulmuş bir Paper tasarım belgesini okumasına ve düzenlemesine olanak tanır. Paylaşımlı tuval iş akışını destekler: Kodlama ajanı tasarımı değiştirir, siz incelersiniz ve kodlama ajanı uygulama aşamasında sonucu kullanabilir. Bu belge işlemleri için Paper Desktop uygulamasının açık bir dosya ile çalışıyor olması gerekir.

Paper MCP kılavuzu, bu eklenti kurulumlarını belgeler. Önce Paper Desktop'ı yükleyin ve açın. Claude Code için şu komutu çalıştırın:

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

Ardından Claude Code'u açın ve /mcp komutunu kontrol edin. Cursor için kodlama ajanı panelinde şu komutu çalıştırın:

/add-plugin paper-desktop

Sunucu görünmezse Cursor penceresini yeniden yükleyin. Paper'ın eski localhost HTTP yapılandırması hâlâ çalışır, ancak mevcut eklentiler Paper CLI'yı kullanır. CLI, Desktop kapalıyken araçları sunabilir; ancak belge okuma ve yazma işlemleri hâlâ uygulamanın açık olmasını gerektirir.

Paper'ın fiyatlandırma sayfası, Eylül 2026 itibarıyla Free planda haftalık 100 MCP çağrısı ve Pro planda haftalık 1 milyon çağrı listeler. Pro planı editör başına aylık $20 veya yıllık faturalandırıldığında editör başına aylık $16'dır. Araç çağrısı limiti bir ekran sayısı değildir: Bir tasarım görevi birden fazla çağrı içerebilir.

Hangi tasarım MCP sunucusunu kullanmalısınız?

Mevcut bir Figma tasarımını uygulamak için Figma'yı, referans bulmak için Mobbin'i ve inceleyip dışa aktarabileceğiniz bir projede mobil ekranlar üretmek için Sleek'i kullanın. Stitch, barındırılan diğer bir üretim seçeneğidir. Aynı tasarım belgesi üzerinde çalışan bir kodlama ajanı ve yerel bir tasarım tuvali kullanmak istediğinizde Pencil veya Paper'ı seçin.

Öncelikli işinizle başlayın. Ekip arkadaşınız size zaten bir Figma çerçevesi teslim ettiyse ikinci bir üretici, ihtiyacınız olmayabilecek ek bir tasarım kararı yaratır. Elinizde bir düzen yoksa üretimden önce ekranda nelerin yer alması gerektiğine karar vermenize referanslar yardımcı olabilir. Yeni bir mobil uygulama brifi için kodlama ajanınızı Sleek'e bağlayın ve uygulamaya geçmeden önce elde edilen ekranları inceleyin. Free denemesi yaklaşık bir tasarım çalıştırmasını kapsar; Pro ise sürekli kullanımı destekler.

Mevcut marka kurallarını tasarım brifinin bir parçası olarak kodlama ajanına verin. DESIGN.md kütüphanesi, bu araçlarla birlikte kullanabileceğiniz yazılı tasarım yönlendirmeleri sunar; bu, MCP bağlantısından ayrı bir girdidir.

Kodlama ajanı entegrasyonlarının ötesindeki seçenekler için yapay zekâ destekli mobil uygulama tasarım araçları sıralaması ve Claude Design alternatifleri sayfalarına göz atın.

Sıkça sorulan sorular