Tento článek je sponzorován společností Penpot Představte si, že váš soubor Penpot obsahuje celou sadu ikon kromě samotného designu, který používá některé, ale ne všechny z těchto ikon. Pokud byste požádali AI, jako je Claude nebo Gemini, aby exportovali pouze ikony, které se používají, nebylo by to možné. Není schopen komunikovat se soubory Penpot. Server Penpot MCP však může. Může provádět ručně vybraný počet operací podle nastavených pravidel a oprávnění, zejména proto, že Penpot má rozsáhlé API a ještě více, protože je to open-source. Úkolem AI je jednoduše porozumět vašemu záměru, vybrat správnou operaci, kterou má MCP server provést (v tomto případě export), a předat jakékoli parametry (tj. ikony, které se používají). Server MCP to poté převede na strukturovaný požadavek API a provede jej. Mohlo by vám pomoci představit si AI jako server v restauraci, která přijímá vaši objednávku, server MCP jako menu i šéfkuchaře a požadavek API jako (doufejme) horký pizzový koláč na teplém talíři. Proč přesně servery MCP? No, Penpot není schopen porozumět vašemu záměru, protože to není LLM, ani neumožňuje LLM třetích stran interagovat s vašimi soubory Penpot pro zabezpečení a soukromí vašich dat Penpot. Přestože servery Penpot MCP fungují jako bezpečný most, převádějí záměr AI do požadavků API pomocí souborů a dat Penpot jako kontextu. Ještě lepší je, že protože Penpot používá přístup k návrhu vyjádřenému jako kód, lze návrhy programově vytvářet, upravovat a analyzovat na granulární úrovni. Je kontextovější, konkrétnější, a proto výkonnější ve srovnání s tím, co nabízejí jiné servery MCP, a mnohem promyšlenější než podřadný pracovní postup umělé inteligence „Popis → Generovat“, který si myslím, že nikdo opravdu nechce. Bílá kniha Penpot o AI to popisuje jako špatný přístup a přístup „Převést na kód“ jako ošklivý přístup, zatímco servery MCP jsou rafinovanější a přizpůsobivější. Vlastnosti a technické detaily Než přejdeme k případům použití, zde jsou některé funkce a technické podrobnosti, které dále vysvětlují, jak servery Penpot MCP fungují:
Vyhovuje standardům MCP; Integruje se s Penpot API pro návrhová data v reálném čase; Zahrnuje Python SDK, REST API, zásuvný systém a nástroje CLI; Funguje s jakýmkoli asistentem umělé inteligence s podporou MCP (Claude v kódu VS, Claude v kurzoru, Claude Desktop atd.); Podporuje sdílení kontextu návrhu s modely AI a umožňuje jim vidět a chápat komponenty; Usnadňuje komunikaci s Penpot pomocí přirozeného jazyka.
Co by nám tedy MCP servery mohly umožnit v Penpotu a čeho již dosáhly stávající experimenty? Pojďme se na to podívat. Případy použití serveru Penpot MCP Pokud chcete jen přeskočit na to, co dokážou servery Penpot MCP, Penpot má na Disku Google uloženo několik ukázek MCP, které stojí za to sledovat. Generální ředitel Penpotu Pablo Ruiz-Múzquiz zmínil, že videa 03, 04, 06, 08 a 12 jsou jejich oblíbená. Ještě rychlejší způsob, jak shrnout MCP servery, je sledovat odhalení z Penpot Fest 2025. Jinak se podívejme na některé z rafinovanějších příkladů, které Penpot předvedl ve své veřejné prezentaci. Design-to-Code a zase zpět (a další) Vycházíme-li z toho, co jsem řekl dříve o tom, jak jsou návrhy Penpot vyjádřeny jako kód, znamená to, že servery MCP lze použít k převodu návrhu na kód pomocí AI, ale také kódu k návrhu, návrhu k dokumentaci, dokumentaci k návrhu systémových prvků, návrhu k kódu znovu na základě uvedeného návrhového systému a pak ke zcela novým komponentům založeným na uvedeném návrhovém systému. Zní to surrealisticky, ale ukázka níže ukazuje tuto transmutovatelnost a nepochází z vágních pokynů, ale spíše z předchozích návrhových voleb, bez ohledu na to, jak byly vyjádřeny (návrh, kód nebo dokumentace). Nečekají vás žádná překvapení – jsou to prostě rozhodnutí, která byste stejně udělali na základě předchozích rozhodnutí, provedených rychle. V ukázce Juan de la Cruz García, designér společnosti Penpot, bez tření převádí některé jednoduché komponenty na dokumentaci, prvky návrhu systému, kód, nové komponenty a dokonce i kompletní projekt Storybook jako kus Play-Doh: Design-to-Code, Design/Code Validation a jednoduché operace V podobné ukázce níže Dominik Jain, spoluzakladatel společnosti Oraios AI, vytváří webovou aplikaci Node.js založenou na návrhu před aktualizací stylů frontendu, ukládá názvy a identifikátory do paměti, aby byl zajištěn hladký překlad z návrhu do kódu před kontrolou konzistence, přidávákomentář vedle vybraného tvaru v Penpotu a poté nahradí klikyháky v Penpotu přizpůsobenou komponentou. Hodně se toho děje, ale můžete přesně vidět, co Dominik píše do Claude Desktop, stejně jako Claudeovy odpovědi, a je to velmi robustní: Mimochodem, předchozí demo používalo Claude ve VS Code, takže bych měl poznamenat, že servery Penpot MCP jsou agnostické LLM. Vaše technická zásoba je zcela na vás. IvanTheGeek dokázal nastavit svůj MCP server s JetBrains Rider IDE a Junie AI. Více případů použití Přeložte nástěnku Penpot do sémantického HTML a modulárního CSS připraveného pro produkci a zároveň využijte jakékoli tokeny návrhu Penpot (nezapomeňte, že návrhy Penpot jsou již vyjádřeny jako kód, takže to není výstřel do tmy): Vygenerujte interaktivní webový prototyp bez změny stávajícího HTML: Jak bylo ukázáno výše, převeďte čmáranici na komponentu s využitím existujících prvků návrhu a/nebo konstrukčního systému: Vytvořte dokumentaci návrhového systému ze souboru Penpot: A zde jsou některé další případy použití od Penpotu a komunity:
pokročilé exporty, Hledejte designové prvky pomocí přirozeného jazyka, Vytahujte data z externích rozhraní API pomocí přirozeného jazyka, Snadno připojte Penpot k dalším externím nástrojům, Ukládání opakujících se úkolů do paměti a jejich provádění, Vizuální regresní testování, Kontrola konzistence návrhu a redundance, Analýza přístupnosti a použitelnosti a zpětná vazba, kontrola shody návrhového systému, Kontrola souladu s pokyny (značka, obsah atd.), Monitorujte přijetí a používání pomocí analýzy návrhu, Automaticky udržovat dokumentaci v synchronizaci s návrhem, Organizace souboru návrhu (např. označování/kategorizace).
Servery Penpot MCP v podstatě vedou k nekonečnému počtu pracovních postupů díky efektivitě a jednoduchosti vámi zvoleného klienta LLM/LLM, aniž by mu však vystavovaly vaše data. K čemu byste použili servery MCP? Servery Penpot MCP nejsou ani ve fázi beta, ale je to aktivní experiment, kterého se můžete zúčastnit. Uživatelé Penpotu již začali zkoumat případy použití pro MCP servery, ale Penpot chce vidět více. Aby bylo zajištěno, že nová generace návrhářských nástrojů splňuje potřeby návrhářů, vývojářů a produktových týmů obecně, musí být vytvářeny kolektivně a ve spolupráci, zejména pokud jde o umělou inteligenci. Poznámka: Penpot hledá beta testery, kteří touží prozkoumat, experimentovat a pomoci vylepšit Penpot MCP Server. Chcete-li se připojit, napište na support@penpot.app s předmětem „MCP beta testovací dobrovolník“. Existuje něco, co by podle vás mohly servery Penpot MCP udělat, co současné nástroje nedokážou dělat dostatečně dobře, dostatečně rychle nebo nejsou schopny dělat vůbec? Můžete se naučit, jak nastavit Penpot MCP server přímo zde a začít šťourat ještě dnes, nebo pokud váš mozek už překypuje nápady, Penpot chce, abyste se zapojili do diskuze, sdíleli zpětnou vazbu a mluvili o svých případech použití. Případně sekce komentářů níže není špatným místem, kde začít!
