Penpot sedang menguji coba server MCP untuk mengaktifkan alur kerja desain berbasis AI – Beragampengetahuan

Artikel ini disponsori oleh Penpot

Bayangkan, selain desainnya sendiri, file Penpot Anda berisi kumpulan ikon lengkap, menggunakan beberapa tetapi tidak semua ikon. Jika Anda meminta AI seperti Claude atau Gemini untuk mengekspor hanya ikon yang digunakannya, itu tidak akan bisa dilakukan. Itu tidak dapat berinteraksi dengan file Penpot.

Namun, sebuah Server Penpot MCP mampu. Ia dapat melakukan serangkaian operasi yang dipilih dengan cermat berdasarkan aturan dan izin yang ditetapkan, terutama karena Penpot memiliki API yang luas dan yang lebih penting karena Penpot Sumber terbuka.

Tugas AI hanyalah memahami maksud Anda, memilih tindakan yang benar untuk dilakukan server MCP (dalam hal ini, mengekspor), dan meneruskan parameter apa pun (yaitu ikon yang digunakan). Server MCP kemudian mengubahnya menjadi permintaan API terstruktur dan menjalankannya.

Mungkin berguna untuk menganggap AI sebagai server di restoran yang menerima pesanan, server MCP sebagai menu dan koki, dan permintaan API sebagai (mudah-mudahan) pai pizza panas di piring panas.

Mengapa memilih server MCP? Ya, Penpot tidak dapat memahami niat Anda karena ini bukan LLM dan tidak mengizinkan LLM pihak ketiga berinteraksi dengan file Penpot Anda untuk memastikan keamanan dan privasi data Penpot Anda. Meskipun server Penpot MCP bertindak sebagai jembatan keselamatanmenggunakan file dan data Penpot sebagai konteks untuk menerjemahkan maksud AI ke dalam permintaan API.

Lebih baik lagi, karena Penpot membutuhkan Ekspresi desain sebagai metode kodedesain dapat dibuat, diedit, dan dianalisis secara terprogram pada tingkat yang terperinci. Ini lebih kontekstual, lebih spesifik, dan karena itu lebih kuat dibandingkan layanan yang disediakan oleh server MCP lainnya, dan jauh sekali Jauh lebih bijaksana daripada alur kerja AI “deskripsikan → hasilkan” yang menurut saya tidak diinginkan oleh siapa pun. Buku putih 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 detail fungsional dan teknis yang menjelaskan lebih lanjut cara kerja server Penpot MCP:

• Mematuhi standar MCP;
• Integrasikan dengan Penpot API untuk mendapatkan data desain waktu nyata;
• Termasuk Python SDK, REST API, sistem plug-in dan alat CLI;
• Dapat digunakan dengan asisten AI apa pun yang mendukung MCP (Claude di VS Code, Claude di Cursor, Claude Desktop, dll.);
• Mendukung berbagi konteks desain dengan model AI, memungkinkan mereka melihat dan memahami komponen;
• Gunakan bahasa alami untuk memfasilitasi komunikasi dengan Penpot.

Jadi, server MCP memungkinkan kita melakukan apa di Penpot? Hasil apa yang telah dicapai oleh eksperimen yang ada? Mari kita lihat.

Kasus Penggunaan Server Penpot MCP

Jika Anda hanya ingin memanfaatkan kemampuan server Penpot MCP, Penpot memiliki beberapa demo MCP yang disimpan di Google Drive yang layak untuk ditonton. CEO Penpot Pablo Ruiz-Múzquiz menyebut video 03, 04, 06, 08 dan 12 sebagai favorit mereka.

Cara yang lebih cepat untuk menyimpulkan server MCP adalah dengan menonton pembukaannya di Penpot Fest 2025.

Selain itu, mari kita lihat beberapa contoh lebih halus yang dipamerkan Penpot selama presentasi publiknya.

Dari desain hingga kode dan seterusnya (dan banyak lagi)

Melanjutkan apa yang saya katakan sebelumnya tentang bagaimana desain Penpot dinyatakan sebagai kode, artinya server MCP dapat digunakan untuk mengubah desain menjadi kode menggunakan AI, tetapi juga kode menjadi desain, desain menjadi dokumen, elemen sistem desain dokumen, desain menjadi kode lagi berdasarkan Berdasarkan sistem desain tersebut dan kemudian komponen yang benar-benar baru berdasarkan sistem desain tersebut.

Kedengarannya tidak nyata, tetapi demo di bawah menunjukkannya variabilitashal ini tidak berasal dari instruksi yang tidak jelas, namun dari pilihan desain sebelumnya, terlepas dari bagaimana hal tersebut diungkapkan (desain, kode, atau dokumentasi). Tidak ada kejutan – ini hanyalah keputusan yang Anda buat berdasarkan keputusan sebelumnya dan dilaksanakan dengan cepat.

