Bu makale Penpot'un sponsorluğundadır Penpot dosyanızın, tasarımın kendisine ek olarak, bu simgelerin hepsini olmasa da bazılarını kullanan tam bir simge seti içerdiğini hayal edin. Claude veya Gemini gibi bir yapay zekadan yalnızca kullanılan simgeleri dışa aktarmasını isteseydiniz bunu yapamazdı. Penpot dosyalarıyla etkileşime giremez. Ancak bir Penpot MCP sunucusu bunu yapabilir. Özellikle Penpot'un kapsamlı bir API'ye sahip olması ve hatta açık kaynak olması nedeniyle, belirlenmiş kurallar ve izinler altında özenle seçilmiş sayıda işlemi gerçekleştirebilir. Yapay zekanın görevi basitçe niyetinizi anlamak, MCP sunucusunun gerçekleştireceği doğru işlemi seçmek (bu durumda bir dışa aktarma) ve tüm parametreleri (ör. kullanılan simgeler) iletmektir. MCP sunucusu daha sonra bunu yapılandırılmış bir API isteğine çevirir ve yürütür. Yapay zekayı bir restoranda siparişinizi alan bir sunucu, MCP sunucusunu hem menü hem de şef olarak ve API isteğini (umarız) sıcak bir tabakta sıcak bir pizza pastası olarak düşünmek yardımcı olabilir. Tam olarak neden MCP sunucuları? Penpot niyetinizi anlayamıyor çünkü bu bir LLM değil ve Penpot verilerinizin güvenliği ve gizliliği için üçüncü taraf LLM'lerin Penpot dosyalarınızla etkileşime girmesine izin vermiyor. Penpot MCP sunucuları güvenli bir köprü görevi görse de, Penpot dosyalarınızı ve verilerinizi bağlam olarak kullanarak AI amacını API isteklerine dönüştürür. Daha da iyisi, Penpot tasarımın kod olarak ifade edilmesi yaklaşımını benimsediği için tasarımların programlı olarak ayrıntılı düzeyde oluşturulabilmesi, düzenlenebilmesi ve analiz edilebilmesidir. Diğer MCP sunucularının sunduklarıyla karşılaştırıldığında daha bağlamsal, daha spesifik ve dolayısıyla daha güçlü ve kimsenin gerçekten istediğini düşünmediğim 'Açıkla → Oluştur' alt başlığındaki AI iş akışından çok daha düşünceli. Penpot'un yapay zeka teknik incelemesi bunu kötü bir yaklaşım, 'Koda Dönüştürme' yaklaşımını ise çirkin bir yaklaşım olarak tanımlıyor; oysa MCP sunucuları daha gelişmiş ve uyarlanabilir. Özellikler ve Teknik Detaylar Kullanım örneklerine geçmeden önce, Penpot MCP sunucularının nasıl çalıştığını daha detaylı açıklayan bazı özellikler ve teknik ayrıntılar aşağıda verilmiştir:
MCP standartlarına uygundur; Gerçek zamanlı tasarım verileri için Penpot API'si ile bütünleşir; Bir Python SDK'sı, REST API'si, eklenti sistemi ve CLI araçları içerir; MCP özellikli herhangi bir yapay zeka asistanıyla çalışır (VS Code'da Claude, Cursor'da Claude, Claude Desktop vb.); Tasarım bağlamını yapay zeka modelleriyle paylaşmayı ve onların bileşenleri görmesine ve anlamalarına olanak sağlamayı destekler; Doğal dili kullanarak Penpot ile iletişimi kolaylaştırır.
O halde MCP sunucuları Penpot'ta ne yapmamızı sağlayabilir ve mevcut deneyler halihazırda neyi başarmıştır? Bir göz atalım. Penpot MCP Sunucusu Kullanım Durumları Sadece Penpot MCP sunucularının neler yapabileceğine geçmek istiyorsanız, Penpot'un Google Drive'da saklanan, izlemeye fazlasıyla değer birkaç MCP demosu vardır. Penpot CEO'su Pablo Ruiz-Múzquiz, 03, 04, 06, 08 ve 12 numaralı videoların favorileri olduğunu belirtti. MCP sunucularını özetlemenin daha da hızlı bir yolu, Penpot Fest 2025'in açılışını izlemektir. Aksi takdirde, Penpot'un halka açık sergisinde sergilediği daha rafine örneklere bir göz atalım. Tasarımdan Kodlamaya ve Tekrar Geri Dönme (ve Daha Fazlası) Daha önce Penpot tasarımlarının kod olarak nasıl ifade edildiğine dair söylediklerimden yola çıkarak, bu, MCP sunucularının yapay zeka kullanarak tasarımı koda dönüştürmek için kullanılabileceği, aynı zamanda koddan tasarıma, tasarımdan dokümantasyona, dokümantasyondan tasarım sistemi öğelerine, tasarımdan tekrar söz konusu tasarım sistemine dayalı koda ve ardından söz konusu tasarım sistemine dayalı tamamen yeni bileşenlere dönüştürmek için kullanılabileceği anlamına gelir. Gerçeküstü gibi görünüyor, ancak aşağıdaki demo bu dönüştürülebilirliği gösteriyor ve bu, belirsiz talimatlardan değil, nasıl ifade edildiklerine (tasarım, kod veya dokümantasyon) bakılmaksızın önceki tasarım seçimlerinden kaynaklanıyor. Sürpriz yok; bunlar yalnızca önceki kararlara dayanarak zaten vereceğiniz ve hızlı bir şekilde uygulamaya koyacağınız kararlardır. Demoda, Penpot Tasarımcısı Juan de la Cruz García, bazı basit bileşenleri sürtünmesiz bir şekilde belgelere, tasarım sistemi öğelerine, koda, yeni bileşenlere ve hatta bir Play-Doh parçası gibi eksiksiz bir Hikaye Kitabı projesine dönüştürüyor: Tasarımdan Koda, Tasarım/Kod Doğrulama ve Basit İşlemler Aşağıdaki benzer demoda, Oraios AI Kurucu Ortağı Dominik Jain, ön uç stillerini güncellemeden önce tasarıma dayalı bir Node.js web uygulaması oluşturur, tutarlılık açısından kontrol etmeden önce tasarımdan koda sorunsuz çeviri sağlamak için adları ve tanımlayıcıları belleğe kaydeder,Penpot'ta seçilen şeklin yanına yorum yapın ve ardından Penpot'taki bir karalamayı uyarlanmış bir bileşenle değiştirin. Burada çok şey oluyor, ancak Dominik'in Claude Desktop'a tam olarak ne yazdığını ve Claude'un yanıtlarını görebilirsiniz ve bu çok sağlamdır: Bu arada, önceki demoda VS Code'da Claude kullanılmıştı, dolayısıyla Penpot MCP sunucularının LLM'den bağımsız olduğunu belirtmeliyim. Teknoloji yığınınız tamamen size kalmış. IvanTheGeek, MCP sunucusunu JetBrains Rider IDE ve Junie AI ile kurmayı başardı. Daha Fazla Kullanım Alanı Herhangi bir Penpot tasarım belirtecinden yararlanırken bir Penpot panosunu üretime hazır semantik HTML ve modüler CSS'ye çevirin (Penpot tasarımlarının zaten kod olarak ifade edildiğini unutmayın, dolayısıyla bu karanlıkta bir çekim değildir): Mevcut HTML'yi değiştirmeden etkileşimli bir web prototipi oluşturun: Daha önce gösterildiği gibi, mevcut tasarım ve/veya tasarım sistemi öğelerinden yararlanarak bir karalamayı bir bileşene dönüştürün: Bir Penpot dosyasından tasarım sistemi dokümantasyonu oluşturun: İşte Penpot ve topluluktan bazı kullanım örnekleri:
Gelişmiş ihracatlar, Doğal dili kullanarak tasarım öğelerini arayın, Doğal dili kullanarak harici API'lerden veri çekin, Penpot'u diğer harici araçlara kolayca bağlayın, Tekrarlanan görevlerin hafızaya kaydedilmesi ve yürütülmesi, Görsel regresyon testi, Tasarım tutarlılığı ve artıklık kontrolü, Erişilebilirlik ve kullanılabilirlik analizi ve geri bildirimi, Tasarım sistemi uygunluk kontrolü, Kılavuzlara uygunluk kontrolü (marka, içerik vb.), Tasarım analitiği ile benimseme ve kullanımı izleyin, Dokümantasyonun tasarımla otomatik olarak senkronize olmasını sağlayın, Dosya organizasyonunu tasarlayın (örn. etiketleme/kategorizasyon).
Temel olarak, Penpot MCP sunucuları, seçtiğiniz LLM/LLM istemcisinin verimliliği ve kolaylığı sayesinde, ancak verilerinizi ona göstermeden sonsuz sayıda iş akışına yol açar. MCP Sunucularını Ne İçin Kullanırsınız? Penpot MCP sunucuları beta aşamasında bile değil ancak parçası olabileceğiniz aktif bir deney. Penpot kullanıcıları MCP sunucularının kullanım alanlarını araştırmaya başladı ancak Penpot daha fazlasını görmek istiyor. Yeni nesil tasarım araçlarının genel olarak tasarımcıların, geliştiricilerin ve ürün ekiplerinin ihtiyaçlarını karşıladığından emin olmak için bunların, özellikle yapay zeka söz konusu olduğunda, kolektif ve işbirliği içinde oluşturulması gerekir. Not: Penpot, Penpot'un MCP Sunucusunu keşfetmeye, denemeye ve iyileştirmeye yardımcı olmaya istekli beta testçileri arıyor. Katılmak için support@penpot.app adresine "MCP beta test gönüllüsü" konu satırıyla yazın. Mevcut araçların yeterince iyi, yeterince hızlı yapamadığı veya hiç yapamadığı Penpot MCP sunucularının yapabileceğini düşündüğünüz bir şey var mı? Burada bir Penpot MCP sunucusunun nasıl kurulacağını öğrenebilir ve bugün tamir etmeye başlayabilirsiniz veya beyniniz zaten fikirlerle dolup taşıyorsa, Penpot tartışmaya katılmanızı, geri bildiriminizi paylaşmanızı ve kullanım senaryolarınız hakkında konuşmanızı ister. Alternatif olarak, hemen aşağıdaki yorum bölümü de başlamak için kötü bir yer değil!
