penpot-uiux-designvon GitHub

Penpot UI/UX Design Skill.

Ein Skill für Claude Code und Codex für UI-Design: professionelles UI/UX-Design, Komponenten und Design-Systeme in Penpot über MCP-Tools.

Web & UI
Design-Datei

OpenDesign herunterladen Anleitung ansehen

github/awesome-copilot · skills/penpot-uiux-design/SKILL.mdSKILL.md

--- name: penpot-uiux-design description: Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material … --- ## Available MCP Tools ## MCP Server Setup ## Core Design Principles ## Design Workflow ## Design System Handling ## Key Penpot API Gotchas

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 12.103 Zeichen insgesamt

01 Was es tut

Was der penpot-uiux-design Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Ein Leitfaden zum Entwerfen realer Interfaces in Penpot über den penpot/penpot-mcp Server, geschrieben für Designer und Entwickler, deren Agent die Penpot Plugin API steuert. Statt allgemeiner Ratschläge legt er eine konkrete Arbeitsfolge fest: prüfen, ob der MCP-Server bereits läuft, die vorhandenen Farben, Textstile und Komponenten der Datei ermitteln, die Hierarchie mit penpotUtils.shapeStructure untersuchen, dann Boards, Rechtecke und Text erstellen und addFlexLayout-Container anwenden.

Er liefert Standard-Abstands- und Typografie-Skalen mit 8px, ein mobiles Layout mit 375x812 und ein Dashboard-Layout mit 1440x900, Checklisten für Buttons, Formulare und Navigation, WCAG-Kontrast- und Touch-Target-Grenzwerte, Abstände für die Board-Platzierung, Penpot-API-Fallstricke wie schreibgeschützte Breite und Höhe sowie Validierung durch analyzeDescendants, fontSize-Filterung und export_shape.

Was er erzeugt

Neue oder geänderte Penpot-Designs, erstellt durch JavaScript, das im Plugin-Kontext ausgeführt wird.
PNG- oder SVG-Renderings ausgewählter Formen, um das Design zu betrachten, anstatt es zu erraten.
Aus einer Auswahl extrahiertes CSS, einschließlich untergeordneter Elemente, für die Übergabe.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Bestätigen, dass der Server läuft
Der erste Schritt ist ein Testaufruf von penpot_api_info, damit niemand durch die Installation geführt wird, wenn die Verbindung bereits funktioniert.
02
Das vorhandene Design-System finden
Vor dem Zeichnen fragt es nach Markenrichtlinien und liest die aktuelle Datei nach bereits verwendeten Komponenten, Farben und Mustern.
03
Die Seitenstruktur untersuchen
shapeStructure liefert die vorhandene Hierarchie zurück, sodass neue Elemente relativ zu bereits vorhandenen Elementen auf der Zeichenfläche platziert werden können.
04
Die Elemente erstellen
Boards, Rechtecke und Text werden durch Plugin-Aufrufe im Penpot Plugin-Kontext erzeugt, statt in Prosa beschrieben.
05
Durch Export validieren
Jede Änderung endet mit einem Export, damit das Ergebnis als Bild betrachtet und nicht allein dem Code vertraut wird.

02 Finden Sie Ihren Favoriten

Wann der penpot-uiux-design Skill zu verwenden ist

Verwenden Sie den penpot-uiux-design-Skill in Claude Code oder Codex, wenn es um UI-Design dieser Art geht. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Jemand, der ein neues Web-, Mobile- oder Desktop-Interface beginnt und es als tatsächliche Penpot-Datei umgesetzt haben möchte.
Aufbau einer Komponentenbibliothek und von Design-Tokens, die das gesamte Produkt wiederverwenden wird.
Erstellen gängiger Produktbildschirme wie Dashboards, Formulare, Navigation und Landingpages.
Prüfen oder Verbessern einer bereits bestehenden Penpot-Datei, statt bei null zu beginnen.
Arbeiten, die den Konventionen von iOS, Android oder Material Design folgen müssen.

Grenzen kennen

Er kann nicht eigenständig laufen: Der lokale MCP-Server muss aktiv sein und die Penpot Plugin-UI muss als verbunden angezeigt werden, sonst schlagen Aufrufe fehl oder laufen in ein Timeout.
Es ist auf Penpot-Designs beschränkt, die über den penpot-mcp-Server erstellt wurden, nicht auf andere Design-Tools.
Das Bestehen der Checklisten ist nicht dasselbe wie der Nachweis, dass das Design funktioniert; die Datei fordert Sie weiterhin auf, Annahmen mit echten Nutzern zu testen.

