Ezt a cikket a Penpot szponzorálja Képzelje el, hogy a Penpot fájl egy teljes ikonkészletet tartalmaz magán a tervezésen kívül, amely néhány, de nem mindegyik ikont használ. Ha arra kérne egy mesterséges intelligenciát, mint például a Claude vagy a Gemini, hogy csak a használt ikonokat exportálják, nem tudná megtenni. Nem tud együttműködni a Penpot fájlokkal. A Penpot MCP-kiszolgáló azonban képes. Kiválasztott számú műveletet tud végrehajtani meghatározott szabályok és engedélyek mellett, különösen mivel a Penpot kiterjedt API-val rendelkezik, és még inkább, mert nyílt forráskódú. Az AI feladata egyszerűen az, hogy megértse a szándékát, válassza ki a megfelelő műveletet az MCP-kiszolgáló számára (ebben az esetben exportálás), és átadja a paramétereket (azaz a használt ikonokat). Az MCP-kiszolgáló ezt követően ezt strukturált API-kéréssé alakítja, és végrehajtja. Hasznos lehet, ha az AI-ra úgy gondolunk, mint egy kiszolgálóra egy étteremben, amely felveszi a rendelést, az MCP-kiszolgálót étlapnak és séfnek, az API-kérést pedig (remélhetőleg) forró pizzapiteként egy meleg tányéron. Pontosan miért MCP szerverek? Nos, a Penpot nem tudja megérteni az Ön szándékát, mert nem LLM, és azt sem teszi lehetővé, hogy harmadik fél LLM-jei kapcsolatba lépjenek az Ön Penpot fájljaival a Penpot-adatok biztonsága és védelme érdekében. Bár a Penpot MCP-szerverek biztonságos hídként működnek, az AI szándékot API-kérésekké alakítják át a Penpot-fájlok és adatok kontextusként. Ami még jobb, hogy mivel a Penpot a design-expressed-as-code megközelítést alkalmazza, a terveket programozottan lehet létrehozni, szerkeszteni és részletesen elemezni. Kontextusfüggőbb, pontosabb, és ezért erősebb a többi MCP-kiszolgálóhoz képest, és sokkal átgondoltabb, mint a „Leírás → Generálás” AI munkafolyamat, amelyet szerintem senki sem akar igazán. A Penpot mesterséges intelligencia tanulmánya ezt rossz megközelítésként írja le, a „Kódtá konvertálás” megközelítést pedig csúnya megközelítésként írja le, míg az MCP-szerverek kifinomultabbak és alkalmazkodóbbak. Jellemzők és műszaki részletek Mielőtt rátérnénk a használati esetekre, íme néhány szolgáltatás és műszaki részlet, amelyek tovább magyarázzák a Penpot MCP szerverek működését:
Megfelel az MCP szabványoknak; Integrálódik a Penpot API-val a valós idejű tervezési adatokhoz; Tartalmaz egy Python SDK-t, REST API-t, bővítményrendszert és CLI-eszközöket; Működik bármely MCP-kompatibilis AI-asszisztenssel (Claude in VS Code, Claude in Cursor, Claude Desktop stb.); Támogatja a tervezési kontextus megosztását az AI modellekkel, és lehetővé teszi számukra, hogy lássák és megértsék az összetevőket; Megkönnyíti a Penpottal való kommunikációt természetes nyelven.
Mit tehetnének tehát az MCP-szerverek a Penpotban, és mit sikerült már elérni a meglévő kísérletekkel? Vessünk egy pillantást. Penpot MCP szerver használati esetek Ha csak arra szeretne kitérni, hogy mire képesek a Penpot MCP-kiszolgálók, a Penpot néhány MCP-demót rejtett el a Google Drive-ban, amelyeket érdemes megnézni. A Penpot vezérigazgatója, Pablo Ruiz-Múzquiz megemlítette, hogy a 03, 04, 06, 08 és 12 videók a kedvenceik. Az MCP-szerverek összefoglalásának még gyorsabb módja, ha megnézi a Penpot Fest 2025 bemutatóját. Ellenkező esetben vessünk egy pillantást néhány kifinomultabb példára, amelyeket a Penpot bemutatott a nyilvános kirakatában. Tervezés kódolásra és vissza (és még sok más) Abból, amit korábban a Penpot-tervek kódként való kifejezéséről mondtam, ez azt jelenti, hogy az MCP-szerverek felhasználhatók a tervezés kódmá alakítására mesterséges intelligencia segítségével, de a kódból tervezéssé, a tervezésből a dokumentációba, a dokumentációból a rendszerelemek tervezésébe, a tervezésből újra a kódba az említett tervezési rendszer alapján, majd teljesen új komponensek az említett tervezési rendszer alapján. Szürreálisan hangzik, de az alábbi bemutató bemutatja ezt az átváltoztathatóságot, és ez nem homályos utasításokból, hanem korábbi tervezési döntésekből származik, függetlenül attól, hogy hogyan fejezték ki (terv, kód vagy dokumentáció). Nincsenek meglepetések – ezek egyszerűen azok a döntések, amelyeket a korábbi döntések alapján egyébként is meghozott volna, és gyorsan végrehajtják őket. A demóban Juan de la Cruz García, a Penpot tervezője súrlódásmentesen alakít át néhány egyszerű komponenst dokumentációvá, tervezési rendszerelemekké, kódokká, új komponensekké, és akár egy teljes Storybook projektté, mint egy darab Play-Doh: Tervezéstől kódig, tervezés/kód érvényesítés és egyszerű műveletek Az alábbi hasonló demóban Dominik Jain, az Oraios AI társalapítója létrehoz egy Node.js webalkalmazást a tervezés alapján, mielőtt frissíti a frontend stílusokat, a memóriába menti a neveket és az azonosítókat, hogy biztosítsa a zökkenőmentes tervezést kódra fordítást, mielőtt ellenőrizné a konzisztenciát.megjegyzést írjon a kiválasztott alakzat mellé a Penpot alkalmazásban, majd lecseréli a Penpotban lévő firkát egy adaptált összetevőre. Sok minden történik itt, de pontosan láthatja, hogy Dominik mit ír be a Claude Desktopba, valamint Claude válaszait, és ez nagyon robusztus: Egyébként az előző demó a Claude-ot használta a VS Code-ban, ezért meg kell jegyeznem, hogy a Penpot MCP szerverek LLM-agnosztikusak. A technológiai készleted teljes mértékben rajtad múlik. Az IvanTheGeeknek sikerült beállítania MCP-kiszolgálóját a JetBrains Rider IDE-vel és a Junie AI-vel. További használati esetek Fordítson le egy Penpot táblát élesre kész szemantikus HTML-re és moduláris CSS-re, miközben kihasználja a Penpot tervezési tokeneket (ne feledje, hogy a Penpot-tervek már kódként vannak kifejezve, így ez nem egy pillantás a sötétben): Hozzon létre egy interaktív webes prototípust a meglévő HTML módosítása nélkül: Amint korábban bemutattuk, alakítson át egy firkát komponenssé, kihasználva a meglévő tervezési és/vagy tervezési rendszerelemeket: Tervezési rendszerdokumentáció létrehozása Penpot fájlból: És itt van még néhány használati eset a Penpottól és a közösségtől:
Fejlett export, Tervezési elemek keresése természetes nyelv használatával, Adatok lehívása külső API-kból természetes nyelven, Könnyen csatlakoztathatja a Penpotot más külső eszközökhöz, Az ismétlődő feladatok memóriába mentése és végrehajtása, Vizuális regressziós tesztelés, Tervezési konzisztencia és redundancia ellenőrzése, Kisegítő lehetőségek és használhatóság elemzése és visszajelzése, Tervezési rendszer megfelelőségének ellenőrzése, Az irányelveknek való megfelelés ellenőrzése (márka, tartalom stb.), Kövesse nyomon az elfogadást és a felhasználást a tervezési elemzésekkel, A dokumentáció automatikus szinkronban tartása a tervezéssel, Fájlszervezés tervezése (pl. címkézés/kategorizálás).
Lényegében a Penpot MCP-kiszolgálók végtelen számú munkafolyamathoz vezetnek, köszönhetően a választott LLM/LLM-kliens hatékonyságának és egyszerűségének, de anélkül, hogy az adatait kitennék neki. Mire használná az MCP szervereket? A Penpot MCP-szerverek még nem béta fázisban vannak, de ez egy aktív kísérlet, amelyben Ön is részese lehet. A Penpot-felhasználók már elkezdték feltárni az MCP-kiszolgálók használati eseteit, de a Penpot többet szeretne látni. Annak biztosítása érdekében, hogy a tervezőeszközök következő generációja megfeleljen a tervezők, fejlesztők és általában a termékcsapatok igényeinek, azokat kollektíven és együttműködve kell elkészíteni, különösen az AI esetében. Megjegyzés: A Penpot bétatesztelőket keres, akik szívesen fedeznék fel, kísérleteznének vele, és segítenek finomítani a Penpot MCP-kiszolgálóját. A csatlakozáshoz írjon a support@penpot.app címre az „MCP béta teszt önkéntes” tárgysorral. Van valami, amiről úgy gondolja, hogy a Penpot MCP szerverek képesek arra, hogy a jelenlegi eszközök nem képesek elég jól, elég gyorsan vagy egyáltalán nem? Itt megtudhatja, hogyan állíthat be Penpot MCP-szervert, és elkezdheti a trükközést még ma, vagy ha már zúg az agya az ötletektől, a Penpot azt szeretné, ha csatlakozna a vitához, ossza meg visszajelzéseit, és beszéljen a használati eseteiről. Alternatív megoldásként a közvetlenül lent található megjegyzés rovat sem rossz kiindulópont!
