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

pip install penpot-mcp

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:

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:

# 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

Befehlszeilentools

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

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:

{
  "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:

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

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.

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