penpot-uiux-designdi GitHub

Penpot UI/UX Design Skill.

Uno skill per Claude Code e Codex dedicato al design UI: design UI/UX professionale, componenti e design system in Penpot tramite strumenti MCP.

Web & UI
File di design

Scarica OpenDesign Guida all'uso

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

Frontespizio e intestazioni di sezione letti dal file upstream il 14/09/2026 · 12.103 caratteri in totale

01 Cosa fa

Cosa fa la Skill penpot-uiux-design in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Una guida per progettare interfacce reali in Penpot tramite il server penpot/penpot-mcp, scritta per designer e sviluppatori il cui agente pilota le API del plugin Penpot. Piuttosto che fornire consigli generici, specifica una sequenza operativa: verificare se il server MCP è già in esecuzione, scoprire i colori, gli stili di testo e i componenti già presenti nel file, ispezionare la gerarchia con penpotUtils.shapeStructure, quindi creare board, rettangoli e testo e applicare contenitori addFlexLayout.

Fornisce scale di spaziatura e tipografia di riserva a 8px, un layout mobile 375x812 e dashboard 1440x900, checklist per pulsanti, form e navigazione, limiti di contrasto WCAG e area di tocco, spaziatura per il posizionamento delle board, insidie delle API di Penpot come larghezza e altezza in sola lettura, e validazione tramite analyzeDescendants, filtraggio di fontSize ed export_shape.

Che cosa produce

Design Penpot nuovi o modificati, creati tramite JavaScript eseguito nel contesto del plugin.
Render PNG o SVG delle forme selezionate, usati per osservare il design piuttosto che indovinarlo.
CSS estratto da una selezione, inclusi i figli, per il passaggio di consegne.

Vedi l'esempio di prompt ↗

Come funziona

01
Verificare che il Server Sia Attivo
La prima azione è una chiamata di prova a penpot_api_info, così nessuno viene guidato nell'installazione quando la connessione funziona già.
02
Trovare il Design System Esistente
Prima di disegnare, chiede informazioni sulle linee guida del brand e legge il file corrente per componenti, colori e pattern già in uso.
03
Ispezionare la Struttura della Pagina
shapeStructure restituisce la gerarchia esistente in modo che i nuovi elementi possano essere posizionati in relazione a ciò che è già presente sulla canvas.
04
Creare gli Elementi
Board, rettangoli e testo vengono creati tramite chiamate al plugin nel contesto del plugin Penpot, piuttosto che descritti in prosa.
05
Validare tramite Esportazione
Ogni modifica termina con un'esportazione, così il risultato viene osservato come immagine, senza fidarsi solo del codice.

02 Trova la tua applicazione

Quando Usare la Skill penpot-uiux-design

Usa la skill penpot-uiux-design in Claude Code o Codex quando il compito è UI design di questo tipo. Campo di applicazione e limiti qui sotto sono tratti dal file della skill stessa.

Buona applicazione

Chi avvia un'interfaccia web, mobile o desktop da zero e vuole che venga realizzata come un vero file Penpot.
Impostare una libreria di componenti e token di design che l'intero prodotto riutilizzerà.
Produrre schermate di prodotto comuni come dashboard, form, navigazione e landing page.
Verificare o migliorare un file Penpot già esistente, piuttosto che partire da zero.
Lavoro che deve seguire le convenzioni di iOS, Android o Material Design.

Conosci i limiti

Non può funzionare da solo: il server MCP locale deve essere in esecuzione e l'interfaccia del plugin Penpot deve mostrare lo stato connesso, altrimenti le chiamate falliscono o vanno in timeout.
È limitato ai design Penpot creati tramite il server penpot-mcp, non ad altri strumenti di design.
Superare le sue checklist non equivale a dimostrare che il design funziona; il file continua a chiederle di verificare le ipotesi con utenti reali.

Cosa fornire

Design system esistente o linee guida del brand, se disponibiliComunichi all'agente i suoi token e le specifiche, oppure lo lasci individuarli dal file corrente prima che inizi a disegnare.
Icone, foto o loghiLe risorse visive vengono importate nel design tramite lo strumento di importazione immagini.

03 Dentro la skill

Le regole che la skill penpot-uiux-design fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Verificare il server prima di installare qualsiasi cosa
Tentare prima una chiamata allo strumento ed eseguire la procedura di setup solo dopo che l'utente ha confermato che il server non è installato.
Non disegnare mai un board sopra un altro
Elencare i board esistenti prima di crearne uno e posizionare il nuovo board oltre il loro margine destro più uno spazio, usando 100px tra schermate dello stesso flusso e 200px+ tra sezioni diverse.
Ridimensionare tramite metodi, non proprietà
width e height sono di sola lettura, quindi le modifiche alla geometria passano per shape.resize(w, h) invece di un'assegnazione diretta.
Impilare i livelli con insertChild
L'ordinamento in profondità (z-ordering) usa insertChild(index, shape); appendChild non è esplicitamente il modo corretto per ordinare i livelli.
I token predefiniti sono solo un fallback
Quando l'utente ha un design system, prevalgono i suoi colori, spaziature e tipografia; le scale integrate si applicano solo quando non ne esiste uno.
Mantenere la soglia di accessibilità
Il contrasto del testo resta a 4.5:1 per il corpo del testo e 3:1 per il testo grande, e i target touch non scendono mai sotto i 44x44px.
Limitare palette e caratteri
Usare 1 colore primario più 1 secondario più i neutri, e non più di 1-2 caratteri tipografici nell'intero design.
Ripristinare il Text Grow Type dopo il ridimensionamento
Penpot ripristina il comportamento di dimensionamento del testo al ridimensionamento, quindi growType deve essere impostato di nuovo su auto-width o auto-height.

