Den här artikeln är sponsrad av Penpot Föreställ dig att din Penpot-fil innehåller en fullständig ikonuppsättning utöver själva designen, som använder några men inte alla av dessa ikoner. Om du skulle be en AI som Claude eller Gemini att endast exportera de ikoner som används, skulle den inte kunna göra det. Det går inte att interagera med Penpot-filer. Det kan dock en Penpot MCP-server. Den kan utföra ett handplockat antal operationer under fastställda regler och behörigheter, särskilt eftersom Penpot har ett omfattande API och ännu mer eftersom det är öppen källkod. AI:s jobb är helt enkelt att förstå din avsikt, välja rätt operation som MCP-servern ska utföra (en export i det här fallet) och skicka vidare alla parametrar (dvs ikoner som används). MCP-servern översätter sedan detta till en strukturerad API-begäran och exekverar den. Det kan hjälpa att tänka på AI som en server på en restaurang som tar emot din beställning, MCP-servern som både meny och kock, och API-begäran som (förhoppningsvis) en varm pizzapaj på en varm tallrik. Varför just MCP-servrar? Tja, Penpot kan inte förstå din avsikt eftersom det inte är en LLM, och det tillåter inte heller tredjeparts LLM:er att interagera med dina Penpot-filer för säkerheten och integriteten för dina Penpot-data. Även om Penpot MCP-servrar fungerar som en säker brygga, översätter AI-avsikter till API-förfrågningar med dina Penpot-filer och data som sammanhang. Vad som är ännu bättre är att eftersom Penpot använder en designuttryckt-som-kod-metod, kan design skapas, redigeras och analyseras programmatiskt på en granulär nivå. Det är mer kontextuellt, mer specifikt och därför mer kraftfullt i jämförelse med vad andra MCP-servrar erbjuder, och mycket mer genomtänkt än underparagrafen "Beskriv → Generera" AI-arbetsflöde som jag inte tror att någon verkligen vill ha. Penpots AI-vitbok beskriver detta som det dåliga tillvägagångssättet och "Konvertera till kod"-metoden som den fula metoden, medan MCP-servrar är mer raffinerade och anpassningsbara. Funktioner och tekniska detaljer Innan vi går vidare till användningsfall, här är några funktioner och tekniska detaljer som ytterligare förklarar hur Penpot MCP-servrar fungerar:
Uppfyller MCP-standarder; Integreras med Penpot API för designdata i realtid; Inkluderar en Python SDK, REST API, plugin-system och CLI-verktyg; Fungerar med alla MCP-aktiverade AI-assistenter (Claude i VS Code, Claude i Cursor, Claude Desktop, etc.); Stöder att dela designkontext med AI-modeller och låta dem se och förstå komponenter; Underlättar kommunikation med Penpot med naturligt språk.
Vad kan MCP-servrar göra det möjligt för oss att göra i Penpot, och vad har befintliga experiment redan uppnått? Låt oss ta en titt. Användningsfall för Penpot MCP Server Om du bara vill hoppa till vad Penpot MCP-servrar kan göra, har Penpot några MCP-demos lagrade i en Google Drive som är mer än värda att titta på. Penpots vd Pablo Ruiz-Múzquiz nämnde att videorna 03, 04, 06, 08 och 12 är deras favoriter. Ett ännu snabbare sätt att sammanfatta MCP-servrar är att se avtäckningen från Penpot Fest 2025. Annars, låt oss ta en titt på några av de mer raffinerade exemplen som Penpot visade i sin offentliga showcase. Design-to-Code och tillbaka igen (och mer) Utgående från det jag sa tidigare om hur Penpot-designer uttrycks som kod, betyder det att MCP-servrar kan användas för att konvertera design till kod med hjälp av AI, men även kod till design, design till dokumentation, dokumentation för att designa systemelement, design för att koda igen baserat på nämnda designsystem, och sedan helt nya komponenter baserade på nämnda designsystem. Det låter overkligt, men demon nedan visar upp denna omvandlingsbarhet, och det är inte från vaga instruktioner utan snarare tidigare designval, oavsett hur de uttrycktes (design, kod eller dokumentation). Det finns inga överraskningar – det här är helt enkelt de beslut som du ändå skulle ha fattat baserat på tidigare beslut, utförda snabbt. I demon omvandlar Juan de la Cruz García, designer på Penpot, friktionsfritt några enkla komponenter till dokumentation, designsystemelement, kod, nya komponenter och till och med ett komplett Storybook-projekt som en del av Play-Doh: Design-till-kod, design/kodvalidering och enkla operationer I en liknande demo nedan skapar Dominik Jain, medgrundare på Oraios AI, en Node.js-webbapp baserat på designen innan gränssnittsstilarna uppdateras, sparar namn och identifierare i minnet för att säkerställa smidig design-till-kod-översättning innan den kontrolleras för konsistens, lägger till enkommentera bredvid den valda formen i Penpot, och ersätter sedan en klotter i Penpot med en anpassad komponent. Det händer mycket här, men du kan se exakt vad Dominik skriver i Claude Desktop såväl som Claudes svar, och det är väldigt robust: Förresten, den tidigare demon använde Claude i VS Code, så jag bör notera att Penpot MCP-servrar är LLM-agnostiska. Din tekniska stack är helt upp till dig. IvanTheGeek lyckades ställa in sin MCP-server med JetBrains Rider IDE och Junie AI. Fler användningsfall Översätt ett Penpot-kort till produktionsfärdigt semantiskt HTML och modulär CSS samtidigt som du utnyttjar alla Penpot-designtokens (kom ihåg att Penpot-designer redan uttrycks som kod, så det här är inte ett skott i mörkret): Skapa en interaktiv webbprototyp utan att ändra befintlig HTML: Som visats tidigare, konvertera en klotter till en komponent, utnyttja befintlig design och/eller designsystemelement: Skapa designsystemdokumentation från en Penpot-fil: Och här är några fler användningsfall från Penpot och communityn:
Avancerad export, Sök efter designelement med naturligt språk, Hämta data från externa API:er med naturligt språk, Anslut Penpot enkelt till andra externa verktyg, Spara repetitiva uppgifter i minnet och utföra dem, Visuell regressionstestning, Designkonsistens och redundanskontroll, Tillgänglighets- och användbarhetsanalys och feedback, Designa systemöverensstämmelsekontroll, Kontroll av efterlevnad av riktlinjer (varumärke, innehåll, etc.), Övervaka införande och användning med designanalys, Håll dokumentation automatiskt synkroniserad med design, Designa filorganisation (t.ex. taggning/kategorisering).
Penpot MCP-servrar leder i huvudsak vägen till ett oändligt antal arbetsflöden tack vare effektiviteten och enkelheten hos din valda LLM/LLM-klient, men utan att exponera dina data för det. Vad skulle du använda MCP-servrar till? Penpot MCP-servrar är inte ens i betastadiet, men det är ett aktivt experiment som du kan vara en del av. Penpot-användare har redan börjat utforska användningsfall för MCP-servrar, men Penpot vill se mer. För att säkerställa att nästa generations designverktyg möter behoven hos designers, utvecklare och produktteam i allmänhet, måste de byggas kollektivt och tillsammans, särskilt när det gäller AI. Notera: Penpot letar efter betatestare som är ivriga att utforska, experimentera med och hjälpa till att förfina Penpots MCP-server. För att gå med, skriv till support@penpot.app med ämnesraden "MCP beta test volontär." Finns det något som du känner att Penpot MCP-servrar kan göra som nuvarande verktyg inte kan göra tillräckligt bra, tillräckligt snabbt eller inte kan göra alls? Du kan lära dig hur du ställer in en Penpot MCP-server här och börja mixtra idag, eller om din hjärna redan surrar av idéer vill Penpot att du ska gå med i diskussionen, dela din feedback och prata om dina användningsfall. Alternativt är kommentarsektionen precis nedan inte ett dåligt ställe att börja heller!
