Denne artikel er sponsoreret af Penpot Forestil dig, at din Penpot-fil indeholder et komplet ikonsæt ud over selve designet, som bruger nogle, men ikke alle, af disse ikoner. Hvis du skulle bede en AI som Claude eller Gemini om kun at eksportere de ikoner, der bliver brugt, ville den ikke kunne gøre det. Det er ikke i stand til at interagere med Penpot-filer. Det kan en Penpot MCP-server dog. Det kan udføre et håndplukket antal operationer under fastsatte regler og tilladelser, især da Penpot har en omfattende API og endnu mere fordi den er open source. AI'ens opgave er simpelthen at forstå din hensigt, vælge den rigtige handling for MCP-serveren at udføre (en eksport i dette tilfælde) og videregive eventuelle parametre (dvs. ikoner, der bliver brugt). MCP-serveren oversætter derefter dette til en struktureret API-anmodning og udfører den. Det kan måske hjælpe at tænke på AI som en server i en restaurant, der tager imod din ordre, MCP-serveren som både menuen og kokken og API-anmodningen som (forhåbentlig) en varm pizzatærte på en varm tallerken. Hvorfor præcist MCP-servere? Nå, Penpot er ikke i stand til at forstå din hensigt, fordi det ikke er en LLM, og det tillader heller ikke tredjeparts LLM'er at interagere med dine Penpot-filer for sikkerheden og privatlivets fred for dine Penpot-data. Selvom Penpot MCP-servere fungerer som en sikker bro, oversætter de AI-hensigter til API-anmodninger ved hjælp af dine Penpot-filer og data som kontekst. Hvad der er endnu bedre er, at fordi Penpot tager en design-udtrykt-som-kode-tilgang, kan designs programmatisk oprettes, redigeres og analyseres på et granulært niveau. Det er mere kontekstuelt, mere specifikt og derfor mere kraftfuldt i forhold til, hvad andre MCP-servere tilbyder, og langt mere gennemtænkt end underparagrafen 'Beskriv → Generer' AI-workflow, som jeg ikke tror, nogen virkelig ønsker. Penpots AI whitepaper beskriver dette som den dårlige tilgang og 'Konverter til kode' tilgangen som den grimme tilgang, hvorimod MCP-servere er mere raffinerede og tilpasningsdygtige. Funktioner og tekniske detaljer Før vi går videre til brugssager, er her nogle funktioner og tekniske detaljer, der yderligere forklarer, hvordan Penpot MCP-servere fungerer:
Overholder MCP-standarder; Integrerer med Penpot API til realtids designdata; Inkluderer et Python SDK, REST API, plugin-system og CLI-værktøjer; Fungerer med enhver MCP-aktiveret AI-assistent (Claude i VS Code, Claude i Cursor, Claude Desktop osv.); Understøtter deling af designkontekst med AI-modeller og lader dem se og forstå komponenter; Letter kommunikationen med Penpot ved hjælp af naturligt sprog.
Hvad kunne MCP-servere så sætte os i stand til at gøre i Penpot, og hvad har eksisterende eksperimenter allerede opnået? Lad os tage et kig. Penpot MCP Server Use-Cases Hvis du bare vil springe til, hvad Penpot MCP-servere kan gøre, har Penpot et par MCP-demoer gemt i et Google Drev, som er mere end værd at se. Penpot CEO Pablo Ruiz-Múzquiz nævnte, at videoerne 03, 04, 06, 08 og 12 er deres favoritter. En endnu hurtigere måde at opsummere MCP-servere på er at se afsløringen fra Penpot Fest 2025. Ellers, lad os tage et kig på nogle af de mere raffinerede eksempler, som Penpot demonstrerede i deres offentlige udstilling. Design-til-kode og tilbage igen (og mere) Ud fra det jeg sagde tidligere om, hvordan Penpot-designs udtrykkes som kode, betyder det, at MCP-servere kan bruges til at konvertere design til kode ved hjælp af AI, men også kode til design, design til dokumentation, dokumentation til design af systemelementer, design til kode igen baseret på nævnte designsystem, og så helt nye komponenter baseret på nævnte designsystem. Det lyder surrealistisk, men demoen nedenfor viser denne forvandlingsevne, og det er ikke fra vag instruktion, men snarere tidligere designvalg, uanset hvordan de blev udtrykt (design, kode eller dokumentation). Der er ingen overraskelser - det er simpelthen de beslutninger, du ville have truffet alligevel baseret på tidligere beslutninger, udført hurtigt. I demoen omdanner Juan de la Cruz García, designer hos Penpot, friktionsfrit nogle simple komponenter til dokumentation, designsystemelementer, kode, nye komponenter og endda et komplet Storybook-projekt som et stykke Play-Doh: Design-til-kode, design/kodevalidering og simple operationer I en lignende demo nedenfor opretter Dominik Jain, medstifter hos Oraios AI, en Node.js-webapp baseret på designet før opdatering af frontend-stilene, gemmer navne og identifikatorer i hukommelsen for at sikre glat design-til-kode-oversættelse, før du kontrollerer det for konsistens, tilføjer enkommentere ud for den valgte form i Penpot, og erstatter derefter en skribleri i Penpot med en tilpasset komponent. Der sker meget her, men du kan se præcis, hvad Dominik skriver på Claude Desktop såvel som Claudes svar, og det er meget robust: Forresten brugte den tidligere demo Claude i VS Code, så jeg skal bemærke, at Penpot MCP-servere er LLM-agnostiske. Din tekniske stak er helt op til dig. IvanTheGeek formåede at opsætte deres MCP-server med JetBrains Rider IDE og Junie AI. Flere brugssager Oversæt et Penpot-kort til produktionsklar semantisk HTML og modulær CSS, mens du udnytter alle Penpot-designtokens (husk, at Penpot-designs allerede er udtrykt som kode, så dette er ikke et skud i mørket): Generer en interaktiv webprototype uden at ændre den eksisterende HTML: Som vist tidligere, konverter en skribleri til en komponent ved at udnytte eksisterende design- og/eller designsystemelementer: Opret designsystemdokumentation fra en Penpot-fil: Og her er nogle flere use-cases fra Penpot og samfundet:
Avanceret eksport, Søg efter designelementer ved hjælp af naturligt sprog, Træk data fra eksterne API'er ved hjælp af naturligt sprog, Tilslut nemt Penpot til andre eksterne værktøjer, Gemme gentagne opgaver i hukommelsen og udføre dem, Visuel regressionstest, Designkonsistens og redundanskontrol, Tilgængeligheds- og brugervenlighedsanalyse og feedback, Design systemoverholdelseskontrol, Kontrol af overholdelse af retningslinjer (brand, indhold osv.), Overvåg overtagelse og brug med designanalyse, Hold automatisk dokumentation synkroniseret med design, Design filorganisation (f.eks. tagging/kategorisering).
I det væsentlige leder Penpot MCP-servere vejen til et uendeligt antal arbejdsgange takket være effektiviteten og letheden af din valgte LLM/LLM-klient, men uden at udsætte dine data for det. Hvad ville du bruge MCP-servere til? Penpot MCP-servere er ikke engang på betastadiet, men det er et aktivt eksperiment, som du kan være en del af. Penpot-brugere er allerede begyndt at udforske use cases for MCP-servere, men Penpot ønsker at se mere. For at sikre, at den næste generation af designværktøjer opfylder behovene hos designere, udviklere og produktteams generelt, skal de bygges kollektivt og i fællesskab, især hvad angår kunstig intelligens. Bemærk: Penpot leder efter betatestere, der er ivrige efter at udforske, eksperimentere med og hjælpe med at forfine Penpots MCP-server. For at deltage skal du skrive til support@penpot.app med emnelinjen "MCP beta test volunteer." Er der noget, du føler, at Penpot MCP-servere kunne gøre, som de nuværende værktøjer ikke er i stand til at gøre godt nok, hurtigt nok eller slet ikke er i stand til? Du kan lære at konfigurere en Penpot MCP-server lige her og begynde at pille i dag, eller hvis din hjerne allerede summer af ideer, vil Penpot have dig til at deltage i diskussionen, dele din feedback og tale om dine use-cases. Alternativt er kommentarafsnittet lige nedenfor heller ikke et dårligt sted at starte!
