penpot-uiux-designpar GitHub

Penpot UI/UX Design Skill.

Un skill Claude Code et Codex pour la conception UI : design UI/UX professionnel, composants et design systems dans Penpot via les outils MCP.

Web et UI
Fichier de design

Télécharger OpenDesign Voir le guide d'utilisation

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

Métadonnées et titres de section lus depuis le fichier source le 14 septembre 2026 · 12 103 caractères au total

01 Ce qu'il fait

Ce que fait le skill penpot-uiux-design dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Un guide pour concevoir de vraies interfaces dans Penpot via le serveur penpot/penpot-mcp, écrit pour les designers et développeurs dont l'agent pilote l'API du plugin Penpot. Plutôt que de donner des conseils génériques, il précise une séquence de travail : vérifier si le serveur MCP est déjà en cours d'exécution, découvrir les couleurs, styles de texte et composants existants du fichier, inspecter la hiérarchie avec penpotUtils.shapeStructure, puis créer des boards, rectangles et textes et appliquer des conteneurs addFlexLayout.

Il fournit des échelles de secours pour l'espacement 8px et la typographie, une mise en page mobile 375x812 et un dashboard 1440x900, des checklists pour les boutons, formulaires et la navigation, les limites de contraste WCAG et de zone tactile, l'espacement de placement des boards, les pièges de l'API Penpot tels que la largeur et la hauteur en lecture seule, ainsi que la validation via analyzeDescendants, le filtrage fontSize et export_shape.

Ce qu'il produit

Des designs Penpot nouveaux ou modifiés créés via du JavaScript exécuté dans le contexte du plugin.
Des rendus PNG ou SVG des formes sélectionnées, utilisés pour regarder le design plutôt que le devinez.
Du CSS extrait d'une sélection, enfants inclus, pour la remise (handoff).

Voir l'exemple de prompt ↗

Fonctionnement

01
Confirmer que le serveur est en cours d'exécution
La première action est un appel test à penpot_api_info, afin que personne ne soit guidé dans l'installation quand la connexion fonctionne déjà.
02
Trouver le design system existant
Avant de dessiner, il s'informe des brand guidelines et lit le fichier actuel pour repérer les composants, couleurs et motifs déjà en usage.
03
Inspecter la structure de la page
shapeStructure renvoie la hiérarchie existante afin que les nouveaux éléments puissent être placés par rapport à ce qui figure déjà sur le canevas.
04
Créer les éléments
Les boards, rectangles et textes sont créés via des appels du plugin dans le contexte du plugin Penpot, plutôt que décrits en prose.
05
Valider par export
Chaque modification se termine par un export afin que le résultat soit examiné comme une image, et non seulement présumé correct à partir du code.

02 Trouvez celui qui vous convient

Quand utiliser le skill penpot-uiux-design

Utilisez le skill penpot-uiux-design dans Claude Code ou Codex lorsque le travail est un design d'interface de ce type. Les capacités et limites ci-dessous sont issues du propre fichier du skill.

Bon choix

Quelqu'un qui démarre une nouvelle interface web, mobile ou desktop et souhaite la voir construite comme un véritable fichier Penpot.
Mettre en place une bibliothèque de composants et des design tokens que tout le produit réutilisera.
Produire des écrans produit courants tels que des dashboards, formulaires, navigations et landing pages.
Auditer ou améliorer un fichier Penpot qui existe déjà, plutôt que de partir de zéro.
Un travail qui doit suivre les conventions iOS, Android ou Material Design.

Connaître les limites

Il ne peut pas fonctionner seul : le serveur MCP local doit être en cours d'exécution et l'UI du plugin Penpot doit apparaître comme connectée, sinon les appels échouent ou expirent.
Il est limité aux designs Penpot créés via le serveur penpot-mcp, et non à d’autres outils de design.
Réussir ses listes de contrôle ne prouve pas que le design fonctionne ; le fichier vous demande toujours de tester vos hypothèses avec de vrais utilisateurs.

Quoi fournir

Système de design existant ou charte graphique, si vous en avezIndiquez à l’agent vos tokens et spécifications, ou laissez-le les découvrir dans le fichier actuel avant qu’il commence à dessiner.
Icônes, photos ou logosLes éléments visuels sont importés dans le design via l’outil d’importation d’image.

03 Dans le skill

Règles que le skill penpot-uiux-design donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Vérifiez le serveur avant d’installer quoi que ce soit
Tentez d’abord un appel d’outil et ne lancez la configuration que lorsque l’utilisateur confirme que le serveur n’est pas installé.
Ne jamais dessiner un board sur un autre
Listez les boards existants avant d’en créer un, et placez le nouveau board au-delà de leur bord le plus à droite plus un espace, avec 100px entre les écrans d’un même flux et 200px ou plus entre différentes sections.
Redimensionner via des méthodes, pas des propriétés
width et height sont en lecture seule, donc les changements de géométrie passent par shape.resize(w, h) plutôt que par une affectation directe.
Empiler les calques avec insertChild
L’ordre en Z utilise insertChild(index, shape) ; appendChild n’est explicitement pas la méthode pour ordonner les calques.
Les tokens par défaut ne sont qu’un repli
Lorsque l’utilisateur possède un système de design, ses couleurs, espacements et typographies l’emportent ; les échelles intégrées ne s’appliquent que si aucune n’existe.
Maintenir le seuil d’accessibité
Le contraste du texte reste à 4,5:1 pour le corps de texte et 3:1 pour le grand texte, et les zones tactiles ne descendent jamais sous 44x44px.
Limiter la palette et les polices
Utilisez 1 couleur primaire plus 1 secondaire plus des neutres, et pas plus de 1 à 2 polices dans tout le design.
Réinitialiser le type de croissance du texte après un redimensionnement
Penpot réinitialise le comportement de dimensionnement du texte lors d’un redimensionnement, donc growType doit être remis sur auto-width ou auto-height.

