Ang artikulong ito ay itinataguyod ng Penpot Isipin na ang iyong Penpot file ay naglalaman ng isang buong set ng icon bilang karagdagan sa mismong disenyo, na gumagamit ng ilan ngunit hindi lahat ng mga icon na iyon. Kung hihilingin mo sa isang AI gaya ni Claude o Gemini na i-export lang ang mga icon na ginagamit, hindi nito magagawa iyon. Hindi nito magawang makipag-ugnayan sa mga Penpot file. Gayunpaman, magagawa ng isang Penpot MCP server. Maaari itong magsagawa ng napiling bilang ng mga operasyon sa ilalim ng mga itinakdang panuntunan at pahintulot, lalo na dahil ang Penpot ay may malawak na API at higit pa dahil ito ay open-source. Ang trabaho lang ng AI ay unawain ang iyong layunin, piliin ang tamang operasyon para sa MCP server na isasagawa (isang pag-export sa kasong ito), at ipasa ang anumang mga parameter (ibig sabihin, mga icon na ginagamit). Pagkatapos, isasalin ito ng MCP server sa isang structured na kahilingan sa API at ipapatupad ito. Maaaring makatulong na isipin ang AI bilang isang server sa isang restaurant na kumukuha ng iyong order, ang MCP server bilang parehong menu at chef, at ang kahilingan ng API bilang (sana) isang mainit na pizza pie sa isang mainit na plato. Bakit MCP server, eksakto? Well, hindi maintindihan ng Penpot ang iyong layunin dahil hindi ito isang LLM, at hindi rin nito pinapayagan ang mga third-party na LLM na makipag-ugnayan sa iyong mga Penpot file para sa seguridad at privacy ng iyong data ng Penpot. Bagama't ang mga server ng Penpot MCP ay gumaganap bilang isang secure na tulay, ang pagsasalin ng AI intent sa mga kahilingan sa API gamit ang iyong mga Penpot file at data bilang konteksto. Ang mas maganda pa ay dahil ang Penpot ay gumagamit ng isang design-expressed-as-code approach, ang mga disenyo ay maaaring malikha, ma-edit, at masuri sa isang butil-butil na antas. Ito ay mas kontekstwal, mas partikular, at samakatuwid ay mas malakas kumpara sa kung ano ang inaalok ng iba pang mga MCP server, at mas maalalahanin kaysa sa subpar na 'Ilarawan → Bumuo' na daloy ng trabaho ng AI na sa tingin ko ay hindi talaga gusto ng sinuman. Inilalarawan ito ng AI whitepaper ng Penpot bilang masamang diskarte at ang diskarteng 'Convert to Code' bilang pangit na diskarte, samantalang ang mga server ng MCP ay mas pino at madaling ibagay. Mga Tampok At Teknikal na Detalye Bago tayo magpatuloy sa paggamit ng mga kaso, narito ang ilang feature at teknikal na detalye na higit na nagpapaliwanag kung paano gumagana ang mga server ng Penpot MCP:
Sumusunod sa mga pamantayan ng MCP; Sumasama sa Penpot API para sa real-time na data ng disenyo; May kasamang Python SDK, REST API, plugin system, at CLI tool; Gumagana sa anumang MCP-enabled AI assistant (Claude sa VS Code, Claude sa Cursor, Claude Desktop, atbp.); Sinusuportahan ang pagbabahagi ng konteksto ng disenyo sa mga modelo ng AI, at hinahayaan silang makita at maunawaan ang mga bahagi; Pinapadali ang komunikasyon sa Penpot gamit ang natural na wika.
Ano, kung gayon, ang magagawa ng mga server ng MCP na gawin natin sa Penpot, at ano ang nakamit na ng mga kasalukuyang eksperimento? Tingnan natin. Mga Kaso ng Paggamit ng Server ng Penpot MCP Kung gusto mo lang laktawan kung ano ang magagawa ng mga server ng Penpot MCP, ang Penpot ay may ilang MCP demo na nakatago sa isang Google Drive na higit sa sulit na panoorin. Binanggit ng CEO ng Penpot na si Pablo Ruiz-Múzquiz na ang mga video 03, 04, 06, 08, at 12 ang kanilang mga paborito. Ang isang mas mabilis na paraan upang ibuod ang mga MCP server ay ang panoorin ang pag-unveil mula sa Penpot Fest 2025. Kung hindi, tingnan natin ang ilan sa mga mas pinong halimbawa na ipinakita ng Penpot sa kanilang pampublikong showcase. Design-to-Code at Bumalik Muli (at Higit Pa) Mula sa kung ano ang sinasabi ko kanina tungkol sa kung paano ipinahayag ang mga disenyo ng Penpot bilang code, nangangahulugan ito na ang mga MCP server ay maaaring gamitin upang i-convert ang disenyo sa code gamit ang AI, ngunit pati na rin ang code sa disenyo, disenyo sa dokumentasyon, dokumentasyon sa disenyo ng mga elemento ng system, disenyo sa code muli batay sa nasabing sistema ng disenyo, at pagkatapos ay ganap na bagong mga bahagi batay sa nasabing sistema ng disenyo. Ito ay parang surreal, ngunit ang demo sa ibaba ay nagpapakita ng transmutability na ito, at hindi ito mula sa hindi malinaw na pagtuturo kundi sa mga nakaraang pagpipilian sa disenyo, anuman ang kung paano ito ipinahayag (disenyo, code, o dokumentasyon). Walang mga sorpresa — ito lang ang mga desisyon na gagawin mo pa rin batay sa mga nakaraang desisyon, na naisakatuparan nang mabilis. Sa demo, si Juan de la Cruz García, Designer sa Penpot, ay walang kahirap-hirap na nag-transmute ng ilang simpleng bahagi sa dokumentasyon, mga elemento ng system ng disenyo, code, mga bagong bahagi, at kahit isang kumpletong proyekto ng Storybook tulad ng isang piraso ng Play-Doh: Design-to-Code, Design/Code Validation, At Simple Operations Sa isang katulad na demo sa ibaba, si Dominik Jain, Co-Founder sa Oraios AI, ay lumikha ng isang Node.js web app batay sa disenyo bago i-update ang mga istilo ng frontend, nagse-save ng mga pangalan at identifier sa memorya upang matiyak ang maayos na pagsasalin ng disenyo-to-code bago ito suriin para sa pagkakapare-pareho, magdagdag ng isangmagkomento sa tabi ng napiling hugis sa Penpot, at pagkatapos ay papalitan ang isang scribble sa Penpot ng isang inangkop na bahagi. Maraming nangyayari dito, ngunit makikita mo kung ano mismo ang tina-type ni Dominik sa Claude Desktop pati na rin ang mga tugon ni Claude, at ito ay napakatatag: Sa pamamagitan ng paraan, ginamit ng nakaraang demo si Claude sa VS Code, kaya dapat kong tandaan na ang mga server ng Penpot MCP ay LLM-agnostic. Ang iyong tech stack ay ganap na nakasalalay sa iyo. Nagawa ng IvanTheGeek na i-set up ang kanilang MCP server gamit ang JetBrains Rider IDE at Junie AI. Higit pang Mga Use Case Isalin ang Penpot board sa production-ready semantic HTML at modular CSS habang ginagamit ang anumang mga token ng disenyo ng Penpot (tandaan na ang mga disenyo ng Penpot ay ipinahayag na bilang code, kaya hindi ito isang shot sa dilim): Bumuo ng interactive na web prototype nang hindi binabago ang kasalukuyang HTML: Gaya ng ipinakita kanina, i-convert ang isang scribble sa isang bahagi, na ginagamit ang mga kasalukuyang elemento ng disenyo at/o sistema ng disenyo: Lumikha ng dokumentasyon ng sistema ng disenyo mula sa isang Penpot file: At narito ang ilan pang mga kaso ng paggamit mula sa Penpot at sa komunidad:
Mga advanced na pag-export, Maghanap ng mga elemento ng disenyo gamit ang natural na wika, Hilahin ang data mula sa mga panlabas na API gamit ang natural na wika, Madaling ikonekta ang Penpot sa iba pang mga panlabas na tool, Ang pag-save ng mga paulit-ulit na gawain sa memorya at pagsasagawa ng mga ito, Pagsubok ng visual regression, Pagsusuri ng pare-pareho ng disenyo at redundancy, Pagsusuri at feedback sa pagiging naa-access at kakayahang magamit, Pagsusuri sa pagsunod sa sistema ng disenyo, Pagsusuri sa pagsunod sa alituntunin (brand, content, atbp.), Subaybayan ang pag-aampon at paggamit gamit ang analytics ng disenyo, Awtomatikong panatilihing naka-sync ang dokumentasyon sa disenyo, Organisasyon ng file ng disenyo (hal., pag-tag/pagkategorya).
Sa pangkalahatan, ang mga server ng Penpot MCP ay humahantong sa isang walang katapusang bilang ng mga daloy ng trabaho salamat sa kahusayan at kadalian ng iyong napiling LLM/LLM na kliyente, ngunit hindi inilalantad ang iyong data dito. Para saan Mo Gagamitin ang Mga MCP Server? Ang mga server ng Penpot MCP ay wala pa sa beta stage, ngunit isa itong aktibong eksperimento kung saan maaari kang maging bahagi. Ang mga user ng Penpot ay nagsimula nang mag-explore ng mga kaso ng paggamit para sa mga MCP server, ngunit gusto ng Penpot na makakita ng higit pa. Upang matiyak na ang susunod na henerasyon ng mga tool sa disenyo ay nakakatugon sa mga pangangailangan ng mga taga-disenyo, developer, at mga pangkat ng produkto sa pangkalahatan, dapat silang binuo nang sama-sama at magkakasama, lalo na kung tungkol sa AI. Tandaan: Ang Penpot ay naghahanap ng mga beta tester na gustong mag-explore, mag-eksperimento, at tumulong na pinuhin ang MCP Server ng Penpot. Para sumali, sumulat sa support@penpot.app na may linya ng paksa na "MCP beta test volunteer." Mayroon bang anumang bagay na sa tingin mo ay maaaring gawin ng mga server ng Penpot MCP na ang mga kasalukuyang tool ay hindi nagagawa nang maayos, sapat na mabilis, o hindi magawa? Maaari mong matutunan kung paano mag-set up ng isang Penpot MCP server dito mismo at magsimulang mag-tinker ngayon, o kung ang iyong utak ay naghuhumindig na sa mga ideya, gusto ng Penpot na sumali ka sa talakayan, ibahagi ang iyong feedback, at pag-usapan ang iyong mga use-case. Bilang kahalili, ang seksyon ng komento sa ibaba mismo ay hindi isang masamang lugar upang magsimula!
