Dit artikel wordt gesponsord door Penpot Stel je voor dat je Penpot-bestand een volledige iconenset bevat naast het ontwerp zelf, dat enkele, maar niet al deze iconen gebruikt. Als je een AI zoals Claude of Gemini zou vragen om alleen de pictogrammen te exporteren die worden gebruikt, zou hij dat niet kunnen doen. Het kan niet communiceren met Penpot-bestanden. Een Penpot MCP-server kan dat echter wel. Het kan een zorgvuldig uitgekozen aantal bewerkingen uitvoeren onder vaste regels en machtigingen, vooral omdat Penpot een uitgebreide API heeft en nog meer omdat het open-source is. De taak van de AI is simpelweg om uw bedoeling te begrijpen, de juiste bewerking te kiezen die de MCP-server moet uitvoeren (een export in dit geval) en alle parameters door te geven (d.w.z. pictogrammen die worden gebruikt). De MCP-server vertaalt dit vervolgens naar een gestructureerd API-verzoek en voert dit uit. Het kan helpen om AI te zien als een server in een restaurant die je bestelling opneemt, de MCP-server als zowel het menu als de chef-kok, en het API-verzoek als (hopelijk) een hete pizzataart op een warm bord. Waarom MCP-servers precies? Welnu, Penpot kan uw bedoeling niet begrijpen omdat het geen LLM is, en het staat LLM's van derden ook niet toe om met uw Penpot-bestanden te communiceren voor de veiligheid en privacy van uw Penpot-gegevens. Hoewel Penpot MCP-servers fungeren als een veilige brug, vertalen ze de AI-intentie naar API-verzoeken met behulp van uw Penpot-bestanden en gegevens als context. Wat nog beter is, is dat omdat Penpot een ontwerp-uitgedrukt-als-code-aanpak hanteert, ontwerpen programmatisch op een gedetailleerd niveau kunnen worden gemaakt, bewerkt en geanalyseerd. Het is meer contextueel, specifieker en daarom krachtiger in vergelijking met wat andere MCP-servers bieden, en veel doordachter dan de ondermaatse ‘Beschrijf → Genereer’ AI-workflow waarvan ik denk dat niemand die echt wil. Het AI-whitepaper van Penpot beschrijft dit als de slechte aanpak en de ‘Convert to Code’-aanpak als de lelijke aanpak, terwijl MCP-servers verfijnder en aanpasbaarder zijn. Kenmerken en technische details Voordat we verder gaan met gebruiksscenario's, volgen hier enkele functies en technische details die verder uitleggen hoe Penpot MCP-servers werken:
Voldoet aan MCP-normen; Integreert met de Penpot API voor realtime ontwerpgegevens; Bevat een Python SDK, REST API, plug-insysteem en CLI-tools; Werkt met elke MCP-compatibele AI-assistent (Claude in VS Code, Claude in Cursor, Claude Desktop, enz.); Ondersteunt het delen van ontwerpcontext met AI-modellen, en laat hen componenten zien en begrijpen; Vergemakkelijkt de communicatie met Penpot met behulp van natuurlijke taal.
Wat kunnen MCP-servers ons dan in staat stellen in Penpot te doen, en wat hebben bestaande experimenten al bereikt? Laten we eens kijken. Gebruiksscenario's voor Penpot MCP-servers Als je gewoon wilt doorgaan met wat Penpot MCP-servers kunnen doen, heeft Penpot een paar MCP-demo's opgeslagen in een Google Drive die meer dan de moeite waard zijn om te bekijken. Penpot CEO Pablo Ruiz-Múzquiz zei dat video's 03, 04, 06, 08 en 12 hun favorieten zijn. Een nog snellere manier om MCP-servers samen te vatten is door de onthulling van Penpot Fest 2025 te bekijken. Laten we anders eens kijken naar enkele van de meer verfijnde voorbeelden die Penpot in hun publieke showcase demonstreerde. Ontwerp-naar-code en weer terug (en meer) Voortbouwend op wat ik eerder zei over hoe Penpot-ontwerpen worden uitgedrukt als code, betekent dit dat MCP-servers kunnen worden gebruikt om ontwerp naar code om te zetten met behulp van AI, maar ook om code naar ontwerp om te zetten, van ontwerp naar documentatie, van documentatie om systeemelementen te ontwerpen, van ontwerp naar code op basis van dat ontwerpsysteem, en vervolgens van volledig nieuwe componenten op basis van dat ontwerpsysteem. Het klinkt surrealistisch, maar de onderstaande demo laat deze transmutabiliteit zien, en het komt niet door vage instructies, maar eerder door eerdere ontwerpkeuzes, ongeacht hoe ze werden uitgedrukt (ontwerp, code of documentatie). Er zijn geen verrassingen; dit zijn eenvoudigweg de beslissingen die u sowieso zou hebben genomen op basis van eerdere beslissingen, die snel werden uitgevoerd. In de demo zet Juan de la Cruz García, ontwerper bij Penpot, enkele eenvoudige componenten moeiteloos om in documentatie, ontwerpsysteemelementen, code, nieuwe componenten en zelfs een compleet Storybook-project zoals een stukje Play-Doh: Design-to-Code, ontwerp-/codevalidatie en eenvoudige bediening In een vergelijkbare demo hieronder maakt Dominik Jain, medeoprichter van Oraios AI, een Node.js-webapp op basis van het ontwerp voordat de frontend-stijlen worden bijgewerkt, slaat namen en identificatiegegevens op in het geheugen om een soepele vertaling van ontwerp naar code te garanderen voordat deze wordt gecontroleerd op consistentie, voegt eencommentaar naast de geselecteerde vorm in Penpot, en vervangt vervolgens een krabbel in Penpot door een aangepast onderdeel. Er gebeurt hier veel, maar je kunt precies zien wat Dominik in Claude Desktop typt, evenals de antwoorden van Claude, en het is zeer robuust: Trouwens, de vorige demo gebruikte Claude in VS Code, dus ik moet er rekening mee houden dat Penpot MCP-servers LLM-agnostisch zijn. Je tech-stack is helemaal aan jou. IvanTheGeek slaagde erin om hun MCP-server op te zetten met de JetBrains Rider IDE en Junie AI. Meer gebruiksscenario's Vertaal een Penpot-bord naar productieklare semantische HTML en modulaire CSS, terwijl u gebruik maakt van alle Penpot-ontwerptokens (onthoud dat Penpot-ontwerpen al als code worden uitgedrukt, dus dit is geen schot in het donker): Genereer een interactief webprototype zonder de bestaande HTML te wijzigen: Zoals eerder getoond, zet u een krabbel om in een component, waarbij u gebruik maakt van bestaande ontwerp- en/of ontwerpsysteemelementen: Creëer ontwerpsysteemdocumentatie vanuit een Penpot-bestand: En hier zijn nog enkele gebruiksscenario's van Penpot en de gemeenschap:
Geavanceerde export, Zoek naar ontwerpelementen met behulp van natuurlijke taal, Haal gegevens uit externe API's met behulp van natuurlijke taal, Verbind Penpot eenvoudig met andere externe tools, Repetitieve taken in het geheugen opslaan en uitvoeren, Visuele regressietesten, Ontwerpconsistentie en redundantiecontrole, Toegankelijkheids- en bruikbaarheidsanalyse en feedback, Controle van de naleving van ontwerpsystemen, Controle van de naleving van richtlijnen (merk, inhoud, enz.), Houd de adoptie en het gebruik in de gaten met ontwerpanalyses, Houd de documentatie automatisch gesynchroniseerd met het ontwerp, Ontwerp bestandsorganisatie (bijvoorbeeld taggen/categoriseren).
In wezen leiden Penpot MCP-servers de weg naar een oneindig aantal workflows dankzij de efficiëntie en het gemak van de door u gekozen LLM/LLM-client, maar zonder uw gegevens eraan bloot te stellen. Waar zou u MCP-servers voor gebruiken? Penpot MCP-servers bevinden zich nog niet eens in de bètafase, maar het is een actief experiment waar u deel van kunt uitmaken. Penpot-gebruikers zijn al begonnen met het verkennen van gebruiksscenario's voor MCP-servers, maar Penpot wil meer zien. Om ervoor te zorgen dat de volgende generatie ontwerptools voldoet aan de behoeften van ontwerpers, ontwikkelaars en productteams in het algemeen, moeten ze collectief en in samenwerking worden gebouwd, vooral als het om AI gaat. Opmerking: Penpot is op zoek naar bètatesters die graag de MCP-server van Penpot willen verkennen, ermee willen experimenteren en helpen deze te verfijnen. Om mee te doen, schrijft u naar support@penpot.app met als onderwerpregel “MCP bètatestvrijwilliger.” Is er iets waarvan u denkt dat Penpot MCP-servers dat kunnen, maar dat de huidige tools niet goed genoeg, snel genoeg of helemaal niet kunnen? U kunt hier leren hoe u een Penpot MCP-server kunt opzetten en vandaag nog kunt beginnen met sleutelen, of als uw hersenen al bruisen van ideeën, wil Penpot dat u deelneemt aan de discussie, uw feedback deelt en over uw gebruiksscenario's praat. Als alternatief is het commentaargedeelte hieronder ook geen slechte plek om te beginnen!
