Skip to main content
Glama
deenesjakoruzh

Penpot MCP Server

by montevive
GitHub
Python
120
  • Apple
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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:

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

Deploy Server
A
security – no known vulnerabilities
F
license - not found
A
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.

  1. 🚀 Was ist Penpot MCP?
    1. 🎯 Hauptvorteile
  2. 🎥 Demo-Video
    1. ✨ Funktionen
      1. 🔌 Kernfunktionen
      2. 🛠️ Entwicklertools
      3. 🎨 KI-Integrationsfunktionen
    2. 💡 Anwendungsfälle
      1. Für Designer
      2. Für Entwickler
      3. Für Produktteams
    3. 🚀 Schnellstart
      1. Voraussetzungen
    4. Installation
      1. Voraussetzungen
      2. Installation
      3. Konfiguration
    5. Verwendung
      1. Ausführen des MCP-Servers
      2. Debuggen des MCP-Servers
      3. Befehlszeilentools
      4. MCP-Überwachung und -Tests
      5. Verwenden des Clients
    6. MCP-Ressourcen und -Tools
      1. Ressourcen
      2. Werkzeuge
    7. KI-Integration
      1. Claude Desktop Integration
      2. Cursor-IDE-Integration
      3. Wichtige Integrationsfunktionen
    8. Paketstruktur
      1. Entwicklung
        1. Testen
        2. Fusseln
      2. Beitragen
        1. Lizenz
          1. Danksagung

            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 -
              302
              Apache 2.0
              • Linux
              • Apple

            • 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,508

            • @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
              21
              6
              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

            New MCP Servers

            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