Artikel ini ditaja oleh Penpot Bayangkan bahawa fail Penpot anda mengandungi set ikon penuh sebagai tambahan kepada reka bentuk itu sendiri, yang menggunakan beberapa tetapi bukan semua ikon tersebut. Jika anda meminta AI seperti Claude atau Gemini untuk mengeksport hanya ikon yang sedang digunakan, ia tidak akan dapat melakukannya. Ia tidak dapat berinteraksi dengan fail Penpot. Walau bagaimanapun, pelayan MCP Penpot boleh. Ia boleh melakukan beberapa operasi yang dipilih sendiri di bawah peraturan dan kebenaran yang ditetapkan, terutamanya kerana Penpot mempunyai API yang luas dan lebih-lebih lagi kerana ia adalah sumber terbuka. Tugas AI hanyalah untuk memahami niat anda, memilih operasi yang betul untuk pelayan MCP lakukan (eksport dalam kes ini), dan menyampaikan sebarang parameter (iaitu, ikon yang sedang digunakan). Pelayan MCP kemudian menterjemahkannya ke dalam permintaan API berstruktur dan melaksanakannya. Mungkin membantu untuk memikirkan AI sebagai pelayan di restoran yang menerima pesanan anda, pelayan MCP sebagai menu dan chef, dan permintaan API sebagai (mudah-mudahan) pai piza panas di atas pinggan hangat. Kenapa pelayan MCP, betul-betul? Nah, Penpot tidak dapat memahami niat anda kerana ia bukan LLM, dan juga tidak membenarkan LLM pihak ketiga berinteraksi dengan fail Penpot anda untuk keselamatan dan privasi data Penpot anda. Walaupun pelayan MCP Penpot bertindak sebagai jambatan selamat, menterjemahkan niat AI ke dalam permintaan API menggunakan fail dan data Penpot anda sebagai konteks. Apa yang lebih baik ialah kerana Penpot mengambil pendekatan reka bentuk yang dinyatakan sebagai kod, reka bentuk boleh dibuat, diedit dan dianalisis secara pemrograman pada tahap berbutir. Ia lebih kontekstual, lebih khusus, dan oleh itu lebih berkuasa berbanding dengan apa yang ditawarkan oleh pelayan MCP lain, dan jauh lebih bijak daripada aliran kerja AI subpar 'Huraikan → Jana' yang saya rasa tidak sesiapa pun benar-benar mahukan. Kertas putih AI Penpot menggambarkan ini sebagai pendekatan yang buruk dan pendekatan 'Tukar kepada Kod' sebagai pendekatan yang jelek, manakala pelayan MCP lebih halus dan boleh disesuaikan. Ciri-ciri Dan Butiran Teknikal Sebelum kita meneruskan kes penggunaan, berikut ialah beberapa ciri dan butiran teknikal yang menerangkan dengan lebih lanjut cara pelayan Penpot MCP berfungsi:
Mematuhi piawaian MCP; Bersepadu dengan API Penpot untuk data reka bentuk masa nyata; Termasuk Python SDK, REST API, sistem pemalam dan alatan CLI; Bekerja dengan mana-mana pembantu AI yang didayakan MCP (Claude dalam Kod VS, Claude dalam Kursor, Desktop Claude, dll.); Menyokong perkongsian konteks reka bentuk dengan model AI, dan membiarkan mereka melihat dan memahami komponen; Memudahkan komunikasi dengan Penpot menggunakan bahasa semula jadi.
Maka, apakah yang boleh dilakukan oleh pelayan MCP dalam Penpot, dan apakah yang telah dicapai oleh percubaan sedia ada? Mari kita lihat. Kes Penggunaan Pelayan MCP Penpot Jika anda hanya ingin melangkau ke perkara yang boleh dilakukan oleh pelayan MCP Penpot, Penpot mempunyai beberapa tunjuk cara MCP yang disimpan dalam Google Drive yang lebih berbaloi untuk ditonton. Ketua Pegawai Eksekutif Penpot Pablo Ruiz-Múzquiz menyebut bahawa video 03, 04, 06, 08 dan 12 adalah kegemaran mereka. Cara yang lebih pantas untuk meringkaskan pelayan MCP ialah menonton pelancaran daripada Penpot Fest 2025. Jika tidak, mari kita lihat beberapa contoh yang lebih halus yang ditunjukkan oleh Penpot dalam pameran awam mereka. Reka Bentuk-untuk-Kod dan Kembali Lagi (dan Lagi) Berdasarkan apa yang saya katakan sebelum ini tentang cara reka bentuk Penpot dinyatakan sebagai kod, ini bermakna pelayan MCP boleh digunakan untuk menukar reka bentuk kepada kod menggunakan AI, tetapi juga kod kepada reka bentuk, reka bentuk kepada dokumentasi, dokumentasi kepada reka bentuk elemen sistem, reka bentuk kepada kod semula berdasarkan sistem reka bentuk tersebut, dan kemudian komponen baharu sepenuhnya berdasarkan sistem reka bentuk tersebut. Kedengarannya nyata, tetapi demo di bawah menunjukkan kebolehubahan ini, dan ia bukan daripada arahan yang samar-samar tetapi lebih kepada pilihan reka bentuk terdahulu, tanpa mengira cara ia dinyatakan (reka bentuk, kod atau dokumentasi). Tiada kejutan — ini hanyalah keputusan yang anda akan buat berdasarkan keputusan sebelumnya, dilaksanakan dengan pantas. Dalam demo, Juan de la Cruz García, Pereka di Penpot, menukarkan beberapa komponen mudah ke dalam dokumentasi, elemen sistem reka bentuk, kod, komponen baharu dan juga projek Buku Cerita yang lengkap seperti sekeping Play-Doh: Reka Bentuk-ke-Kod, Pengesahan Reka Bentuk/Kod, Dan Operasi Mudah Dalam demo serupa di bawah, Dominik Jain, Pengasas Bersama di Oraios AI, mencipta apl web Node.js berdasarkan reka bentuk sebelum mengemas kini gaya bahagian hadapan, menyimpan nama dan pengecam ke ingatan untuk memastikan terjemahan reka bentuk-ke-kod yang lancar sebelum menyemaknya untuk ketekalan, menambahulas di sebelah bentuk yang dipilih dalam Penpot, dan kemudian gantikan coretan dalam Penpot dengan komponen yang disesuaikan. Terdapat banyak perkara yang berlaku di sini, tetapi anda boleh melihat dengan tepat apa yang Dominik taip ke Claude Desktop serta respons Claude, dan ia sangat mantap: Ngomong-ngomong, demo sebelumnya menggunakan Claude dalam Kod VS, jadi saya harus ambil perhatian bahawa pelayan Penpot MCP adalah LLM-agnostik. Timbunan teknologi anda terpulang sepenuhnya kepada anda. IvanTheGeek berjaya menyediakan pelayan MCP mereka dengan JetBrains Rider IDE dan Junie AI. Lebih Banyak Kes Penggunaan Terjemah papan Penpot kepada HTML semantik sedia pengeluaran dan CSS modular sambil memanfaatkan sebarang token reka bentuk Penpot (ingat bahawa reka bentuk Penpot sudah dinyatakan sebagai kod, jadi ini bukan pukulan dalam gelap): Hasilkan prototaip web interaktif tanpa mengubah HTML sedia ada: Seperti yang ditunjukkan sebelum ini, tukar coretan kepada komponen, memanfaatkan reka bentuk dan/atau elemen sistem reka bentuk sedia ada: Buat dokumentasi sistem reka bentuk daripada fail Penpot: Dan berikut ialah beberapa lagi kes penggunaan daripada Penpot dan komuniti:
Eksport lanjutan, Cari elemen reka bentuk menggunakan bahasa semula jadi, Tarik data daripada API luaran menggunakan bahasa semula jadi, Sambungkan Penpot ke alat luaran lain dengan mudah, Menyimpan tugasan berulang ke ingatan dan melaksanakannya, Ujian regresi visual, Kekonsistenan reka bentuk dan pemeriksaan redundansi, Analisis dan maklum balas kebolehcapaian dan kebolehgunaan, Semakan pematuhan sistem reka bentuk, Semakan pematuhan garis panduan (jenama, kandungan, dsb.), Pantau penerimaan dan penggunaan dengan analisis reka bentuk, Simpan dokumentasi secara automatik selari dengan reka bentuk, Organisasi fail reka bentuk (cth., penandaan/pengkategorian).
Pada asasnya, pelayan Penpot MCP membawa jalan ke jumlah aliran kerja yang tidak terhingga berkat kecekapan dan kemudahan pelanggan LLM/LLM pilihan anda, tetapi tanpa mendedahkan data anda kepadanya. Untuk Apa Anda Menggunakan Pelayan MCP? Pelayan MCP Penpot tidak berada di peringkat beta, tetapi ia adalah percubaan aktif yang anda boleh sertai. Pengguna Penpot telah mula meneroka kes penggunaan untuk pelayan MCP, tetapi Penpot mahu melihat lebih banyak lagi. Untuk memastikan alat reka bentuk generasi akan datang memenuhi keperluan pereka bentuk, pembangun dan pasukan produk secara amnya, alat tersebut mesti dibina secara kolektif dan kolaboratif, terutamanya dalam hal AI. Nota: Penpot sedang mencari penguji beta yang tidak sabar-sabar untuk meneroka, mencuba dan membantu memperhalusi Pelayan MCP Penpot. Untuk menyertai, tulis ke support@penpot.app dengan baris subjek "sukarelawan ujian beta MCP". Adakah terdapat apa-apa yang anda rasa boleh dilakukan oleh pelayan Penpot MCP yang alat semasa tidak dapat melakukannya dengan cukup baik, cukup pantas atau tidak mampu melakukannya sama sekali? Anda boleh belajar cara menyediakan pelayan MCP Penpot di sini dan mula bermain-main hari ini, atau jika otak anda sudah sibuk dengan idea, Penpot mahu anda menyertai perbincangan, berkongsi maklum balas anda dan bercakap tentang kes penggunaan anda. Sebagai alternatif, bahagian komen di bawah juga bukan tempat yang buruk untuk bermula!
