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.)
🎥 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
- 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)
# Install directly with uvx (when published to PyPI)
uvx penpot-mcp
# For local development, use uvx with local path
uvx --from . penpot-mcp
# Or install in a project with uv
uv add penpot-mcp
Option 3: Von der Quelle installieren
# Clone the repository
git clone https://github.com/montevive/penpot-mcp.git
cd penpot-mcp
# Using uv (recommended)
uv sync
uv run penpot-mcp
# Or using traditional pip
python -m venv .venv
source .venv/bin/activate # On Windows: .venv\Scripts\activate
pip install -e .
Konfiguration
Erstellen Sie eine .env Datei basierend auf env.example mit Ihren Penpot-Anmeldeinformationen:
PENPOT_API_URL=https://design.penpot.app/api
PENPOT_USERNAME=your_penpot_username
PENPOT_PASSWORD=your_penpot_password
PORT=5000
DEBUG=true
Verwendung
Ausführen des MCP-Servers
# Using uvx (when published to PyPI)
uvx penpot-mcp
# Using uvx for local development
uvx --from . penpot-mcp
# Using uv in a project (recommended for local development)
uv run penpot-mcp
# Using the entry point (if installed)
penpot-mcp
# Or using the module directly
python -m penpot_mcp.server.mcp_server
Debuggen des MCP-Servers
Um den MCP-Server zu debuggen, können Sie:
- Aktivieren Sie den Debug-Modus in Ihrer
.env Datei, indem Sie DEBUG=true festlegen. - Verwenden Sie die Penpot API CLI zum Testen von API-Operationen:
# Test API connection with debug output
python -m penpot_mcp.api.penpot_api --debug list-projects
# Get details for a specific project
python -m penpot_mcp.api.penpot_api --debug get-project --id YOUR_PROJECT_ID
# List files in a project
python -m penpot_mcp.api.penpot_api --debug list-files --project-id YOUR_PROJECT_ID
# Get file details
python -m penpot_mcp.api.penpot_api --debug get-file --file-id YOUR_FILE_ID
Das Paket enthält nützliche Befehlszeilentools:
# Generate a tree visualization of a Penpot file
penpot-tree path/to/penpot_file.json
# Validate a Penpot file against the schema
penpot-validate path/to/penpot_file.json
MCP-Überwachung und -Tests
MCP CLI-Monitor
# Start your MCP server in one terminal
python -m penpot_mcp.server.mcp_server
# In another terminal, use mcp-cli to monitor and interact with your server
python -m mcp.cli monitor python -m penpot_mcp.server.mcp_server
# Or connect to an already running server on a specific port
python -m mcp.cli monitor --port 5000
MCP-Inspektor
# Start your MCP server in one terminal
python -m penpot_mcp.server.mcp_server
# In another terminal, run the MCP Inspector (requires Node.js)
npx @modelcontextprotocol/inspector
Verwenden des Clients
# Run the example client
penpot-client
Ressourcen
server://info - Serverstatus und Informationenpenpot://schema – Penpot-API-Schema als JSONpenpot://tree-schema - Penpot-Objektbaumschema als JSONrendered-component://{component_id} – Gerenderte Komponentenbilderpenpot://cached-files – Liste der zwischengespeicherten Penpot-Dateien
Werkzeuge
list_projects – Alle Penpot-Projekte auflistenget_project_files - Dateien für ein bestimmtes Projekt abrufenget_file - Ruft eine Penpot-Datei anhand ihrer ID ab und speichert sie im Cacheexport_object - Exportieren Sie ein Penpot-Objekt als Bildget_object_tree - Ruft die Objektbaumstruktur für ein Penpot-Objekt absearch_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:
{
"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"
}
}
}
}
Cursor-IDE-Integration
Cursor IDE unterstützt MCP-Server durch seine KI-Integrationsfunktionen. So konfigurieren Sie Penpot MCP mit Cursor:
- Installieren Sie den MCP-Server (falls noch nicht installiert):
- 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"
}
}
}
}
- 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
- Starten Sie den MCP-Server in Ihrem Projekt:
# In your project directory
penpot-mcp
- 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
penpot_mcp/
├── api/ # Penpot API client
├── server/ # MCP server implementation
│ ├── mcp_server.py # Main MCP server
│ └── client.py # Client implementation
├── tools/ # Utility tools
│ ├── cli/ # Command-line interfaces
│ └── penpot_tree.py # Penpot object tree visualization
├── resources/ # Resource files and schemas
└── utils/ # Helper utilities
Entwicklung
Testen
Das Projekt verwendet pytest zum Testen:
# Using uv (recommended)
uv sync --extra dev
uv run pytest
# Run with coverage
uv run pytest --cov=penpot_mcp tests/
# Using traditional pip
pip install -e ".[dev]"
pytest
pytest --cov=penpot_mcp tests/
Fusseln
# Using uv (recommended)
uv sync --extra dev
# Set up pre-commit hooks
uv run pre-commit install
# Run linting
uv run python lint.py
# Auto-fix linting issues
uv run python lint.py --autofix
# Using traditional pip
pip install -r requirements-dev.txt
pre-commit install
./lint.py
./lint.py --autofix
Beitragen
Beiträge sind willkommen! Senden Sie gerne einen Pull Request.
- Forken Sie das Repository
- Erstellen Sie Ihren Feature-Zweig (
git checkout -b feature/amazing-feature ) - Übernehmen Sie Ihre Änderungen (
git commit -m 'Add some amazing feature' ) - Pushen zum Zweig (
git push origin feature/amazing-feature ) - Ö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