Artikel ini disponsori oleh Penpot Bayangkan file Penpot Anda berisi kumpulan ikon lengkap selain desain itu sendiri, yang menggunakan beberapa tetapi tidak semua ikon tersebut. Jika Anda meminta AI seperti Claude atau Gemini untuk mengekspor hanya ikon yang sedang digunakan, itu tidak akan bisa dilakukan. Itu tidak dapat berinteraksi dengan file Penpot. Namun, server Penpot MCP bisa. Ia dapat melakukan sejumlah operasi yang dipilih sendiri berdasarkan aturan dan izin yang ditetapkan, terutama karena Penpot memiliki API yang luas dan terlebih lagi karena bersifat open-source. Tugas AI hanyalah memahami maksud Anda, memilih operasi yang tepat untuk dilakukan server MCP (dalam hal ini ekspor), dan meneruskan parameter apa pun (yaitu, ikon yang sedang digunakan). Server MCP kemudian menerjemahkannya menjadi permintaan API terstruktur dan menjalankannya. Mungkin bermanfaat untuk menganggap AI sebagai server di restoran yang menerima pesanan Anda, server MCP sebagai menu dan koki, dan permintaan API sebagai (mudah-mudahan) pai pizza panas di piring hangat. Mengapa tepatnya server MCP? Ya, Penpot tidak dapat memahami maksud Anda karena ini bukan LLM, juga tidak mengizinkan LLM pihak ketiga berinteraksi dengan file Penpot Anda demi keamanan dan privasi data Penpot Anda. Meskipun server Penpot MCP bertindak sebagai jembatan aman, menerjemahkan maksud AI ke dalam permintaan API menggunakan file dan data Penpot Anda sebagai konteks. Yang lebih baik lagi adalah karena Penpot menggunakan pendekatan desain yang dinyatakan sebagai kode, desain dapat dibuat, diedit, dan dianalisis secara terprogram pada tingkat yang terperinci. Ini lebih kontekstual, lebih khusus, dan karena itu lebih kuat dibandingkan dengan apa yang ditawarkan server MCP lainnya, dan jauh lebih bijaksana daripada alur kerja AI ‘Describe → Generate’ di bawah standar yang menurut saya tidak diinginkan oleh siapa pun. Whitepaper AI Penpot menggambarkan hal ini sebagai pendekatan yang buruk dan pendekatan 'Konversi ke Kode' sebagai pendekatan yang buruk, sedangkan server MCP lebih halus dan mudah beradaptasi. Fitur Dan Detail Teknis Sebelum kita beralih ke kasus penggunaan, berikut beberapa fitur dan detail teknis yang menjelaskan lebih lanjut cara kerja server Penpot MCP:
Sesuai dengan standar MCP; Terintegrasi dengan Penpot API untuk data desain waktu nyata; Termasuk Python SDK, REST API, sistem plugin, dan alat CLI; Bekerja dengan asisten AI berkemampuan MCP (Claude di VS Code, Claude di Cursor, Claude Desktop, dll.); Mendukung berbagi konteks desain dengan model AI, dan membiarkan mereka melihat dan memahami komponen; Memfasilitasi komunikasi dengan Penpot menggunakan bahasa alami.
Lalu, server MCP dapat melakukan apa di Penpot, dan apa yang telah dicapai oleh eksperimen yang ada? Mari kita lihat. Kasus Penggunaan Server Penpot MCP Jika Anda hanya ingin langsung melihat apa yang dapat dilakukan server Penpot MCP, Penpot memiliki beberapa demo MCP yang disimpan di Google Drive yang lebih dari layak untuk ditonton. CEO Penpot Pablo Ruiz-Múzquiz menyebutkan bahwa video 03, 04, 06, 08, dan 12 adalah favorit mereka. Cara yang lebih cepat untuk merangkum server MCP adalah dengan menyaksikan pembukaannya dari Penpot Fest 2025. Jika tidak, mari kita lihat beberapa contoh lebih baik yang ditunjukkan Penpot di pameran publik mereka. Desain-ke-Kode dan Kembali Lagi (dan Banyak Lagi) Berdasarkan apa yang saya katakan sebelumnya tentang bagaimana desain Penpot dinyatakan sebagai kode, ini berarti server MCP dapat digunakan untuk mengubah desain menjadi kode menggunakan AI, tetapi juga kode untuk mendesain, desain menjadi dokumentasi, dokumentasi untuk merancang elemen sistem, mendesain menjadi kode lagi berdasarkan sistem desain tersebut, dan kemudian komponen yang benar-benar baru berdasarkan sistem desain tersebut. Kedengarannya tidak nyata, namun demo di bawah ini menunjukkan kemampuan transmutabilitas ini, dan hal ini bukan berasal dari instruksi yang tidak jelas, melainkan dari pilihan desain sebelumnya, terlepas dari bagaimana hal tersebut diungkapkan (desain, kode, atau dokumentasi). Tidak ada kejutan — ini hanyalah keputusan yang akan Anda buat berdasarkan keputusan sebelumnya, dan dilaksanakan dengan cepat. Dalam demo tersebut, Juan de la Cruz García, Desainer di Penpot, dengan mudah mengubah beberapa komponen sederhana menjadi dokumentasi, elemen sistem desain, kode, komponen baru, dan bahkan proyek Buku Cerita lengkap seperti sepotong Play-Doh: Desain-ke-Kode, Validasi Desain/Kode, dan Pengoperasian Sederhana Dalam demo serupa di bawah ini, Dominik Jain, Salah Satu Pendiri Oraios AI, membuat aplikasi web Node.js berdasarkan desain sebelum memperbarui gaya frontend, menyimpan nama dan pengidentifikasi ke memori untuk memastikan terjemahan desain-ke-kode yang lancar sebelum memeriksa konsistensinya, menambahkan aberi komentar di sebelah bentuk yang dipilih di Penpot, lalu ganti coretan di Penpot dengan komponen yang disesuaikan. Ada banyak hal yang terjadi di sini, tetapi Anda dapat melihat dengan tepat apa yang diketik Dominik di Claude Desktop serta tanggapan Claude, dan ini sangat kuat: Omong-omong, demo sebelumnya menggunakan Claude di VS Code, jadi saya harus mencatat bahwa server Penpot MCP bersifat LLM-agnostic. Tumpukan teknologi Anda sepenuhnya terserah Anda. IvanTheGeek berhasil menyiapkan server MCP mereka dengan JetBrains Rider IDE dan Junie AI. Lebih Banyak Kasus Penggunaan Terjemahkan papan Penpot ke HTML semantik siap produksi dan CSS modular sambil memanfaatkan token desain Penpot apa pun (ingat bahwa desain Penpot sudah dinyatakan sebagai kode, jadi ini bukan pilihan yang tepat): Hasilkan prototipe web interaktif tanpa mengubah HTML yang ada: Seperti yang ditunjukkan sebelumnya, ubah coretan menjadi komponen, dengan memanfaatkan elemen desain dan/atau sistem desain yang ada: Buat dokumentasi sistem desain dari file Penpot: Dan berikut beberapa kasus penggunaan lainnya dari Penpot dan komunitas:
Ekspor lanjutan, Cari elemen desain menggunakan bahasa alami, Tarik data dari API eksternal menggunakan bahasa alami, Hubungkan Penpot dengan mudah ke alat eksternal lainnya, Menyimpan tugas yang berulang ke memori dan menjalankannya, Pengujian regresi visual, Konsistensi desain dan pemeriksaan redundansi, Analisis aksesibilitas dan kegunaan serta umpan balik, Pemeriksaan kepatuhan sistem desain, Pemeriksaan kepatuhan pedoman (merek, konten, dll.), Pantau adopsi dan penggunaan dengan analisis desain, Secara otomatis menjaga dokumentasi tetap sinkron dengan desain, Organisasi file desain (misalnya, penandaan/kategorisasi).
Pada dasarnya, server Penpot MCP memimpin alur kerja dalam jumlah tak terbatas berkat efisiensi dan kemudahan klien LLM/LLM pilihan Anda, tetapi tanpa memaparkan data Anda ke dalamnya. Untuk Apa Anda Menggunakan Server MCP? Server Penpot MCP bahkan belum berada pada tahap beta, tetapi ini merupakan eksperimen aktif yang dapat Anda ikuti. Pengguna Penpot sudah mulai menjelajahi kasus penggunaan server MCP, namun Penpot ingin melihat lebih banyak lagi. Untuk memastikan bahwa alat desain generasi berikutnya memenuhi kebutuhan desainer, pengembang, dan tim produk secara umum, alat tersebut harus dibangun secara kolektif dan kolaboratif, terutama dalam hal AI. Catatan: Penpot sedang mencari penguji beta yang ingin menjelajahi, bereksperimen, dan membantu menyempurnakan Server MCP Penpot. Untuk bergabung, tulis ke support@penpot.app dengan baris subjek “Relawan uji beta MCP.” Adakah yang menurut Anda dapat dilakukan oleh server Penpot MCP namun alat yang ada saat ini tidak mampu melakukannya dengan cukup baik, cukup cepat, atau tidak mampu melakukannya sama sekali? Anda dapat mempelajari cara menyiapkan server Penpot MCP di sini dan mulai mengutak-atiknya hari ini, atau jika otak Anda sudah penuh dengan ide, Penpot ingin Anda bergabung dalam diskusi, berbagi masukan, dan membicarakan kasus penggunaan Anda. Atau, bagian komentar di bawah juga bukan tempat yang buruk untuk memulai!
