Hierdie artikel word deur Penpot geborg Stel jou voor dat jou Penpot-lêer 'n volledige ikoonstel bevat bykomend tot die ontwerp self, wat sommige maar nie almal van daardie ikone gebruik nie. As jy 'n KI soos Claude of Gemini sou vra om slegs die ikone wat gebruik word, uit te voer, sou dit dit nie kon doen nie. Dit is nie in staat om met Penpot-lêers te kommunikeer nie. 'n Penpot MCP-bediener kan egter. Dit kan 'n uitgesoekte aantal bewerkings onder vasgestelde reëls en toestemmings uitvoer, veral aangesien Penpot 'n uitgebreide API het en selfs meer so omdat dit oopbron is. Die KI se taak is eenvoudig om jou bedoeling te verstaan, die regte bewerking te kies vir die MCP-bediener om uit te voer ('n uitvoer in hierdie geval), en enige parameters (d.w.s. ikone wat gebruik word) deur te gee. Die MCP-bediener vertaal dit dan in 'n gestruktureerde API-versoek en voer dit uit. Dit kan dalk help om aan KI te dink as 'n bediener in 'n restaurant wat jou bestelling neem, die MCP-bediener as beide die spyskaart en sjef, en die API-versoek as (hopelik) 'n warm pizzatert op 'n warm bord. Hoekom presies MCP-bedieners? Wel, Penpot is nie in staat om jou bedoeling te verstaan nie, want dit is nie 'n LLM nie, en dit laat ook nie derdeparty LLM's toe om met jou Penpot-lêers te kommunikeer vir die sekuriteit en privaatheid van jou Penpot-data nie. Alhoewel Penpot MCP-bedieners wel as 'n veilige brug optree, vertaal KI-voorneme in API-versoeke deur u Penpot-lêers en data as konteks te gebruik. Wat nog beter is, is dat omdat Penpot 'n ontwerp-uitgedruk-as-kode-benadering volg, ontwerpe programmaties geskep, geredigeer en ontleed kan word op 'n korrelvlak. Dit is meer kontekstueel, meer spesifiek en daarom kragtiger in vergelyking met wat ander MCP-bedieners bied, en baie meer deurdag as die subparagraaf 'Beskryf → Genereer' KI-werkvloei wat ek dink nie iemand regtig wil hê nie. Penpot se KI-witskrif beskryf dit as die slegte benadering en die 'Skakel na kode'-benadering as die lelike benadering, terwyl MCP-bedieners meer verfyn en aanpasbaar is. Kenmerke en tegniese besonderhede Voordat ons verder gaan met gebruiksgevalle, hier is 'n paar kenmerke en tegniese besonderhede wat verder verduidelik hoe Penpot MCP-bedieners werk:
Voldoen aan MCP-standaarde; Integreer met die Penpot API vir intydse ontwerpdata; Sluit 'n Python SDK, REST API, inpropstelsel en CLI-gereedskap in; Werk saam met enige MCP-geaktiveerde KI-assistent (Claude in VS-kode, Claude in Cursor, Claude Desktop, ens.); Ondersteun die deel van ontwerpkonteks met KI-modelle, en laat hulle komponente sien en verstaan; Fasiliteer kommunikasie met Penpot deur natuurlike taal te gebruik.
Wat kan MCP-bedieners ons dan in staat stel om in Penpot te doen, en wat het bestaande eksperimente reeds bereik? Kom ons kyk. Penpot MCP Server Gebruiksgevalle As jy net wil oorslaan na wat Penpot MCP-bedieners kan doen, het Penpot 'n paar MCP-demo's in 'n Google Drive opgeberg wat meer as die moeite werd is om te kyk. Pablo Ruiz-Múzquiz, uitvoerende hoof van Penpot, het genoem dat video's 03, 04, 06, 08 en 12 hul gunstelinge is. 'n Selfs vinniger manier om MCP-bedieners op te som, is om na die onthulling van Penpot Fest 2025 te kyk. Andersins, kom ons kyk na 'n paar van die meer verfynde voorbeelde wat Penpot in hul openbare vertoonvenster gedemonstreer het. Ontwerp-na-kode en weer terug (en meer) Uitgaande van wat ek vroeër gesê het oor hoe Penpot-ontwerpe as kode uitgedruk word, beteken dit dat MCP-bedieners gebruik kan word om ontwerp na kode om te skakel deur gebruik te maak van AI, maar ook kode na ontwerp, ontwerp na dokumentasie, dokumentasie om stelselelemente te ontwerp, ontwerp om weer te kodeer gebaseer op genoemde ontwerpstelsel, en dan heeltemal nuwe komponente gebaseer op genoemde ontwerpstelsel. Dit klink surrealisties, maar die demonstrasie hieronder wys hierdie omskepbaarheid uit, en dit is nie uit vae instruksies nie, maar eerder vorige ontwerpkeuses, ongeag hoe dit uitgedruk is (ontwerp, kode of dokumentasie). Daar is geen verrassings nie - dit is bloot die besluite wat jy in elk geval sou geneem het op grond van vorige besluite, wat vinnig uitgevoer is. In die demonstrasie verander Juan de la Cruz García, Ontwerper by Penpot, sommige eenvoudige komponente wrywingloos in dokumentasie, ontwerpstelselelemente, kode, nuwe komponente en selfs 'n volledige Storieboekprojek soos 'n stuk Play-Doh: Ontwerp-na-kode, ontwerp/kode-validering en eenvoudige bewerkings In 'n soortgelyke demonstrasie hieronder, skep Dominik Jain, medestigter by Oraios AI, 'n Node.js-webtoepassing gebaseer op die ontwerp voordat die frontend-style opgedateer word, stoor name en identifiseerders in die geheue om gladde ontwerp-na-kode-vertaling te verseker voordat dit nagegaan word vir konsekwentheid, voeg 'nlewer kommentaar langs die geselekteerde vorm in Penpot, en vervang dan 'n krabbel in Penpot met 'n aangepaste komponent. Hier gebeur baie, maar jy kan presies sien wat Dominik in Claude Desktop tik, sowel as Claude se antwoorde, en dit is baie robuust: Terloops, die vorige demo het Claude in VS-kode gebruik, so ek moet daarop let dat Penpot MCP-bedieners LLM-agnosties is. Jou tegnologiestapel is heeltemal aan jou. IvanTheGeek het daarin geslaag om hul MCP-bediener op te stel met die JetBrains Rider IDE en Junie AI. Meer gebruiksgevalle Vertaal 'n Penpot-bord na produksie-gereed semantiese HTML en modulêre CSS terwyl jy enige Penpot-ontwerptokens gebruik (onthou dat Penpot-ontwerpe reeds as kode uitgedruk word, so dit is nie 'n skoot in die donker nie): Genereer 'n interaktiewe webprototipe sonder om die bestaande HTML te verander: Soos vroeër getoon, omskep 'n krabbel in 'n komponent, gebruik bestaande ontwerp- en/of ontwerpstelselelemente: Skep ontwerpstelseldokumentasie vanaf 'n Penpot-lêer: En hier is nog 'n paar gebruiksgevalle van Penpot en die gemeenskap:
Gevorderde uitvoere, Soek vir ontwerpelemente met natuurlike taal, Trek data van eksterne API's met natuurlike taal, Koppel Penpot maklik aan ander eksterne gereedskap, Stoor herhalende take in die geheue en voer dit uit, Visuele regressie toets, Ontwerpkonsekwentheid en oortolligheidkontrolering, Toeganklikheid en bruikbaarheid analise en terugvoer, Ontwerpstelselnakomingkontrolering, Riglynnakomingkontrolering (handelsmerk, inhoud, ens.), Monitor aanvaarding en gebruik met ontwerpanalise, Hou dokumentasie outomaties gesinchroniseer met ontwerp, Ontwerp lêerorganisasie (bv. tagging/kategorisering).
In wese lei Penpot MCP-bedieners die weg na 'n oneindige aantal werkvloeie danksy die doeltreffendheid en gemak van u gekose LLM/LLM-kliënt, maar sonder om u data daaraan bloot te stel. Waarvoor sal jy MCP-bedieners gebruik? Penpot MCP-bedieners is nie eers in die beta-stadium nie, maar dit is 'n aktiewe eksperiment waarvan u deel kan wees. Penpot-gebruikers het reeds begin om gebruiksgevalle vir MCP-bedieners te ondersoek, maar Penpot wil meer sien. Om te verseker dat die volgende generasie ontwerpinstrumente aan die behoeftes van ontwerpers, ontwikkelaars en produkspanne in die algemeen voldoen, moet hulle gesamentlik en saam gebou word, veral waar KI aangaan. Let wel: Penpot is op soek na beta-toetsers wat gretig is om Penpot se MCP-bediener te verken, te eksperimenteer en te help verfyn. Om aan te sluit, skryf aan support@penpot.app met die onderwerplyn "MCP beta-toets vrywilliger." Is daar enigiets wat jy voel Penpot MCP-bedieners kan doen wat huidige nutsmiddels nie goed genoeg, vinnig genoeg of glad nie in staat is om te doen nie? Jy kan hier leer hoe om 'n Penpot MCP-bediener op te stel en vandag begin peuter, of as jou brein al aan idees gons, wil Penpot hê jy moet by die bespreking aansluit, jou terugvoer deel en oor jou gebruiksgevalle praat. Alternatiewelik is die kommentaarafdeling reg hieronder ook nie 'n slegte plek om te begin nie!