04 Mettila al lavoro

Installa penpot-uiux-design in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi penpot-uiux-design a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica della CLI skills per skills/penpot-uiux-design/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Ogni elemento si trova all'interno del proprio contenitore, verificato con analyzeDescendants combinato con isContainedIn.
Nessun testo scende sotto i 12px, individuato filtrando le forme in base a fontSize.
Il contrasto colore raggiunge il livello WCAG AA prima che il design sia considerato definitivo.
La nidificazione e la gerarchia vengono verificate con shapeStructure.
La tipografia del corpo del testo rimane a 16px o superiore.
Vengono considerati anche gli stati di caricamento, vuoto ed errore, non solo il percorso ideale.

In OpenDesign importi penpot-uiux-design dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
File della skill: skills/penpot-uiux-design/SKILL.md Checksum del contenuto registrato alla verifica; commit 1899b18
License: MIT Da LICENSE.
Stelle del repository: 38.981 Snapshot GitHub acquisita il 2026-09-14 per l'intero repository github/awesome-copilot, che contiene 6 skill in questo catalogo. Non è un punteggio o conteggio di utilizzo per penpot-uiux-design.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Strumenti MCP disponibiliQuattro strumenti con relativi scopi: eseguire codice, esportare forme, importare immagini, recuperare la documentazione dell'API di Penpot.
Configurazione del server MCPVerifichi prima se è in esecuzione, poi clona, compila, carica l'URL del plugin, configura VS Code, risolve i problemi.
Principi fondamentali di designRegole d'oro per chiarezza e coerenza, più l'ordine di priorità in cinque passaggi della gerarchia visiva.
Workflow di designPassaggi ordinati dal controllo del design system all'ispezione, creazione, layout flex e validazione visiva.
Gestione del design systemChiede o scopre token, colori, stili di testo e componenti, poi si dirama in base alla risposta.
Insidie chiave dell'API di PenpotGeometria di sola lettura, insertChild per l'ordine z, ordine flex invertito, reset di growType dopo il ridimensionamento del testo.
Posizionamento delle nuove boardTrova le board esistenti, calcola la prossima x dal margine più a destra, mantiene i flussi raggruppati visivamente.
Token di design predefinitiScala di spaziatura di riserva a 8px, scala tipografica e ruoli di colore semantici per design senza un sistema.
Checklist dei componentiRequisiti a caselle di controllo per pulsanti, form e navigazione, che coprono stati, dimensionamento ed etichette.
Controlli rapidi di accessibilitàSei controlli: contrasto, aree di tocco, focus, testo alternativo, gerarchia dei titoli, indipendenza dal colore.
Checklist di revisione del designControlli pre-finali su gerarchia, spaziatura, tipografia, WCAG AA, stati e coerenza del sistema.
Validazione dei designTabella dei metodi di validazione più l'esportazione del CSS da una selezione con generateStyle.

Descrizione della skill

"Guida completa per creare design UI/UX professionali in Penpot usando strumenti MCP. Usa questa skill quando: (1) Crei nuovi design UI/UX per applicazioni web, mobile o desktop, (2) Costruisci design system con componenti e token, (3) Progetti dashboard, form, navigazione o landing page, (4) Applichi standard di accessibilità e best practice, (5) Segui linee guida di piattaforma (iOS, Android, Material Design), (6) Rivedi o migliori design Penpot esistenti per l'usabilità. Trigger: "progetta una UI", "crea interfaccia", "costruisci layout", "progetta dashboard", "crea form", "progetta landing page", "rendilo accessibile", "design system", "libreria componenti"."

Descrizione front-matter da SKILL.md. Il file completo è di circa 12.103 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla skill penpot-uiux-design

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Devo installare il server MCP di Penpot prima di usarla?

No, e la skill lo verifica deliberatamente prima chiamando penpot_api_info. Fornisce i passaggi di installazione solo dopo aver confermato che il server non è installato; a quel punto la configurazione clona penpot-mcp, esegue npm install e npm run bootstrap, poi carica il plugin da http://localhost:4400/manifest.json in Penpot.

Quale client configura?

La sezione di configurazione mostra uno snippet settings.json di VS Code che registra un server penpot all'indirizzo http://localhost:4401/sse. Avverte inoltre che gli strumenti potrebbero non apparire finché non si riavvia completamente VS Code o Claude dopo aver modificato la configurazione.

Penpot UI/UX Design

Esegui penpot-uiux-design su un task di design UI reale.

Scarica OpenDesign, importa penpot-uiux-design dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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

Cosa fa la Skill penpot-uiux-design in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando Usare la Skill penpot-uiux-design

Buona applicazione

Conosci i limiti

Cosa fornire

Le regole che la skill penpot-uiux-design fornisce a Claude Code e Codex

Verificare il server prima di installare qualsiasi cosa

Non disegnare mai un board sopra un altro

Ridimensionare tramite metodi, non proprietà

Impilare i livelli con insertChild

I token predefiniti sono solo un fallback

Mantenere la soglia di accessibilità

Limitare palette e caratteri

Ripristinare il Text Grow Type dopo il ridimensionamento