Ovaj članak sponzorira Penpot Zamislite da vaš Penpot fajl sadrži kompletan set ikona pored samog dizajna, koji koristi neke, ali ne sve te ikone. Ako biste zamolili AI kao što su Claude ili Gemini da izveze samo ikone koje se koriste, on to ne bi mogao učiniti. Ne može komunicirati sa Penpot fajlovima. Međutim, Penpot MCP server može. Može obavljati ručno odabrani broj operacija prema postavljenim pravilima i dozvolama, posebno zato što Penpot ima opsežan API i još više zato što je otvorenog koda. Posao AI je jednostavno razumjeti vašu namjeru, odabrati pravu operaciju koju će MCP server izvršiti (izvoz u ovom slučaju) i proslijediti sve parametre (tj. ikone koje se koriste). MCP server to zatim prevodi u strukturirani API zahtjev i izvršava ga. Moglo bi vam pomoći da razmišljate o AI kao serveru u restoranu koji prima vašu narudžbu, MCP serveru i kao jelovniku i kuharu, a API zahtjev kao (nadamo se) vruća pita od pice na toplom tanjiru. Zašto baš MCP serveri? Pa, Penpot nije u stanju razumjeti vašu namjeru jer nije LLM, niti dozvoljava LLM-ovima trećih strana da stupe u interakciju s vašim Penpot datotekama radi sigurnosti i privatnosti vaših Penpot podataka. Iako Penpot MCP serveri djeluju kao siguran most, prevodeći AI namjeru u API zahtjeve koristeći vaše Penpot datoteke i podatke kao kontekst. Što je još bolje, budući da Penpot koristi pristup dizajna izraženog kao koda, dizajni se mogu programski kreirati, uređivati i analizirati na granularnom nivou. Kontekstualniji je, konkretniji i stoga moćniji u poređenju sa onim što nude drugi MCP serveri, i daleko promišljeniji od podparnog toka rada „Opiši → Generiraj“ AI za koji mislim da niko zaista ne želi. Penpotov AI whitepaper opisuje ovo kao loš pristup, a pristup 'Pretvori u kod' kao ružan pristup, dok su MCP serveri rafiniraniji i prilagodljiviji. Karakteristike i tehnički detalji Prije nego što pređemo na slučajeve upotrebe, evo nekih karakteristika i tehničkih detalja koji dodatno objašnjavaju kako Penpot MCP serveri rade:
Usklađen sa MCP standardima; Integriše se sa Penpot API-jem za podatke o dizajnu u realnom vremenu; Uključuje Python SDK, REST API, sistem dodataka i CLI alate; Radi sa bilo kojim AI asistentom koji podržava MCP (Klod u VS kodu, Klod u kursoru, Klod Desktop, itd.); Podržava dijeljenje konteksta dizajna s AI modelima i omogućava im da vide i razumiju komponente; Olakšava komunikaciju sa Penpotom koristeći prirodni jezik.
Šta bi nam onda MCP serveri mogli omogućiti u Penpotu i šta su postojeći eksperimenti već postigli? Hajde da pogledamo. Slučajevi upotrebe Penpot MCP servera Ako samo želite da pređete na ono što Penpot MCP serveri mogu da urade, Penpot ima nekoliko MCP demo snimaka sakrivenih u Google disku koje su više nego vredne gledanja. Izvršni direktor Penpota Pablo Ruiz-Múzquiz spomenuo je da su video snimci 03, 04, 06, 08 i 12 njihovi omiljeni. Još brži način da se sumiraju MCP serveri je gledanje otkrivanja sa Penpot Fest 2025. Inače, pogledajmo neke od profinjenijih primjera koje je Penpot demonstrirao u svojoj javnoj izlozi. Dizajn za kodiranje i povratak (i više) Polazeći od onoga što sam ranije rekao o tome kako se Penpot dizajni izražavaju kao kod, to znači da se MCP serveri mogu koristiti za pretvaranje dizajna u kod koristeći AI, ali i kod u dizajn, dizajn u dokumentaciju, dokumentaciju u dizajn elemenata sistema, dizajn u kod ponovo na osnovu navedenog sistema dizajna, a zatim i potpuno nove komponente zasnovane na pomenutom sistemu dizajna. Zvuči nadrealno, ali demonstracija ispod pokazuje ovu promjenjivost, i to nije iz nejasnih uputa, već prije prethodnih izbora dizajna, bez obzira na to kako su izraženi (dizajn, kod ili dokumentacija). Nema iznenađenja – to su jednostavno odluke koje biste ionako donijeli na osnovu prethodnih odluka, brzo izvršene. U demo demonstraciji, Juan de la Cruz García, dizajner u Penpotu, bez trenja pretvara neke jednostavne komponente u dokumentaciju, elemente sistema dizajna, kod, nove komponente, pa čak i kompletan Storybook projekat poput komada Play-Doh-a: Dizajn za kodiranje, Validacija dizajna/koda i jednostavne operacije U sličnoj demonstraciji ispod, Dominik Jain, suosnivač Oraios AI, kreira Node.js web aplikaciju na osnovu dizajna prije ažuriranja stilova frontenda, sprema imena i identifikatore u memoriju kako bi osigurao nesmetan prijevod dizajna u kod prije nego što provjeri konzistentnost, dodajekomentar pored odabranog oblika u Penpot-u, a zatim zamjenjuje škrabotinu u Penpot-u prilagođenom komponentom. Ovdje se mnogo toga dešava, ali možete vidjeti tačno šta Dominik upisuje u Claude Desktop, kao i Claudeove odgovore, i to je vrlo robusno: Inače, prethodni demo je koristio Claudea u VS Code-u, tako da treba napomenuti da su Penpot MCP serveri LLM-agnostički. Vaša tehnička ponuda je potpuno na vama. IvanTheGeek je uspio postaviti svoj MCP server sa JetBrains Rider IDE i Junie AI. Više slučajeva upotrebe Prevedite Penpot ploču u semantički HTML spreman za proizvodnju i modularni CSS dok koristite sve Penpot dizajnerske tokene (zapamtite da su Penpot dizajni već izraženi kao kod, tako da ovo nije šut u mraku): Generirajte interaktivni web prototip bez promjene postojećeg HTML-a: Kao što je ranije prikazano, pretvorite škrabotinu u komponentu, koristeći postojeći dizajn i/ili elemente sistema dizajna: Kreirajte dokumentaciju sistema dizajna iz Penpot datoteke: A evo još nekoliko slučajeva upotrebe od Penpota i zajednice:
napredni izvozi, Tražite elemente dizajna koristeći prirodni jezik, Povlačenje podataka iz vanjskih API-ja koristeći prirodni jezik, Lako povežite Penpot sa drugim eksternim alatima, Spremanje zadataka koji se ponavljaju u memoriju i njihovo izvršavanje, testiranje vizuelne regresije, Konzistentnost dizajna i provjera redundancije, Analiza pristupačnosti i upotrebljivosti i povratne informacije, Provjera usklađenosti sistema dizajna, Provjera usklađenosti sa smjernicama (brend, sadržaj, itd.), Pratite usvajanje i upotrebu pomoću analitike dizajna, Automatski uskladite dokumentaciju sa dizajnom, Dizajn organizacije datoteka (npr. označavanje/kategorizacija).
U suštini, Penpot MCP serveri vode put do beskonačnog broja radnih tokova zahvaljujući efikasnosti i lakoći vašeg odabranog LLM/LLM klijenta, ali bez izlaganja vaših podataka. Za šta biste koristili MCP servere? Penpot MCP serveri nisu čak ni u beta fazi, ali to je aktivan eksperiment u kojem možete biti dio. Penpot korisnici su već počeli da istražuju slučajeve upotrebe MCP servera, ali Penpot želi da vidi više. Kako bi se osiguralo da sljedeća generacija dizajnerskih alata zadovoljava potrebe dizajnera, programera i proizvodnih timova općenito, oni moraju biti izgrađeni kolektivno i kolaborativno, posebno kada je AI u pitanju. Napomena: Penpot traži beta testere željne istraživanja, eksperimentiranja i pomoći u poboljšanju Penpotovog MCP servera. Da biste se pridružili, pišite na support@penpot.app sa naslovom "MCP beta test volonter." Postoji li nešto što mislite da bi Penpot MCP serveri mogli da urade, a da trenutni alati nisu u stanju da urade dovoljno dobro, dovoljno brzo ili uopšte nisu u stanju? Možete naučiti kako postaviti Penpot MCP server upravo ovdje i početi petljati danas, ili ako vam mozak već vrvi od ideja, Penpot želi da se pridružite diskusiji, podijelite svoje povratne informacije i razgovarate o svojim slučajevima upotrebe. Alternativno, ni odjeljak za komentare ispod nije loše mjesto za početak!