Dalam demonya, desainer Penpot Juan de la Cruz García dengan mudah mengubah beberapa komponen sederhana menjadi dokumen, elemen sistem desain, kode, komponen baru, dan bahkan proyek Buku Cerita lengkap seperti Play-Doh:

Desain-ke-kode, desain/verifikasi kode, dan pengoperasian sederhana

Dalam demo serupa di bawah ini, salah satu pendiri Oraios AI, Dominik Jain, membuat aplikasi web Node.js berdasarkan desain sebelum memperbarui gaya front-end, menyimpan nama dan pengidentifikasi ke memori untuk memastikan kelancaran transisi dari desain ke kode, lalu memeriksa konsistensi, menambahkan anotasi di samping bentuk yang dipilih di Penpot, lalu mengganti 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 dan respons Claude, yaitu Sangat Kuat:

Ngomong-ngomong, demo sebelumnya menggunakan Claude di VS Code, jadi yang perlu saya perhatikan adalah Server Penpot MCP adalah LLM agnostik. Tumpukan teknologi Anda sepenuhnya terserah Anda. IvanTheGeek berhasil menyiapkan server MCP mereka menggunakan JetBrains Rider IDE dan Junie AI.

Lebih banyak kasus penggunaan

Ubah papan Penpot menjadi HTML semantik dan CSS modular yang siap produksi sambil memanfaatkan token desain Penpot apa pun (ingat, desain Penpot sudah dinyatakan sebagai kode, jadi ini bukan hanya tebakan):

Hasilkan prototipe web interaktif tanpa mengubah HTML yang ada:

Seperti disebutkan sebelumnya, manfaatkan elemen desain dan/atau sistem desain yang ada untuk mengubah coretan menjadi komponen:

Buat dokumen sistem desain dari file Penpot:

Berikut ini lebih banyak kasus penggunaan untuk Penpot dan komunitas:

• ekspor maju,
• Cari elemen desain menggunakan bahasa alami,
• Gunakan bahasa alami untuk mengekstrak data dari API eksternal,
• Hubungkan Penpot dengan mudah ke alat eksternal lainnya,
• Simpan tugas berulang ke dalam memori dan jalankan,
• pengujian regresi visual,
• Konsistensi desain dan pemeriksaan redundansi,
• Analisis aksesibilitas dan kegunaan serta umpan balik,
• Pemeriksaan kepatuhan sistem desain,
• Pemeriksaan kepatuhan pedoman (branding, konten, dll.),
• Pantau adopsi dan penggunaan melalui analisis desain,
• Secara otomatis menjaga dokumen dan desain tetap sinkron,
• Desain organisasi file (misalnya pemberian tag/kategorisasi).

Pada dasarnya, server Penpot MCP memimpin Jumlah alur kerja yang tidak terbatas Hal ini dicapai berkat efisiensi dan kemudahan penggunaan klien LLM/LLM yang Anda pilih tanpa memaparkan data Anda padanya.

Untuk apa Anda menggunakan server MCP?

Server Penpot MCP bahkan belum dalam versi beta, tapi ini a eksperimen aktif Anda bisa menjadi bagian darinya. Pengguna Penpot sudah menjelajahi kasus penggunaan server MCP, namun Penpot ingin melihat lebih banyak lagi. Untuk memastikan bahwa alat desain generasi berikutnya memenuhi kebutuhan kolektif para desainer, pengembang, dan tim produk, alat tersebut harus dibangun secara kolektif Dan secara kolaboratifkhususnya dalam kecerdasan buatan.

catatan: Penpot sedang mencari penguji beta yang ingin menjelajahi, bereksperimen, dan membantu meningkatkan server MCP Penpot. Untuk bergabung, silakan menulis ke support@penpot.app dengan subjek “Relawan uji beta MCP”.

Apakah menurut Anda server Penpot MCP dapat melakukan sesuatu yang tidak dapat dilakukan dengan cukup baik, cukup cepat, atau tidak dapat dilakukan oleh alat saat ini?

Anda dapat mempelajari cara menyiapkan server Penpot MCP di sini dan langsung mulai mengutak-atiknya, atau jika otak Anda sudah dipenuhi ide, Penpot ingin Anda bergabung dalam diskusi, membagikan masukan, dan mendiskusikan kasus penggunaan Anda. Atau, bagian komentar di bawah adalah tempat yang bagus untuk memulai!

Hasilkan $200 seminggu
Dikutip dari artikel di Smashing Magazine — Untuk Desainer dan Pengembang Web