Ovaj članak sponzorira Penpot Zamislite da vaša Penpot datoteka sadrži cijeli set ikona uz sam dizajn, koji koristi neke, ali ne sve te ikone. Ako biste tražili od umjetne inteligencije kao što je Claude ili Gemini da izveze samo ikone koje se koriste, to ne bi mogao učiniti. Ne može komunicirati s Penpot datotekama. Međutim, Penpot MCP poslužitelj može. Može izvršiti ručno odabrani broj operacija prema postavljenim pravilima i dopuštenjima, pogotovo zato što Penpot ima opsežan API i još više zato što je otvorenog koda. Posao umjetne inteligencije je jednostavno razumjeti vašu namjeru, odabrati pravu operaciju koju će MCP poslužitelj izvesti (izvoz u ovom slučaju) i proslijediti sve parametre (tj. ikone koje se koriste). MCP poslužitelj zatim to prevodi u strukturirani API zahtjev i izvršava ga. Moglo bi pomoći zamisliti AI kao poslužitelj u restoranu koji prima vašu narudžbu, MCP poslužitelj kao i jelovnik i kuhar, a API zahtjev kao (nadajmo se) vruću pitu od pizze na toplom tanjuru. Zašto baš MCP poslužitelji? Pa, Penpot ne može razumjeti vašu namjeru jer nije LLM, niti dopušta LLM-ovima trećih strana interakciju s vašim Penpot datotekama radi sigurnosti i privatnosti vaših Penpot podataka. Iako Penpot MCP poslužitelji djeluju kao sigurni most, prevodeći AI namjere u API zahtjeve koristeći vaše Penpot datoteke i podatke kao kontekst. Ono što je još bolje je to što Penpot ima pristup dizajna izraženog kao koda, dizajni se mogu programski kreirati, uređivati i analizirati na granularnoj razini. Kontekstualniji je, određeniji i stoga moćniji u usporedbi s onim što nude drugi MCP poslužitelji i daleko promišljeniji od podparlamentarnog tijeka rada umjetne inteligencije „Opiši → Generiraj“ za koji mislim da nitko zapravo ne želi. Penpotov AI whitepaper opisuje ovo kao loš pristup, a pristup 'Pretvori u kod' kao ružan pristup, dok su MCP poslužitelji rafiniraniji i prilagodljiviji. Značajke i tehnički detalji Prije nego što prijeđemo na slučajeve korištenja, evo nekih značajki i tehničkih detalja koji dodatno objašnjavaju kako Penpot MCP poslužitelji rade:
U skladu s MCP standardima; Integrira se s Penpot API-jem za podatke o dizajnu u stvarnom vremenu; Uključuje Python SDK, REST API, sustav dodataka i CLI alate; Radi s bilo kojim AI pomoćnikom s omogućenim MCP-om (Claude u VS Code, Claude u pokazivaču, Claude Desktop, itd.); Podržava dijeljenje konteksta dizajna s AI modelima i dopušta im da vide i razumiju komponente; Olakšava komunikaciju s Penpotom korištenjem prirodnog jezika.
Što bi nam onda MCP poslužitelji mogli omogućiti u Penpotu i što su postojeći eksperimenti već postigli? Pogledajmo. Slučajevi korištenja Penpot MCP poslužitelja Ako samo želite preskočiti na ono što Penpot MCP poslužitelji mogu učiniti, Penpot ima nekoliko MCP demonstracija skrivenih na Google Driveu koje se više nego isplati pogledati. Izvršni direktor Penpota Pablo Ruiz-Múzquiz spomenuo je da su videozapisi 03, 04, 06, 08 i 12 njihovi favoriti. Još brži način za sažetak MCP poslužitelja je gledanje predstavljanja s Penpot Festa 2025. Inače, pogledajmo neke od profinjenijih primjera koje je Penpot pokazao u svom javnom izlogu. Design-to-Code i natrag (i više) Nastavljajući s onim što sam ranije rekao o tome kako se Penpot dizajni izražavaju kao kod, to znači da se MCP poslužitelji mogu koristiti za pretvaranje dizajna u kod pomoću AI, ali i koda u dizajn, dizajna u dokumentaciju, dokumentacije u elemente sustava dizajna, dizajna u kod ponovno na temelju navedenog sustava dizajna, a zatim potpuno nove komponente temeljene na navedenom sustavu dizajna. Zvuči nadrealno, ali demonstracija u nastavku pokazuje ovu promjenljivost, a ne proizlazi iz nejasnih uputa, već radije iz 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 temelju prethodnih odluka, koje su brzo izvršene. U demonstraciji, Juan de la Cruz García, dizajner u Penpotu, bez problema pretvara neke jednostavne komponente u dokumentaciju, elemente sustava dizajna, kod, nove komponente, pa čak i potpuni Storybook projekt poput dijela Play-Doha: Od dizajna do koda, provjera valjanosti dizajna/koda i jednostavne operacije U sličnoj demonstraciji u nastavku, Dominik Jain, suosnivač tvrtke Oraios AI, stvara web-aplikaciju Node.js temeljenu na dizajnu prije ažuriranja stilova sučelja, sprema imena i identifikatore u memoriju kako bi osigurao glatko prevođenje dizajna u kod prije provjere dosljednosti, dodajekomentar uz odabrani oblik u Penpotu, a zatim zamjenjuje škrabotinu u Penpotu prilagođenom komponentom. Ovdje se puno toga događa, ali možete točno vidjeti što Dominik upisuje u Claude Desktop, kao i Claudeove odgovore, i to je vrlo robusno: Usput, prethodni demo koristio je Claude u VS Codeu, pa bih trebao napomenuti da su Penpot MCP poslužitelji LLM-agnostički. Vaš tehnološki skup u potpunosti ovisi o vama. IvanTheGeek uspio je postaviti svoj MCP poslužitelj s JetBrains Rider IDE i Junie AI. Više slučajeva upotrebe Prevedite Penpot ploču u semantički HTML i modularni CSS spreman za proizvodnju dok iskorištavate sve tokene Penpot dizajna (zapamtite da su Penpot dizajni već izraženi kao kod, tako da ovo nije pucanj u prazno): Generirajte interaktivni web prototip bez mijenjanja postojećeg HTML-a: Kao što je ranije prikazano, pretvorite škrabotinu u komponentu, koristeći postojeći dizajn i/ili elemente sustava dizajna: Stvorite dokumentaciju sustava dizajna iz Penpot datoteke: A evo još nekoliko slučajeva korištenja od Penpota i zajednice:
Napredni izvozi, Traženje elemenata dizajna korištenjem prirodnog jezika, Povucite podatke iz vanjskih API-ja koristeći prirodni jezik, Jednostavno povežite Penpot s drugim vanjskim alatima, Spremanje zadataka koji se ponavljaju u memoriju i njihovo izvršavanje, Vizualno regresijsko testiranje, Konzistentnost dizajna i provjera redundantnosti, Analiza pristupačnosti i upotrebljivosti i povratne informacije, Provjera usklađenosti dizajna sustava, Provjera usklađenosti sa smjernicama (marka, sadržaj itd.), Pratite usvajanje i korištenje pomoću analitike dizajna, Automatski održavajte dokumentaciju u skladu s dizajnom, Dizajnirajte organizaciju datoteke (npr. označavanje/kategorizacija).
U biti, Penpot MCP poslužitelji vode put do beskonačnog broja radnih procesa zahvaljujući učinkovitosti i jednostavnosti vašeg odabranog LLM/LLM klijenta, ali bez izlaganja vaših podataka njemu. Za što biste koristili MCP poslužitelje? Penpot MCP poslužitelji nisu čak ni u beta fazi, ali to je aktivan eksperiment u kojem možete sudjelovati. Korisnici Penpota već su počeli istraživati slučajeve korištenja MCP poslužitelja, ali Penpot želi vidjeti više. Kako bi se osiguralo da sljedeća generacija alata za dizajn zadovolji potrebe dizajnera, programera i proizvodnih timova općenito, moraju se graditi kolektivno i u suradnji, posebno kada je u pitanju AI. Napomena: Penpot traži beta testere željne istraživanja, eksperimentiranja i pomoći u usavršavanju Penpotovog MCP poslužitelja. Da biste se pridružili, pišite na support@penpot.app s predmetom "MCP beta test volonter". Postoji li nešto što mislite da bi Penpot MCP poslužitelji mogli učiniti, a trenutni alati ne mogu učiniti dovoljno dobro, dovoljno brzo ili uopće ne mogu? Možete naučiti kako postaviti Penpot MCP poslužitelj upravo ovdje i početi petljati danas, ili ako vaš mozak već vrvi od ideja, Penpot želi da se pridružite raspravi, podijelite svoje povratne informacije i razgovarate o svojim slučajevima korištenja. Alternativno, ni odjeljak za komentare odmah ispod nije loše mjesto za početak!