04 Mettez-le en pratique

Installer penpot-uiux-design dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter penpot-uiux-design à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

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

Formulaire générique de la CLI skills pour skills/penpot-uiux-design/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

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.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Chaque élément se trouve dans son conteneur, vérifié avec analyzeDescendants combiné à isContainedIn.
Aucun texte ne descend sous 12px, détecté en filtrant les formes sur fontSize.
Le contraste des couleurs atteint le niveau WCAG AA avant que le design soit considéré comme final.
L'imbrication et la hiérarchie sont vérifiées avec shapeStructure.
La typographie du corps de texte reste à 16px ou plus.
Les états de chargement, vides et d'erreur sont pris en compte, pas seulement le scénario idéal.

Dans OpenDesign, importez penpot-uiux-design depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: GitHub
Repository: github.com/github/awesome-copilot Branche main
Fichier du skill: skills/penpot-uiux-design/SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit 1899b18
License: MIT D'après LICENSE.
Étoiles du dépôt: 38 981 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt github/awesome-copilot, qui contient 6 skills dans ce catalogue. Ce n'est pas une note ni un compteur d'utilisation pour penpot-uiux-design.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Outils MCP disponiblesQuatre outils avec des usages précis : exécuter du code, exporter des formes, importer des images, récupérer la documentation de l'API Penpot.
Configuration du serveur MCPVérifiez d'abord s'il est en cours d'exécution, puis clonez, compilez, chargez l'URL du plugin, configurez VS Code, et dépannez.
Principes fondamentaux de designRègles d'or pour la clarté et la cohérence, ainsi que l'ordre de priorité en cinq étapes de la hiérarchie visuelle.
Workflow de designÉtapes ordonnées, de la vérification du design system jusqu'à l'inspection, la création, la mise en page flex et la validation visuelle.
Gestion du design systemDemandez ou découvrez les tokens, couleurs, styles de texte et composants, puis adaptez-vous selon la réponse.
Pièges clés de l'API PenpotGéométrie en lecture seule, insertChild pour l'ordre z, ordre flex inversé, réinitialisation de growType après redimensionnement du texte.
Positionnement des nouveaux plans de travailRepérez les plans de travail existants, calculez la prochaine position x à partir du bord le plus à droite, gardez les flux regroupés visuellement.
Tokens de design par défautÉchelle d'espacement de repli en 8px, échelle typographique et rôles de couleur sémantiques pour les designs sans système établi.
Checklist des composantsExigences sous forme de cases à cocher pour les boutons, formulaires et navigation, couvrant les états, le dimensionnement et les libellés.
Vérifications rapides d'accessibilitéSix vérifications : contraste, zones tactiles, focus, texte alternatif, hiérarchie des titres, indépendance des couleurs.
Checklist de revue de designVérifications préalables à la finalisation portant sur la hiérarchie, l'espacement, la typographie, le WCAG AA, les états et la cohérence du système.
Validation des designsTableau des méthodes de validation ainsi que l'export CSS d'une sélection avec generateStyle.

Description du skill lui-même

Guide complet pour créer des designs UI/UX professionnels dans Penpot avec les outils MCP. Utilisez ce skill pour : (1) Créer de nouveaux designs UI/UX pour applications web, mobile ou desktop, (2) Construire des design systems avec composants et tokens, (3) Designer des tableaux de bord, formulaires, navigation ou landing pages, (4) Appliquer les standards d'accessibilité et bonnes pratiques, (5) Suivre les guidelines de plateforme (iOS, Android, Material Design), (6) Réviser ou améliorer des designs Penpot existants pour l'utilisabilité. Déclencheurs : "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".

Description du front-matter extraite de SKILL.md. Le fichier complet fait environ 12 103 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill penpot-uiux-design

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Dois-je installer le serveur MCP Penpot avant de pouvoir utiliser ceci ?

Non, et le skill vérifie délibérément en premier en appelant penpot_api_info. Il ne vous donne les étapes d'installation qu'une fois que vous confirmez que le serveur n'est pas installé, après quoi la configuration clone penpot-mcp, exécute npm install et npm run bootstrap, puis charge le plugin depuis http://localhost:4400/manifest.json dans Penpot.

Quel client configure-t-il ?

La section de configuration montre un extrait de settings.json pour VS Code enregistrant un serveur penpot à l'adresse http://localhost:4401/sse. Elle prévient également que les outils peuvent ne pas apparaître avant que vous redémarriez complètement VS Code ou Claude après avoir modifié la configuration.

Penpot UI/UX Design

Exécuter penpot-uiux-design sur une vraie tâche de design UI.

Téléchargez OpenDesign, importez penpot-uiux-design depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills

Terminal

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

Ce que fait le skill penpot-uiux-design dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le skill penpot-uiux-design

Bon choix

Connaître les limites

Quoi fournir

Règles que le skill penpot-uiux-design donne à Claude Code et Codex

Vérifiez le serveur avant d’installer quoi que ce soit

Ne jamais dessiner un board sur un autre

Redimensionner via des méthodes, pas des propriétés

Empiler les calques avec insertChild

Les tokens par défaut ne sont qu’un repli

Maintenir le seuil d’accessibité

Limiter la palette et les polices

Réinitialiser le type de croissance du texte après un redimensionnement