Penpot MCP-Server 🎨🤖

🚀 Was ist Penpot MCP?

Penpot MCP ist ein revolutionärer Model Context Protocol (MCP)-Server, der die Lücke zwischen KI-Sprachmodellen und Penpot , der Open-Source-Plattform für Design und Prototyping, schließt. Diese Integration ermöglicht es KI-Assistenten wie Claude (sowohl in Claude Desktop als auch in der Cursor IDE), Ihre Designdateien programmgesteuert zu verstehen, zu analysieren und mit ihnen zu interagieren.

🎯 Hauptvorteile

• 🤖 AI-Native Designanalyse : Lassen Sie Claude AI Ihre UI/UX-Designs analysieren, Feedback geben und Verbesserungen vorschlagen

• ⚡ Automatisierte Design-Workflows : Optimieren Sie wiederkehrende Designaufgaben mit KI-gestützter Automatisierung

• 🔍 Intelligente Designsuche : Finden Sie Designkomponenten und Muster in Ihren Projekten mithilfe natürlicher Sprache

• 📊 Design System Management : Designsysteme automatisch dokumentieren und pflegen – mit KI-Unterstützung

• 🎨 Plattformübergreifende Integration : Funktioniert mit jedem MCP-kompatiblen KI-Assistenten (Claude Desktop, Cursor IDE usw.)

Related MCP server: 21st.dev Magic AI Agent

🎥 Demo-Video

Sehen Sie sich unser Demo-Video an, um Penpot MCP in Aktion zu sehen:

✨ Funktionen

🔌 Kernfunktionen

• Implementierung des MCP-Protokolls : Vollständige Einhaltung der Standards des Model Context Protocol

• Echtzeit-Designzugriff : Direkte Integration mit der API von Penpot für Live-Designdaten

• Komponentenanalyse : KI-gestützte Analyse von Designkomponenten und Layouts

• Exportautomatisierung : Programmatischer Export von Design-Assets in mehreren Formaten

• Designvalidierung : Automatisierte Überprüfung der Konformität des Designsystems

🛠️ Entwicklertools

• Befehlszeilen-Dienstprogramme : Leistungsstarke CLI-Tools zur Analyse und Validierung von Designdateien

• Python SDK : Umfassende Python-Bibliothek für benutzerdefinierte Integrationen

• REST-API : HTTP-Endpunkte für die Integration von Webanwendungen

• Erweiterbare Architektur : Plugin-System für benutzerdefinierte KI-Workflows

🎨 KI-Integrationsfunktionen

• Claude Desktop- und Cursor-Integration : Native Unterstützung für den Claude AI-Assistenten sowohl in Claude Desktop als auch in der Cursor-IDE

• Teilen des Designkontexts : Stellen Sie KI-Modellen einen Designkontext zur Verfügung, um bessere Antworten zu erhalten

• Visuelle Komponentenerkennung : KI kann Designkomponenten „sehen“ und verstehen

• Abfragen in natürlicher Sprache : Stellen Sie Fragen zu Ihren Designs in einfachem Englisch

• IDE-Integration : Nahtlose Integration mit modernen Entwicklungsumgebungen

💡 Anwendungsfälle

Für Designer

• Automatisierung der Designprüfung : Erhalten Sie sofortiges KI-Feedback zu Zugänglichkeit, Benutzerfreundlichkeit und Designprinzipien

• Komponentendokumentation : Automatisches Generieren von Dokumentationen für Designsysteme

• Designkonsistenzprüfungen : Stellen Sie die Einhaltung der Markenrichtlinien über alle Projekte hinweg sicher

• Asset-Organisation : KI-gestütztes Tagging und Kategorisieren von Designkomponenten

Für Entwickler

• Design-to-Code-Workflows : Überbrücken Sie die Lücke zwischen Design und Entwicklung mit KI-Unterstützung

• API-Integration : Programmgesteuerter Zugriff auf Designdaten für benutzerdefinierte Tools und Workflows

• Automatisiertes Testen : Generieren Sie visuelle Regressionstests aus Design-Spezifikationen

• Design System Sync : Halten Sie Design-Token und Codekomponenten synchron

Für Produktteams

• Designanalyse : Verfolgen Sie die Einführung von Designsystemen und die Verwendung von Komponenten

• Verbesserung der Zusammenarbeit : KI-gestützte Designüberprüfungen und Feedback-Erfassung

• Workflow-Optimierung : Automatisieren Sie wiederkehrende Designvorgänge und Genehmigungen

• Toolübergreifende Integration : Verbinden Sie Penpot mit anderen Tools in Ihrem Design-Workflow

🚀 Schnellstart

Voraussetzungen

• Python 3.12+ (für optimale Leistung wird die neueste Python-Version empfohlen)

• Penpot-Konto ( Kostenlose Anmeldung )

• Claude Desktop oder Cursor IDE (optional, für KI-Integration)

Installation

Voraussetzungen

• Python 3.12+

• Penpot-Kontoanmeldeinformationen

Installation

Option 1: Von PyPI installieren

Option 2: Verwenden von UV (empfohlen für die moderne Python-Entwicklung)

Option 3: Von der Quelle installieren

Konfiguration

Erstellen Sie eine .env Datei basierend auf env.example mit Ihren Penpot-Anmeldeinformationen:

