Penpot MCP Server

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

🛠️ 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:

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

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:

Installieren Sie den MCP-Server (falls noch nicht installiert):
pip install penpot-mcp
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

Penpot – Die Open-Source-Design- und Prototyping-Plattform
Model Context Protocol – Das standardisierte Protokoll für den KI-Modellkontext

Deploy Server

HTTP connection URL

security – no known vulnerabilities

license - not found

quality - confirmed to work

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Tools

View all tools

Verbindet KI-Sprachmodelle mit der Penpot-Designplattform und ermöglicht KI-Assistenten, Designdateien programmgesteuert zu analysieren, zu durchsuchen und mit ihnen zu interagieren, um Design-Workflows zu automatisieren.

Related MCP Servers

Metasploit MCP Server
GH05TCREW
-
security
A
license
-
quality
Provides a bridge between large language models and the Metasploit Framework, enabling AI assistants to access and control penetration testing functionality through natural language.
Last updated -
260
Apache 2.0
21st.dev Magic AI Agent
zackbissell
A
security
F
license
A
quality
A powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.
Last updated -
4
3,918
@bldbl/mcp
chunkydotdev
A
security
A
license
A
quality
This package enables AI assistants (Claude, GPT, etc.) to work directly with Buildable projects using the Model Context Protocol (MCP). AI assistants can get project context, manage tasks and track progress (for projects created at https://bldbl.dev).
Last updated -
7
10
4
MIT License
WaniKani MCP Server
jackedney
-
security
F
license
-
quality
A bridge that provides AI assistants with access to WaniKani user data and functionality, enabling them to retrieve learning progress, identify difficult items, and offer personalized Japanese language learning assistance.
Last updated -
1

View all related MCP servers

Appeared in Searches

A guide to UX/UI Design principles and resources