Tento článok je sponzorovaný spoločnosťou Penpot Predstavte si, že váš súbor Penpot obsahuje okrem samotného dizajnu aj celú sadu ikon, ktorá používa niektoré, ale nie všetky z týchto ikon. Ak by ste požiadali AI, ako je Claude alebo Gemini, aby exportovali iba ikony, ktoré sa používajú, nebolo by to možné. Nie je schopný interagovať so súbormi Penpot. Server Penpot MCP však môže. Môže vykonávať ručne vybraný počet operácií podľa stanovených pravidiel a povolení, najmä preto, že Penpot má rozsiahle API a ešte viac, pretože je to open-source. Úlohou AI je jednoducho pochopiť váš zámer, vybrať správnu operáciu, ktorú má server MCP vykonať (v tomto prípade export), a odovzdať všetky parametre (t. j. ikony, ktoré sa používajú). Server MCP to potom preloží do štruktúrovanej požiadavky API a vykoná ju. Mohlo by vám pomôcť predstaviť si AI ako server v reštaurácii, ktorá prijíma vašu objednávku, server MCP ako menu aj šéfkuchára a požiadavku API ako (dúfajme) horúci koláč na pizzu na teplom tanieri. Prečo presne servery MCP? Penpot nie je schopný pochopiť váš zámer, pretože to nie je LLM, ani neumožňuje LLM tretích strán interagovať s vašimi súbormi Penpot pre bezpečnosť a súkromie vašich údajov Penpot. Aj keď servery Penpot MCP fungujú ako bezpečný most, prekladajú zámery AI do požiadaviek API pomocou súborov a údajov Penpot ako kontextu. Čo je ešte lepšie, pretože Penpot využíva prístup dizajnu vyjadrený ako kód, návrhy možno programovo vytvárať, upravovať a analyzovať na podrobnej úrovni. Je kontextovejší, konkrétnejší, a preto výkonnejší v porovnaní s tým, čo ponúkajú iné servery MCP, a je oveľa premyslenejší ako podriadený pracovný postup AI „Popis → Generovať“, ktorý podľa mňa naozaj nikto nechce. Biela kniha Penpot o AI to popisuje ako zlý prístup a prístup „Previesť na kód“ ako škaredý prístup, zatiaľ čo servery MCP sú prepracovanejšie a prispôsobivejšie. Vlastnosti a technické detaily Predtým, ako prejdeme k prípadom použitia, tu sú niektoré funkcie a technické podrobnosti, ktoré ďalej vysvetľujú, ako fungujú servery Penpot MCP:
Vyhovuje štandardom MCP; Integruje sa s Penpot API pre návrhové dáta v reálnom čase; Obsahuje Python SDK, REST API, systém doplnkov a nástroje CLI; Spolupracuje s akýmkoľvek asistentom AI s podporou MCP (Claude v kóde VS, Claude v kurzore, Claude Desktop atď.); Podporuje zdieľanie kontextu dizajnu s modelmi AI a umožňuje im vidieť a porozumieť komponentom; Uľahčuje komunikáciu s Penpot pomocou prirodzeného jazyka.
Čo by nám teda mohli servery MCP umožniť v Penpote a čo už dosiahli existujúce experimenty? Poďme sa na to pozrieť. Prípady použitia servera Penpot MCP Ak chcete len preskočiť na to, čo dokážu servery Penpot MCP, Penpot má na Disku Google uložených niekoľko ukážok MCP, ktoré sa oplatí sledovať. Generálny riaditeľ Penpotu Pablo Ruiz-Múzquiz uviedol, že videá 03, 04, 06, 08 a 12 sú ich obľúbené. Ešte rýchlejší spôsob, ako zhrnúť servery MCP, je sledovať odhalenie z Penpot Fest 2025. V opačnom prípade sa pozrime na niektoré z rafinovanejších príkladov, ktoré Penpot predviedol vo svojej verejnej vitríne. Design-to-Code a späť (a viac) Vychádzajúc z toho, čo som povedal predtým o tom, ako sú návrhy Penpot vyjadrené ako kód, to znamená, že servery MCP možno použiť na konverziu dizajnu na kód pomocou AI, ale aj kód na dizajn, dizajn na dokumentáciu, dokumentáciu na dizajn prvkov systému, návrh na kód znova na základe uvedeného dizajnového systému a potom úplne nové komponenty založené na uvedenom dizajnovom systéme. Znie to neskutočne, ale ukážka nižšie ukazuje túto transmutovateľnosť a nepochádza z vágnych pokynov, ale skôr z predchádzajúcich návrhov, bez ohľadu na to, ako boli vyjadrené (dizajn, kód alebo dokumentácia). Neexistujú žiadne prekvapenia – sú to jednoducho rozhodnutia, ktoré by ste aj tak urobili na základe predchádzajúcich rozhodnutí, vykonaných rýchlo. V ukážke Juan de la Cruz García, dizajnér v Penpote, bez trenia premieňa niektoré jednoduché komponenty na dokumentáciu, dizajnové systémové prvky, kód, nové komponenty a dokonca aj kompletný projekt Storybook ako kúsok Play-Doh: Design-to-Code, Design/Code Validation a jednoduché operácie V podobnej ukážke nižšie Dominik Jain, spoluzakladateľ spoločnosti Oraios AI, vytvorí webovú aplikáciu Node.js založenú na návrhu pred aktualizáciou štýlov frontendu, uloží názvy a identifikátory do pamäte, aby sa zabezpečil hladký preklad z návrhu do kódu pred kontrolou konzistencie, pridávakomentár vedľa vybratého tvaru v Penpote a potom nahradí čmáranicu v Penpote prispôsobeným komponentom. Veľa sa tu deje, ale môžete presne vidieť, čo Dominik píše do Claude Desktop, ako aj Claudeove odpovede, a je to veľmi robustné: Mimochodom, predchádzajúce demo používalo Claude vo VS Code, takže by som mal poznamenať, že servery Penpot MCP sú agnostické LLM. Vaša technologická zásoba je úplne na vás. IvanTheGeek dokázal nastaviť svoj MCP server s JetBrains Rider IDE a Junie AI. Viac prípadov použitia Preložte tabuľu Penpot do sémantického HTML a modulárneho CSS pripraveného na výrobu a zároveň využite akékoľvek tokeny dizajnu Penpot (nezabudnite, že návrhy Penpot sú už vyjadrené ako kód, takže to nie je výstrel do tmy): Vytvorte interaktívny webový prototyp bez zmeny existujúceho HTML: Ako bolo uvedené vyššie, konvertujte čmáranicu na komponent s využitím existujúcich prvkov dizajnu a/alebo konštrukčného systému: Vytvorte dokumentáciu návrhového systému zo súboru Penpot: A tu sú niektoré ďalšie prípady použitia od spoločnosti Penpot a komunity:
Pokročilé exporty, Hľadajte dizajnové prvky pomocou prirodzeného jazyka, Načítať údaje z externých rozhraní API pomocou prirodzeného jazyka, Jednoducho pripojte Penpot k iným externým nástrojom, Ukladanie opakujúcich sa úloh do pamäte a ich vykonávanie, Vizuálne regresné testovanie, Kontrola konzistencie dizajnu a redundancie, Analýza dostupnosti a použiteľnosti a spätná väzba, kontrola súladu konštrukčného systému, Kontrola súladu s pokynmi (značka, obsah atď.), Monitorujte prijatie a používanie pomocou analýzy dizajnu, Automaticky udržiavať dokumentáciu v synchronizácii s dizajnom, Organizácia súboru dizajnu (napr. označovanie/kategorizácia).
Servery Penpot MCP v podstate vedú k nekonečnému množstvu pracovných tokov vďaka efektívnosti a jednoduchosti vami zvoleného klienta LLM/LLM, ale bez toho, aby mu boli vystavené vaše údaje. Na čo by ste použili servery MCP? Servery Penpot MCP nie sú ani vo fáze beta, ale ide o aktívny experiment, ktorého sa môžete zúčastniť. Používatelia Penpotu už začali skúmať prípady použitia serverov MCP, ale Penpot chce vidieť viac. Aby sa zabezpečilo, že budúca generácia návrhárskych nástrojov bude spĺňať potreby dizajnérov, vývojárov a produktových tímov vo všeobecnosti, musia byť vytvorené kolektívne a na základe spolupráce, najmä pokiaľ ide o AI. Poznámka: Penpot hľadá beta testerov, ktorí chcú preskúmať, experimentovať a pomôcť vylepšiť Penpot MCP Server. Ak sa chcete pripojiť, napíšte na support@penpot.app s predmetom „MCP beta testovací dobrovoľník“. Existuje niečo, čo by podľa vás servery Penpot MCP mohli urobiť, čo súčasné nástroje nedokážu dostatočne dobre, dostatočne rýchlo alebo nie sú schopné robiť vôbec? Priamo tu sa môžete naučiť, ako nastaviť Penpot MCP server a začať sa hrabať ešte dnes, alebo ak váš mozog už prekypuje nápadmi, Penpot chce, aby ste sa zapojili do diskusie, podelili sa o svoju spätnú väzbu a porozprávali sa o svojich prípadoch použitia. Prípadne sekcia komentárov nižšie nie je zlým miestom na začatie!