Was Sie bereitstellen sollten

Vorhandenes Design-System oder Markenrichtlinien, falls vorhandenTeilen Sie dem Agenten entweder Ihre Tokens und Spezifikationen mit oder lassen Sie ihn diese aus der aktuellen Datei ermitteln, bevor er mit dem Zeichnen beginnt.
Icons, Fotos oder LogosVisuelle Assets werden über das Import-Bild-Tool ins Design eingebunden.

03 Innerhalb des Skills

Regeln, die der penpot-uiux-design Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Prüfen Sie den Server, bevor Sie etwas installieren
Versuchen Sie zunächst einen Tool-Call und durchlaufen Sie das Setup erst, wenn der Nutzer bestätigt, dass der Server nicht installiert ist.
Zeichnen Sie nie ein Board über ein anderes
Listen Sie vorhandene Boards auf, bevor Sie ein neues erstellen, und platzieren Sie das neue Board hinter deren rechtestem Rand plus einem Abstand – 100px zwischen Screens im selben Flow und 200px+ zwischen unterschiedlichen Abschnitten.
Größenänderungen über Methoden, nicht über Eigenschaften
width und height sind schreibgeschützt, daher laufen Geometrieänderungen über shape.resize(w, h) statt über direkte Zuweisung.
Ebenen mit insertChild stapeln
Die Z-Reihenfolge nutzt insertChild(index, shape); appendChild ist ausdrücklich nicht der Weg, um Ebenen zu ordnen.
Standard-Tokens sind nur ein Fallback
Wenn der Nutzer ein Design-System hat, gewinnen dessen Farben, Abstände und Typografie; die integrierten Skalen greifen nur, wenn keines existiert.
Die Barrierefreiheits-Untergrenze einhalten
Der Textkontrast bleibt bei 4,5:1 für Fließtext und 3:1 für große Texte, und Touch-Ziele fallen nie unter 44x44px.
Palette und Schriftarten begrenzen
Verwenden Sie 1 Primär- plus 1 Sekundärfarbe plus Neutraltöne und höchstens 1-2 Schriftarten im gesamten Design.
Text-Grow-Typ nach dem Skalieren zurücksetzen
Penpot setzt das Textgrößenverhalten bei Größenänderungen zurück, daher muss growType wieder auf auto-width oder auto-height gesetzt werden.

04 In Betrieb nehmen

Installieren Sie penpot-uiux-design in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

penpot-uiux-design in Claude Code oder Codex installieren

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

Allgemeine skills-CLI-Form für skills/penpot-uiux-design/SKILL.md; das Repository dokumentiert möglicherweise seinen eigenen Pfad.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Design a settings screen for [app name] in Penpot on a 375x812 board. Follow the Material Design guidelines and use our existing tokens if the file already has them, otherwise use the 8px spacing scale. It needs a header, a form with labels above the inputs plus error states, and a bottom CTA. Export the screen when you are done so I can check the contrast.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Jedes Element sitzt innerhalb seines Containers, überprüft mit analyzeDescendants in Kombination mit isContainedIn.
Kein Text liegt unter 12px, ermittelt durch Filtern der Shapes nach fontSize.
Der Farbkontrast erreicht WCAG AA, bevor das Design als final gilt.
Verschachtelung und Hierarchie werden mit shapeStructure überprüft.
Die Fließtext-Typografie bleibt bei 16px oder größer.
Lade-, Leer- und Fehlerzustände werden berücksichtigt, nicht nur der Idealfall.

