Denne artikkelen er sponset av Penpot Tenk deg at Penpot-filen din inneholder et komplett ikonsett i tillegg til selve designet, som bruker noen, men ikke alle, av disse ikonene. Hvis du skulle be en AI som Claude eller Gemini om å eksportere bare ikonene som brukes, ville den ikke kunne gjøre det. Det er ikke i stand til å samhandle med Penpot-filer. Imidlertid kan en Penpot MCP-server. Den kan utføre et håndplukket antall operasjoner under fastsatte regler og tillatelser, spesielt siden Penpot har et omfattende API og enda mer fordi det er åpen kildekode. AIs jobb er ganske enkelt å forstå intensjonen din, velge den riktige operasjonen som MCP-serveren skal utføre (en eksport i dette tilfellet), og sende videre eventuelle parametere (dvs. ikoner som brukes). MCP-serveren oversetter deretter dette til en strukturert API-forespørsel og utfører den. Det kan hjelpe å tenke på AI som en server i en restaurant som tar imot bestillingen din, MCP-serveren som både meny og kokk, og API-forespørselen som (forhåpentligvis) en varm pizzapai på en varm tallerken. Hvorfor MCP-servere, akkurat? Vel, Penpot er ikke i stand til å forstå intensjonen din fordi den ikke er en LLM, og den tillater heller ikke tredjeparts LLM-er å samhandle med Penpot-filene dine for sikkerheten og personvernet til Penpot-dataene dine. Selv om Penpot MCP-servere fungerer som en sikker bro, oversetter AI-intensjon til API-forespørsler ved å bruke Penpot-filene og dataene dine som kontekst. Det som er enda bedre er at fordi Penpot har en designuttrykt-som-kode-tilnærming, kan design lages, redigeres og analyseres programmatisk på et granulært nivå. Den er mer kontekstuell, mer spesiell og derfor kraftigere sammenlignet med hva andre MCP-servere tilbyr, og langt mer gjennomtenkt enn underparagrafen 'Beskriv → Generer' AI-arbeidsflyt som jeg ikke tror noen virkelig vil ha. Penpots AI whitepaper beskriver dette som den dårlige tilnærmingen og 'Konverter til kode'-tilnærmingen som den stygge tilnærmingen, mens MCP-servere er mer raffinerte og tilpasningsdyktige. Funksjoner og tekniske detaljer Før vi går videre til brukssaker, her er noen funksjoner og tekniske detaljer som forklarer hvordan Penpot MCP-servere fungerer:
Samsvarer med MCP-standarder; Integrerer med Penpot API for sanntids designdata; Inkluderer en Python SDK, REST API, plugin-system og CLI-verktøy; Fungerer med alle MCP-aktiverte AI-assistenter (Claude i VS-kode, Claude i Cursor, Claude Desktop, etc.); Støtter deling av designkontekst med AI-modeller, og la dem se og forstå komponenter; Forenkler kommunikasjon med Penpot ved bruk av naturlig språk.
Hva kan da MCP-servere gjøre oss i stand til å gjøre i Penpot, og hva har eksisterende eksperimenter allerede oppnådd? La oss ta en titt. Penpot MCP Server Use-Cases Hvis du bare vil hoppe til hva Penpot MCP-servere kan gjøre, har Penpot noen få MCP-demoer lagret i en Google Drive som er mer enn verdt å se. Penpot-sjef Pablo Ruiz-Múzquiz nevnte at videoene 03, 04, 06, 08 og 12 er deres favoritter. En enda raskere måte å oppsummere MCP-servere på er å se avdukingen fra Penpot Fest 2025. Ellers, la oss ta en titt på noen av de mer raffinerte eksemplene som Penpot demonstrerte i deres offentlige utstillingsvindu. Design-til-kode og tilbake igjen (og mer) Ut fra det jeg sa tidligere om hvordan Penpot-design uttrykkes som kode, betyr dette at MCP-servere kan brukes til å konvertere design til kode ved hjelp av AI, men også kode til design, design til dokumentasjon, dokumentasjon for å designe systemelementer, design for å kode igjen basert på nevnte designsystem, og så helt nye komponenter basert på nevnte designsystem. Det høres surrealistisk ut, men demoen nedenfor viser denne forvandlingsevnen, og den er ikke fra vag instruksjon, men snarere tidligere designvalg, uavhengig av hvordan de ble uttrykt (design, kode eller dokumentasjon). Det er ingen overraskelser – dette er rett og slett avgjørelsene du uansett ville ha tatt basert på tidligere beslutninger, utført raskt. I demoen transformerer Juan de la Cruz García, designer hos Penpot, noen enkle komponenter friksjonsfritt til dokumentasjon, designsystemelementer, kode, nye komponenter og til og med et komplett Storybook-prosjekt som et stykke Play-Doh: Design-til-kode, design/kodevalidering og enkle operasjoner I en lignende demo nedenfor, oppretter Dominik Jain, medgründer ved Oraios AI, en Node.js-webapp basert på designet før oppdatering av frontend-stilene, lagrer navn og identifikatorer i minnet for å sikre jevn design-til-kode-oversettelse før du sjekker den for konsistens, legger til enkommentere ved siden av den valgte formen i Penpot, og erstatter deretter en skribleri i Penpot med en tilpasset komponent. Det er mye som skjer her, men du kan se nøyaktig hva Dominik skriver inn i Claude Desktop, så vel som Claudes svar, og det er veldig robust: Forresten, den forrige demoen brukte Claude i VS Code, så jeg bør merke meg at Penpot MCP-servere er LLM-agnostiske. Din teknologistabel er helt opp til deg. IvanTheGeek klarte å sette opp MCP-serveren deres med JetBrains Rider IDE og Junie AI. Flere brukssaker Oversett et Penpot-tavle til produksjonsklar semantisk HTML og modulær CSS mens du utnytter alle Penpot-designtokens (husk at Penpot-design allerede er uttrykt som kode, så dette er ikke et skudd i mørket): Generer en interaktiv nettprototype uten å endre eksisterende HTML: Som vist tidligere, konverter en skribleri til en komponent ved å utnytte eksisterende design- og/eller designsystemelementer: Lag designsystemdokumentasjon fra en Penpot-fil: Og her er noen flere brukssaker fra Penpot og samfunnet:
Avansert eksport, Søk etter designelementer ved å bruke naturlig språk, Trekk data fra eksterne APIer ved å bruke naturlig språk, Koble Penpot enkelt til andre eksterne verktøy, Lagre repeterende oppgaver i minnet og utføre dem, Visuell regresjonstesting, Designkonsistens og redundanskontroll, Tilgjengelighet og brukervennlighet analyse og tilbakemelding, Design systemoverholdelseskontroll, Kontroll av overholdelse av retningslinjer (merkevare, innhold osv.), Overvåk adopsjon og bruk med designanalyse, Hold dokumentasjonen automatisk synkronisert med design, Design filorganisering (f.eks. tagging/kategorisering).
Penpot MCP-servere leder i hovedsak veien til et uendelig antall arbeidsflyter takket være effektiviteten og enkelheten til din valgte LLM/LLM-klient, men uten å eksponere dataene dine for det. Hva ville du brukt MCP-servere til? Penpot MCP-servere er ikke engang på betastadiet, men det er et aktivt eksperiment du kan være en del av. Penpot-brukere har allerede begynt å utforske brukstilfeller for MCP-servere, men Penpot ønsker å se mer. For å sikre at neste generasjon designverktøy møter behovene til designere, utviklere og produktteam generelt, må de bygges kollektivt og i samarbeid, spesielt når det gjelder AI. Merk: Penpot leter etter betatestere som er ivrige etter å utforske, eksperimentere med og hjelpe til med å forbedre Penpots MCP-server. For å bli med, skriv til support@penpot.app med emnelinjen "MCP beta test volunteer." Er det noe du føler at Penpot MCP-servere kan gjøre som dagens verktøy ikke er i stand til å gjøre godt nok, raskt nok eller ikke er i stand til i det hele tatt? Du kan lære hvordan du setter opp en Penpot MCP-server her og begynne å fikle i dag, eller hvis hjernen din allerede surrer av ideer, vil Penpot at du skal bli med i diskusjonen, dele tilbakemeldingen din og snakke om brukssakene dine. Alternativt er kommentarfeltet rett nedenfor heller ikke et dårlig sted å starte!