Verwendung

Ausführen des MCP-Servers

Debuggen des MCP-Servers

Um den MCP-Server zu debuggen, können Sie:

1. Aktivieren Sie den Debug-Modus in Ihrer .env Datei, indem Sie DEBUG=true festlegen.

2. Verwenden Sie die Penpot API CLI zum Testen von API-Operationen:

Befehlszeilentools

Das Paket enthält nützliche Befehlszeilentools:

MCP-Überwachung und -Tests

MCP CLI-Monitor

MCP-Inspektor

Verwenden des Clients

MCP-Ressourcen und -Tools

Ressourcen

• server://info - Serverstatus und Informationen

• penpot://schema – Penpot-API-Schema als JSON

• penpot://tree-schema - Penpot-Objektbaumschema als JSON

• rendered-component://{component_id} – Gerenderte Komponentenbilder

• penpot://cached-files – Liste der zwischengespeicherten Penpot-Dateien

Werkzeuge

• list_projects – Alle Penpot-Projekte auflisten

• get_project_files - Dateien für ein bestimmtes Projekt abrufen

• get_file - Ruft eine Penpot-Datei anhand ihrer ID ab und speichert sie im Cache

• export_object - Exportieren Sie ein Penpot-Objekt als Bild

• get_object_tree - Ruft die Objektbaumstruktur für ein Penpot-Objekt ab

• search_object - Suche nach Objekten in einer Penpot-Datei nach Namen

KI-Integration

Der Penpot MCP-Server kann über das Model Context Protocol in KI-Assistenten integriert werden. Er unterstützt sowohl Claude Desktop als auch Cursor IDE für eine nahtlose Automatisierung des Design-Workflows.

Claude Desktop Integration

Ausführliche Anweisungen zur Einrichtung von Claude Desktop finden Sie unter CLAUDE_INTEGRATION.md .

Fügen Sie Ihrer Claude Desktop-Konfigurationsdatei ( ~/Library/Application Support/Claude/claude_desktop_config.json unter macOS oder %APPDATA%\Claude\claude_desktop_config.json unter Windows) die folgende Konfiguration hinzu:

Cursor-IDE-Integration

Cursor IDE unterstützt MCP-Server durch seine KI-Integrationsfunktionen. So konfigurieren Sie Penpot MCP mit Cursor:

1. Installieren Sie den MCP-Server (falls noch nicht installiert):

   pip install penpot-mcp

2. Konfigurieren Sie die Cursor-Einstellungen , indem Sie den MCP-Server zu Ihrer Cursor-Konfiguration hinzufügen. Öffnen Sie die Cursor-Einstellungen und fügen Sie Folgendes hinzu:

   { "mcpServers": { "penpot": { "command": "uvx", "args": ["penpot-mcp"], "env": { "PENPOT_API_URL": "https://design.penpot.app/api", "PENPOT_USERNAME": "your_penpot_username", "PENPOT_PASSWORD": "your_penpot_password" } } } }

3. Alternative: Verwenden Sie Umgebungsvariablen , indem Sie eine .env Datei in Ihrem Projektstamm erstellen:

   PENPOT_API_URL=https://design.penpot.app/api PENPOT_USERNAME=your_penpot_username PENPOT_PASSWORD=your_penpot_password

4. Starten Sie den MCP-Server in Ihrem Projekt:

   # In your project directory penpot-mcp

5. Verwendung im Cursor : Nach der Konfiguration können Sie mit Ihren Penpot-Designs direkt im Cursor interagieren, indem Sie Fragen stellen wie:

   • „Zeige mir alle Projekte in meinem Penpot-Konto“

   • „Analysieren Sie die Designkomponenten im Projekt X“

   • „Hauptschaltflächenkomponente als Bild exportieren“

   • „Welche Designmuster werden in dieser Datei verwendet?“

Wichtige Integrationsfunktionen

Sowohl die Claude Desktop- als auch die Cursor-Integration bieten:

• Direkter Zugriff auf Penpot-Projekte und -Dateien

• Visuelle Komponentenanalyse mit KI-gestützten Erkenntnissen

• Design-Exportfunktionen für Assets und Komponenten

• Abfragen in natürlicher Sprache zu Ihren Designdateien

• Design-Feedback und Vorschläge in Echtzeit

• Erstellung einer Designsystemdokumentation

Paketstruktur

Entwicklung

Testen

Das Projekt verwendet pytest zum Testen:

Fusseln

Beitragen

Beiträge sind willkommen! Senden Sie gerne einen Pull Request.

1. Forken Sie das Repository

2. Erstellen Sie Ihren Feature-Zweig ( git checkout -b feature/amazing-feature )

3. Übernehmen Sie Ihre Änderungen ( git commit -m 'Add some amazing feature' )

4. Pushen zum Zweig ( git push origin feature/amazing-feature )

5. Öffnen einer Pull-Anfrage

Bitte stellen Sie sicher, dass Ihr Code den Codierungsstandards des Projekts entspricht und entsprechende Tests enthält.

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert – Einzelheiten finden Sie in der Datei LICENSE .

Danksagung

• Penpot – Die Open-Source-Design- und Prototyping-Plattform

• Model Context Protocol – Das standardisierte Protokoll für den KI-Modellkontext