In OpenDesign importieren Sie penpot-uiux-design über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Skill-Datei: skills/penpot-uiux-design/SKILL.md Content-Prüfsumme bei Verifizierung erfasst; Commit 1899b18
License: MIT Aus LICENSE.
Repository-Sterne: 38.981 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository github/awesome-copilot, das 6 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für penpot-uiux-design.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Verfügbare MCP ToolsVier Tools mit folgenden Zwecken: Code ausführen, Shapes exportieren, Bilder importieren, Penpot-API-Dokumentation abrufen.
MCP-Server-EinrichtungPrüfen Sie zunächst, ob er läuft, klonen Sie dann, bauen Sie, laden Sie die Plugin-URL, konfigurieren Sie VS Code und beheben Sie Probleme.
Zentrale Design-PrinzipienGoldene Regeln für Klarheit und Konsistenz sowie die fünfstufige Prioritätsreihenfolge der visuellen Hierarchie.
Design-WorkflowGeordnete Schritte von der Prüfung des Design-Systems über Inspektion, Erstellung, Flex-Layout bis zur visuellen Validierung.
Umgang mit dem Design-SystemFragen Sie nach oder ermitteln Sie Tokens, Farben, Textstile und Komponenten, und verzweigen Sie dann je nach Antwort.
Wichtige Besonderheiten der Penpot-APINur lesbare Geometrie, insertChild für die Z-Reihenfolge, umgekehrte Flex-Reihenfolge, growType-Reset nach Textgrößenänderung.
Positionierung neuer BoardsVorhandene Boards finden, das nächste x anhand des rechten Rands berechnen, Flows visuell zusammenhalten.
Standard-Design-TokensFallback-Abstandsskala mit 8px, Typografie-Skala und semantische Farbrollen für Designs ohne eigenes System.
Komponenten-ChecklisteCheckbox-Anforderungen für Buttons, Formulare und Navigation, einschließlich Zustände, Größen und Labels.
Schnelle BarrierefreiheitsprüfungenSechs Prüfungen: Kontrast, Touch-Ziele, Fokus, Alt-Text, Überschriftenhierarchie, Farbunabhängigkeit.
Design-Review-ChecklisteAbschließende Prüfungen zu Hierarchie, Abständen, Typografie, WCAG AA, Zuständen und Konsistenz mit dem System.
Designs validierenTabelle mit Validierungsmethoden sowie der Export von CSS aus einer Auswahl mit generateStyle.

Die eigene Beschreibung des Skills

„Umfassende Anleitung zur Erstellung professioneller UI/UX-Designs in Penpot mithilfe von MCP-Tools. Verwenden Sie diesen Skill, wenn: (1) Sie neue UI/UX-Designs für Web-, Mobile- oder Desktop-Anwendungen erstellen, (2) Sie Design-Systeme mit Komponenten und Tokens aufbauen, (3) Sie Dashboards, Formulare, Navigationen oder Landing Pages gestalten, (4) Sie Accessibility-Standards und Best Practices anwenden, (5) Sie Plattform-Richtlinien befolgen (iOS, Android, Material Design), (6) Sie bestehende Penpot-Designs auf Usability prüfen oder verbessern. Auslöser: „UI gestalten", „Interface erstellen", „Layout aufbauen", „Dashboard designen", „Formular erstellen", „Landing Page gestalten", „barrierefrei machen", „Design-System", „Komponentenbibliothek"."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 12.103 Zeichen. Die vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum penpot-uiux-design-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Muss ich den Penpot-MCP-Server installieren, bevor ich dies nutzen kann?

Nein, und der Skill prüft dies bewusst zuerst, indem er penpot_api_info aufruft. Installationsschritte erhalten Sie erst, nachdem Sie bestätigt haben, dass der Server nicht installiert ist. Anschließend klont die Einrichtung penpot-mcp, führt npm install und npm run bootstrap aus und lädt dann das Plugin von http://localhost:4400/manifest.json in Penpot.

Welchen Client konfiguriert er?

Der Einrichtungsabschnitt zeigt einen VS-Code-settings.json-Ausschnitt, der einen Penpot-Server unter http://localhost:4401/sse registriert. Zudem wird darauf hingewiesen, dass die Tools erst nach einem vollständigen Neustart von VS Code oder Claude nach der Konfigurationsänderung erscheinen könnten.

Penpot UI/UX Design

penpot-uiux-design bei einer echten UI-Design-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie penpot-uiux-design über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

Was der penpot-uiux-design Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann der penpot-uiux-design Skill zu verwenden ist

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die der penpot-uiux-design Skill Claude Code und Codex vorgibt

Prüfen Sie den Server, bevor Sie etwas installieren

Zeichnen Sie nie ein Board über ein anderes

Größenänderungen über Methoden, nicht über Eigenschaften

Ebenen mit insertChild stapeln

Standard-Tokens sind nur ein Fallback

Die Barrierefreiheits-Untergrenze einhalten

Palette und Schriftarten begrenzen

Text-Grow-Typ nach dem Skalieren zurücksetzen