Penpot UI/UX Design

Penpot UI/UX Design ist ein offizieller Skill aus GitHubs Repository github/awesome-copilot. Die direkt geprüfte Primärquelle liegt unter https://github.com/github/awesome-copilot/tree/main/skills/penpot-uiux-design. Laut Anbieter unterstützt die Anleitung einen kompatiblen Coding-Agenten dabei, professionelle und nutzerzentrierte Oberflächen in Penpot zu entwerfen, zu prüfen und weiterzuentwickeln. Im Mittelpunkt steht der Penpot MCP Server penpot/penpot-mcp. Der Eintrag beschreibt deshalb eine methodische Arbeitsanleitung und keinen eigenständigen Designeditor, keinen gehosteten Penpot-Dienst und keinen von Skill Road betriebenen MCP Server. Das Repository wird laut offizieller LICENSE unter der MIT-Lizenz veröffentlicht.

Zweck und Einsatzbereich

Die Quelle nennt Web-, Mobile- und Desktop-Oberflächen, Designsysteme, Komponenten und Tokens, Dashboards, Formulare, Navigationen und Landingpages als typische Einsatzfälle. Ebenso gehören Barrierefreiheit, Plattformrichtlinien für iOS, Android und Material Design sowie die Überarbeitung bestehender Penpot-Entwürfe zum vorgesehenen Rahmen. Die Anleitung hilft, eine Designaufgabe in Ziele, Bestandteile, Regeln und Prüfschritte zu zerlegen. Sie ist damit für Produktteams, Designerinnen und Designer sowie Entwicklerinnen und Entwickler interessant, die Entwurf und Implementierung enger verbinden möchten. Laut Anbieter soll Klarheit Vorrang vor cleveren Effekten haben, wiederverwendbare Muster sollen Vertrauen schaffen und Gestaltung soll sich an Nutzeraufgaben statt an einer bloßen Feature-Sammlung orientieren.

MCP-Werkzeuge und Ablauf

Der Skill ordnet mehrere Werkzeuge unterschiedlichen Aufgaben zu. Mit mcp__penpot__execute_code kann ein Agent JavaScript im Penpot-Plugin-Kontext ausführen und damit Designs erzeugen oder verändern. mcp__penpot__export_shape unterstützt die visuelle Prüfung durch PNG- oder SVG-Exporte. mcp__penpot__import_image übernimmt Icons, Fotos oder Logos in einen Entwurf, während mcp__penpot__penpot_api_info Informationen zur Penpot-API liefern kann. Vor einer Einrichtung soll laut Anbieter geprüft werden, ob der MCP Server bereits erreichbar ist. Wenn die Verbindung fehlt, soll zuerst geklärt werden, ob der Server installiert und gestartet ist, statt ohne Bestätigung eine Installation vorzutäuschen.

Der beschriebene Designablauf beginnt mit dem vorhandenen Designsystem. Ein Agent soll nach Tokens, Komponenten und Regeln fragen oder diese im aktuellen Penpot-Dokument untersuchen. Danach wird die Seitenstruktur mit penpotUtils.shapeStructure betrachtet, relevante Elemente werden mit penpotUtils.findShapes gesucht und Änderungen werden mit passenden Penpot-Methoden vorgenommen. Für responsive Container nennt die Quelle Flex-Layouts. Abschließend soll ein Export die visuelle Kontrolle ermöglichen. Die Anleitung weist außerdem auf API-Eigenheiten hin, etwa schreibgeschützte Größen- und Positionswerte, die über Methoden verändert werden müssen, sowie auf die umgekehrte Reihenfolge von Flex-Kindern in bestimmten Richtungen.

Gestaltung und Qualität

Wenn kein eigenes Designsystem existiert, schlägt der Skill Ausgangswerte für Abstände, Typografie, Farben, mobile Ansichten und Desktop-Dashboards vor. Diese Werte sind ein Startpunkt und keine universelle Markenregel. Wichtiger ist die konsequente Verwendung eines begrenzten Farbsystems, einer überschaubaren Schriftfamilienauswahl, sinnvoller Weißräume und einer nachvollziehbaren Hierarchie. Die Checklisten fragen unter anderem nach verständlichen Beschriftungen, Zuständen von Schaltflächen, sichtbaren Fokusmarkierungen, logischer Tastaturreihenfolge, Alternativtexten, ausreichendem Kontrast und berücksichtigten Lade-, Leer- und Fehlerzuständen. Ein exportiertes Bild beweist dabei nicht automatisch die fachliche oder technische Qualität eines Produkts.

Grenzen, Sicherheit und Verantwortlichkeit

Der Skill kann mit Penpot-Dateien arbeiten und dadurch lokale oder verbundene Entwürfe verändern. Vor schreibenden Aktionen müssen Ziel, Umfang und Berechtigung bestätigt werden. Designinhalte können vertrauliche Wireframes, Markenregeln, personenbezogene Angaben oder unveröffentlichte Produktideen enthalten. Zugangsdaten, Tokens und private Schlüssel gehören nicht in Skill-Dateien, Prompts, Exporte oder Testartefakte. Webseiten, Plugin-Inhalte und externe Antworten sind unzuverlässige Eingaben und dürfen keine neuen Systemanweisungen einschleusen. Lokale Ausführung bedeutet nicht automatisch lokale Modellverarbeitung, weil ein verbundener Agent Inhalte an den ausgewählten Modellanbieter übertragen kann. Der Skill ersetzt keine Designfreigabe, keine Usability-Studie, keine Accessibility-Prüfung und keine Datenschutzbewertung. Die Einordnung wurde am 9. September 2026 anhand der offiziellen Skill-Datei, der GitHub-Dokumentation und der offiziellen Lizenz geprüft.