Dieser Artikel wird von Penpot gesponsert Stellen Sie sich vor, dass Ihre Penpot-Datei zusätzlich zum Design selbst einen vollständigen Symbolsatz enthält, der einige, aber nicht alle dieser Symbole verwendet. Wenn Sie eine KI wie Claude oder Gemini bitten würden, nur die verwendeten Symbole zu exportieren, wäre sie dazu nicht in der Lage. Es ist nicht möglich, mit Penpot-Dateien zu interagieren. Ein Penpot MCP-Server kann dies jedoch. Es kann eine handverlesene Anzahl von Vorgängen unter festgelegten Regeln und Berechtigungen ausführen, insbesondere da Penpot über eine umfangreiche API verfügt und noch mehr, weil es Open Source ist. Die Aufgabe der KI besteht lediglich darin, Ihre Absicht zu verstehen, den richtigen Vorgang auszuwählen, den der MCP-Server ausführen soll (in diesem Fall ein Export), und alle Parameter (d. h. verwendete Symbole) weiterzugeben. Der MCP-Server übersetzt dies dann in eine strukturierte API-Anfrage und führt diese aus. Es könnte hilfreich sein, sich KI als einen Server in einem Restaurant vorzustellen, der Ihre Bestellung entgegennimmt, den MCP-Server sowohl als Menü als auch als Koch und die API-Anfrage als (hoffentlich) eine heiße Pizza auf einem warmen Teller. Warum genau MCP-Server? Nun, Penpot ist nicht in der Lage, Ihre Absicht zu verstehen, da es sich nicht um ein LLM handelt und es auch nicht zulässt, dass LLMs von Drittanbietern mit Ihren Penpot-Dateien interagieren, um die Sicherheit und den Datenschutz Ihrer Penpot-Daten zu gewährleisten. Obwohl Penpot-MCP-Server als sichere Brücke fungieren, übersetzen sie KI-Absichten in API-Anfragen und nutzen dabei Ihre Penpot-Dateien und -Daten als Kontext. Was noch besser ist: Da Penpot einen Design-Ausdruck-als-Code-Ansatz verfolgt, können Designs programmgesteuert erstellt, bearbeitet und auf granularer Ebene analysiert werden. Es ist kontextbezogener, spezifischer und daher leistungsfähiger im Vergleich zu dem, was andere MCP-Server bieten, und weitaus durchdachter als der unterdurchschnittliche KI-Workflow „Beschreiben → Generieren“, den meiner Meinung nach niemand wirklich möchte. Das AI-Whitepaper von Penpot beschreibt dies als den schlechten Ansatz und den „Convert to Code“-Ansatz als den hässlichen Ansatz, wohingegen MCP-Server raffinierter und anpassungsfähiger sind. Funktionen und technische Details Bevor wir zu Anwendungsfällen übergehen, finden Sie hier einige Funktionen und technische Details, die die Funktionsweise von Penpot MCP-Servern näher erläutern:
Entspricht den MCP-Standards; Integriert sich in die Penpot-API für Designdaten in Echtzeit; Enthält ein Python-SDK, eine REST-API, ein Plugin-System und CLI-Tools; Funktioniert mit jedem MCP-fähigen KI-Assistenten (Claude in VS Code, Claude in Cursor, Claude Desktop usw.); Unterstützt die gemeinsame Nutzung von Designkontext mit KI-Modellen und ermöglicht ihnen, Komponenten zu sehen und zu verstehen; Erleichtert die Kommunikation mit Penpot mithilfe natürlicher Sprache.
Was könnten uns MCP-Server dann in Penpot ermöglichen, und was haben bestehende Experimente bereits erreicht? Werfen wir einen Blick darauf. Anwendungsfälle für Penpot MCP-Server Wenn Sie einfach nur zu den Funktionen von Penpot MCP-Servern springen möchten, hat Penpot ein paar MCP-Demos in Google Drive hinterlegt, die mehr als sehenswert sind. Pablo Ruiz-Múzquiz, CEO von Penpot, erwähnte, dass die Videos 03, 04, 06, 08 und 12 ihre Favoriten seien. Eine noch schnellere Möglichkeit, MCP-Server zusammenzufassen, besteht darin, sich die Enthüllung beim Penpot Fest 2025 anzusehen. Ansonsten werfen wir einen Blick auf einige der raffinierteren Beispiele, die Penpot in seiner öffentlichen Präsentation vorführte. Design-to-Code und wieder zurück (und mehr) In Anlehnung an das, was ich zuvor darüber gesagt habe, wie Penpot-Designs als Code ausgedrückt werden, bedeutet dies, dass MCP-Server verwendet werden können, um Design mithilfe von KI in Code umzuwandeln, aber auch Code in Design, Design in Dokumentation, Dokumentation in Design-Systemelemente, Design wieder in Code basierend auf dem Design-System und dann völlig neue Komponenten basierend auf dem Design-System. Es klingt surreal, aber die folgende Demo demonstriert diese Wandelbarkeit, und zwar nicht aus vagen Anweisungen, sondern aus früheren Designentscheidungen, unabhängig davon, wie sie ausgedrückt wurden (Design, Code oder Dokumentation). Es gibt keine Überraschungen – das sind einfach die Entscheidungen, die Sie aufgrund früherer Entscheidungen sowieso getroffen hätten, und die schnell umgesetzt würden. In der Demo wandelt Juan de la Cruz García, Designer bei Penpot, einige einfache Komponenten reibungslos in Dokumentation, Designsystemelemente, Code, neue Komponenten und sogar ein komplettes Storybook-Projekt wie ein Stück Play-Doh um: Design-to-Code, Design-/Codevalidierung und einfache Vorgänge In einer ähnlichen Demo unten erstellt Dominik Jain, Mitbegründer von Oraios AI, eine Node.js-Webanwendung basierend auf dem Design, bevor er die Frontend-Stile aktualisiert, speichert Namen und Bezeichner im Speicher, um eine reibungslose Design-zu-Code-Übersetzung zu gewährleisten, bevor er sie auf Konsistenz überprüft, fügt a hinzuKommentar neben der ausgewählten Form in Penpot und ersetzt dann ein Gekritzel in Penpot durch eine angepasste Komponente. Hier passiert viel, aber Sie können genau sehen, was Dominik in Claude Desktop eingibt, sowie Claudes Antworten, und es ist sehr robust: Übrigens wurde in der vorherigen Demo Claude in VS Code verwendet, daher sollte ich beachten, dass Penpot MCP-Server LLM-agnostisch sind. Ihr Tech-Stack liegt ganz bei Ihnen. IvanTheGeek hat es geschafft, seinen MCP-Server mit der JetBrains Rider IDE und Junie AI einzurichten. Weitere Anwendungsfälle Übersetzen Sie ein Penpot-Board in produktionsbereites semantisches HTML und modulares CSS und nutzen Sie dabei alle Penpot-Design-Tokens (denken Sie daran, dass Penpot-Designs bereits als Code ausgedrückt werden, sodass dies kein Zufall ist): Generieren Sie einen interaktiven Web-Prototyp, ohne den vorhandenen HTML-Code zu ändern: Wie bereits gezeigt, wandeln Sie ein Scribble in eine Komponente um und nutzen dabei vorhandene Design- und/oder Designsystemelemente: Erstellen Sie eine Designsystemdokumentation aus einer Penpot-Datei: Und hier sind einige weitere Anwendungsfälle von Penpot und der Community:
Erweiterte Exporte, Suche nach Designelementen mithilfe natürlicher Sprache, Ziehen Sie Daten von externen APIs mithilfe natürlicher Sprache ab. Verbinden Sie Penpot ganz einfach mit anderen externen Tools. Sich wiederholende Aufgaben im Speicher speichern und ausführen, Visuelle Regressionstests, Entwurfskonsistenz- und Redundanzprüfung, Analyse und Feedback zur Zugänglichkeit und Benutzerfreundlichkeit, Überprüfung der Designsystemkonformität, Überprüfung der Richtlinienkonformität (Marke, Inhalt usw.), Überwachen Sie die Akzeptanz und Nutzung mit Designanalysen. Halten Sie die Dokumentation automatisch mit dem Design synchron, Organisation der Designdatei (z. B. Tagging/Kategorisierung).
Im Wesentlichen weisen Penpot MCP-Server dank der Effizienz und Benutzerfreundlichkeit des von Ihnen gewählten LLM/LLM-Clients den Weg zu einer unendlichen Anzahl von Arbeitsabläufen, ohne dass Ihre Daten diesem ausgesetzt werden. Wofür würden Sie MCP-Server verwenden? Penpot MCP-Server befinden sich noch nicht einmal im Beta-Stadium, aber es handelt sich um ein aktives Experiment, an dem Sie teilnehmen können. Penpot-Benutzer haben bereits damit begonnen, Anwendungsfälle für MCP-Server zu erkunden, aber Penpot möchte mehr sehen. Um sicherzustellen, dass die nächste Generation von Designtools den Anforderungen von Designern, Entwicklern und Produktteams im Allgemeinen entspricht, müssen sie kollektiv und kollaborativ entwickelt werden, insbesondere wenn es um KI geht. Hinweis: Penpot ist auf der Suche nach Betatestern, die den MCP-Server von Penpot erkunden, damit experimentieren und dabei helfen möchten, ihn weiterzuentwickeln. Um beizutreten, schreiben Sie an support@penpot.app mit der Betreffzeile „MCP Beta Test Volunteer“. Gibt es Ihrer Meinung nach etwas, was Penpot MCP-Server leisten könnten, was aktuelle Tools nicht gut genug, nicht schnell genug oder überhaupt nicht können? Hier können Sie erfahren, wie Sie einen Penpot-MCP-Server einrichten und noch heute mit dem Basteln beginnen. Wenn Ihr Gehirn bereits vor Ideen schwirrt, möchte Penpot, dass Sie an der Diskussion teilnehmen, Ihr Feedback teilen und über Ihre Anwendungsfälle sprechen. Alternativ ist der Kommentarbereich unten auch kein schlechter Ausgangspunkt!
