Tämä artikkeli on Penpotin sponsoroima Kuvittele, että Penpot-tiedostosi sisältää täyden kuvakesarjan itse suunnittelun lisäksi, joka käyttää joitain mutta ei kaikkia kuvakkeita. Jos pyytäisit tekoälyä, kuten Claude tai Gemini, viemään vain käytössä olevat kuvakkeet, se ei pystyisi tekemään sitä. Se ei voi olla vuorovaikutuksessa Penpot-tiedostojen kanssa. Kuitenkin Penpot MCP -palvelin voi. Se voi suorittaa valikoidun määrän toimintoja asetettujen sääntöjen ja käyttöoikeuksien alaisuudessa, varsinkin kun Penpotilla on laaja API ja vielä enemmän, koska se on avoimen lähdekoodin. Tekoälyn tehtävänä on yksinkertaisesti ymmärtää tarkoituksesi, valita oikea toiminto MCP-palvelimelle (tässä tapauksessa vienti) ja välittää kaikki parametrit (eli kuvakkeet, joita käytetään). MCP-palvelin muuttaa tämän sitten jäsennellyksi API-pyynnöksi ja suorittaa sen. Voi olla apua ajatella tekoälyä palvelimena ravintolassa, joka vastaanottaa tilauksesi, MCP-palvelinta sekä ruokalistana että kokina ja API-pyyntöä (toivottavasti) kuumana pizzapiirakkaana lämpimällä lautasella. Miksi juuri MCP-palvelimet? No, Penpot ei voi ymmärtää tarkoitustasi, koska se ei ole LLM, eikä se salli kolmannen osapuolen LLM:ien olla vuorovaikutuksessa Penpot-tiedostojesi kanssa Penpot-tietojesi turvallisuuden ja yksityisyyden vuoksi. Vaikka Penpot MCP -palvelimet toimivat turvallisena siltana, muuttaen tekoälyn tarkoituksen API-pyynnöiksi käyttämällä Penpot-tiedostojasi ja tietojasi kontekstina. Mikä vielä parempaa on, että koska Penpot käyttää design-expressed-as-code lähestymistapaa, malleja voidaan luoda ohjelmallisesti, muokata ja analysoida yksityiskohtaisesti. Se on kontekstuaalisempi, tarkempi ja siksi tehokkaampi verrattuna siihen, mitä muut MCP-palvelimet tarjoavat, ja paljon harkitumpi kuin alakohta Kuvaile → Luo tekoälytyönkulku, jota en usko kenenkään todella haluavan. Penpotin tekoälykäsikirja kuvaa tätä huonona lähestymistavana ja "Muunna koodiksi" -lähestymistavana rumaksi, kun taas MCP-palvelimet ovat hienostuneempia ja mukautuvampia. Ominaisuudet ja tekniset tiedot Ennen kuin siirrymme käyttötapauksiin, tässä on joitain ominaisuuksia ja teknisiä yksityiskohtia, jotka selittävät tarkemmin, kuinka Penpot MCP -palvelimet toimivat:
Täyttää MCP-standardit; Integroituu Penpot API:n kanssa reaaliaikaisten suunnittelutietojen saamiseksi; Sisältää Python SDK:n, REST API:n, laajennusjärjestelmän ja CLI-työkalut; Toimii minkä tahansa MCP-yhteensopivan AI-avustajan kanssa (Claude in VS Code, Claude in Cursor, Claude Desktop jne.); Tukee suunnittelukontekstin jakamista tekoälymallien kanssa ja antaa niiden nähdä ja ymmärtää komponentteja; Helpottaa kommunikointia Penpotin kanssa luonnollisella kielellä.
Mitä sitten MCP-palvelimet voisivat antaa meille mahdollisuuden tehdä Penpotissa, ja mitä nykyiset kokeilut ovat jo saavuttaneet? Katsotaanpa. Penpot MCP-palvelimen käyttötapaukset Jos haluat vain hypätä siihen, mitä Penpot MCP-palvelimet voivat tehdä, Penpotilla on muutamia MCP-demoja Google Drivessa, jotka ovat enemmän kuin katsomisen arvoisia. Penpotin toimitusjohtaja Pablo Ruiz-Múzquiz mainitsi, että videot 03, 04, 06, 08 ja 12 ovat heidän suosikkejaan. Vielä nopeampi tapa tehdä yhteenveto MCP-palvelimista on katsoa Penpot Fest 2025 -tapahtuman paljastukset. Muuten katsotaanpa joitain hienostuneempia esimerkkejä, joita Penpot esitteli julkisessa esittelyssään. Suunnittele koodiin ja takaisin (ja paljon muuta) Jatkamalla sitä, mitä sanoin aiemmin Penpot-mallien ilmaisusta koodina, tämä tarkoittaa, että MCP-palvelimilla voidaan muuntaa suunnittelu koodiksi tekoälyä käyttäen, mutta myös koodia suunnitteluksi, suunnittelu dokumentaatioksi, dokumentointi järjestelmän elementtien suunnitteluun, suunnittelu uudelleen koodiksi mainitun suunnittelujärjestelmän perusteella ja sitten täysin uusia komponentteja, jotka perustuvat mainittuun suunnittelujärjestelmään. Se kuulostaa surrealistiselta, mutta alla oleva demo osoittaa tämän muunnettavuuden, ja se ei johdu epämääräisistä ohjeista, vaan aikaisemmista suunnitteluvalinnoista riippumatta siitä, miten ne on ilmaistu (suunnittelu, koodi tai dokumentaatio). Ei ole yllätyksiä – nämä ovat yksinkertaisesti päätöksiä, jotka olisit joka tapauksessa tehnyt aikaisempien päätösten perusteella ja jotka on toteutettu nopeasti. Esittelyssä Penpotin suunnittelija Juan de la Cruz García muuttaa kitkattomasti joitakin yksinkertaisia komponentteja dokumentaatioksi, suunnittelujärjestelmän elementeiksi, koodiksi, uusiksi komponenteiksi ja jopa täydelliseksi tarinakirjaprojektiksi, kuten palaksi Play-Dohia: Suunnittelu koodiin, suunnittelun/koodin validointi ja yksinkertaiset toiminnot Alla olevassa samanlaisessa demossa Dominik Jain, Oraios AI:n perustaja, luo Node.js-verkkosovelluksen suunnittelun perusteella ennen käyttöliittymän tyylien päivittämistä, tallentaa nimet ja tunnisteet muistiin varmistaakseen sujuvan suunnittelun käännöksen koodiksi ennen johdonmukaisuuden tarkistamista, lisääKommentoi valitun muodon viereen Penpotissa ja korvaa sitten kirjoituksen Penpotissa mukautetulla komponentilla. Täällä tapahtuu paljon, mutta näet tarkalleen, mitä Dominik kirjoittaa Claude Desktopiin sekä Clauden vastaukset, ja se on erittäin vankka: Muuten, edellinen demo käytti Claudea VS Codessa, joten minun on huomattava, että Penpot MCP -palvelimet ovat LLM-agnostikkoja. Tekniikkasi on täysin sinusta kiinni. IvanTheGeek onnistui määrittämään MCP-palvelimensa JetBrains Rider IDE:n ja Junie AI:n avulla. Lisää käyttötapauksia Käännä Penpot-taulu tuotantovalmiiksi semanttiseksi HTML:ksi ja modulaariseksi CSS:ksi samalla kun hyödynnät mitä tahansa Penpot-suunnittelutunnuksia (muista, että Penpot-mallit ilmaistaan jo koodina, joten tämä ei ole hämärän peitossa): Luo interaktiivinen web-prototyyppi muuttamatta olemassa olevaa HTML-koodia: Kuten aiemmin näytettiin, muunna raappaus komponentiksi hyödyntämällä olemassa olevia suunnittelu- ja/tai suunnittelujärjestelmän elementtejä: Luo suunnittelujärjestelmän dokumentaatio Penpot-tiedostosta: Ja tässä on muita käyttötapauksia Penpotilta ja yhteisöltä:
Edistynyt vienti, Etsi suunnitteluelementtejä luonnollisella kielellä, Vedä tietoja ulkoisista sovellusliittymistä luonnollisella kielellä, Liitä Penpot helposti muihin ulkoisiin työkaluihin, Toistuvien tehtävien tallentaminen muistiin ja niiden suorittaminen, Visuaalinen regressiotestaus, Suunnittelun johdonmukaisuuden ja redundanssin tarkistus, käytettävyys- ja käytettävyysanalyysi ja palaute, Suunnittelujärjestelmän vaatimustenmukaisuuden tarkastus, Ohjeiden noudattamisen tarkistus (brändi, sisältö jne.), Seuraa käyttöönottoa ja käyttöä suunnitteluanalytiikan avulla, Pidä dokumentaatio automaattisesti synkronoituna suunnittelun kanssa, Suunnittele tiedostojen järjestäminen (esim. merkitseminen/luokittelu).
Pohjimmiltaan Penpot MCP -palvelimet johtavat äärettömään määrään työnkulkuja valitsemasi LLM/LLM-asiakkaan tehokkuuden ja helppouden ansiosta, mutta eivät paljasta tietojasi sille. Mihin käyttäisit MCP-palvelimia? Penpot MCP -palvelimet eivät ole edes beta-vaiheessa, mutta se on aktiivinen kokeilu, johon voit osallistua. Penpot-käyttäjät ovat jo alkaneet tutkia MCP-palvelimien käyttötapauksia, mutta Penpot haluaa nähdä lisää. Sen varmistamiseksi, että seuraavan sukupolven suunnittelutyökalut vastaavat suunnittelijoiden, kehittäjien ja tuoteryhmien tarpeita yleensä, ne on rakennettava kollektiivisesti ja yhteistyössä, erityisesti tekoälyn osalta. Huomautus: Penpot etsii betatestaajia, jotka haluavat tutkia, kokeilla ja auttaa parantamaan Penpotin MCP-palvelinta. Jos haluat liittyä, kirjoita osoitteeseen support@penpot.app otsikolla "MCP-betatestauksen vapaaehtoinen". Voivatko Penpot MCP -palvelimet mielestäsi tehdä jotain, mitä nykyiset työkalut eivät pysty tekemään tarpeeksi hyvin, tarpeeksi nopeasti tai eivät pysty tekemään ollenkaan? Voit oppia asentamaan Penpot MCP -palvelimen täällä ja aloittaa puuhastelun jo tänään, tai jos aivosi kuhisee jo ideoista, Penpot haluaa sinun osallistuvan keskusteluun, jakavan palautetta ja puhuvan käyttötapauksistasi. Vaihtoehtoisesti alla oleva kommenttiosio ei myöskään ole huono paikka aloittaa!
