Skip to main content
Glama
deenesjakoruzh
montevive

Penpot MCP Server

by montevive
OverviewSchemaRelated ServersScoreDiscussions
Python
Remote

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:

Penpot MCP-Demo

✨ 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

Install Server
A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

How are these scores calculated?

Resources

Tools

View all tools

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/montevive/penpot-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server