penpot-uiux-designpor GitHub

Penpot UI/UX Design Skill.

Um skill de Claude Code e Codex para design UI: design UI/UX profissional, componentes e sistemas de design em Penpot através de ferramentas MCP.

Web & UI
Arquivo de design

Baixar OpenDesign Ver guia de 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

Metadados iniciais e títulos de seção lidos do arquivo original em 14/09/2026 · 12.103 caracteres no total

01 O que faz

O Que a Skill penpot-uiux-design Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Um guia para projetar interfaces reais no Penpot através do servidor penpot/penpot-mcp, escrito para designers e desenvolvedores cujo agente controla a API do plugin Penpot. Em vez de dar conselhos genéricos, ele especifica uma sequência de trabalho: verificar se o servidor MCP já está em execução, descobrir as cores, estilos de texto e componentes já existentes no arquivo, inspecionar a hierarquia com penpotUtils.shapeStructure e, então, criar boards, retângulos e textos e aplicar contêineres addFlexLayout.

Ele fornece escalas alternativas de espaçamento de 8px e tipografia, um layout mobile de 375x812 e um dashboard de 1440x900, listas de verificação para botões, formulários e navegação, limites de contraste WCAG e área de toque, espaçamento de posicionamento de boards, armadilhas conhecidas da API do Penpot como largura e altura somente leitura, e validação por meio de analyzeDescendants, filtragem por fontSize e export_shape.

O que ele produz

Designs novos ou modificados do Penpot criados por meio de JavaScript executado no contexto do plugin.
Renderizações PNG ou SVG das formas selecionadas, usadas para observar o design em vez de supor.
CSS extraído de uma seleção, incluindo elementos filhos, para handoff.

Veja o exemplo de prompt ↗

Como funciona

01
Confirmar Se o Servidor Está em Execução
O primeiro passo é uma chamada de teste a penpot_api_info, para que ninguém seja guiado pela instalação quando a conexão já funciona.
02
Encontrar o Design System Existente
Antes de desenhar, ele pergunta sobre as diretrizes de marca e lê o arquivo atual em busca de componentes, cores e padrões já em uso.
03
Inspecionar a Estrutura da Página
shapeStructure retorna a hierarquia existente para que novos elementos possam ser posicionados em relação ao que já está no canvas.
04
Criar os Elementos
Boards, retângulos e textos são criados por meio de chamadas do plugin no contexto do plugin Penpot, em vez de descritos em texto.
05
Validar por Meio de Exportação
Toda alteração termina com uma exportação, para que o resultado seja observado como imagem, e não apenas confiado a partir do código.

02 Encontre o ideal para você

Quando usar a skill penpot-uiux-design

Use a skill penpot-uiux-design no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo foram retirados do próprio arquivo da skill.

Boa Combinação

Alguém iniciando uma interface web, mobile ou desktop do zero e querendo que ela seja construída como um arquivo real do Penpot.
Configurando uma biblioteca de componentes e tokens de design que todo o produto vai reutilizar.
Produzindo telas comuns de produto, como dashboards, formulários, navegação e páginas de destino.
Auditando ou melhorando um arquivo do Penpot já existente, em vez de começar do zero.
Trabalho que precisa seguir as convenções do iOS, Android ou Material Design.

Conheça os Limites

Não funciona por conta própria: o servidor MCP local precisa estar em execução e a interface do plugin Penpot precisa mostrar que está conectada, ou as chamadas falham ou expiram.
Ele é restrito a designs do Penpot criados por meio do servidor penpot-mcp, não a outras ferramentas de design.
Passar pelas checklists não é o mesmo que comprovar que o design funciona; o arquivo ainda pede que você teste as hipóteses com usuários reais.

O Que Fornecer

Sistema de design ou diretrizes de marca existentes, se você tiverInforme ao agente seus tokens e especificações ou deixe que ele os descubra no arquivo atual antes de começar a desenhar.
Ícones, fotos ou logotiposOs recursos visuais são trazidos para o design por meio da ferramenta de importação de imagem.

03 Dentro da skill

Regras que a skill penpot-uiux-design dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Verifique o servidor antes de instalar qualquer coisa
Tente uma chamada de ferramenta primeiro e só siga com a configuração depois que o usuário confirmar que o servidor não está instalado.
Nunca desenhe um board sobre outro
Liste os boards existentes antes de criar um novo e posicione o novo board depois da borda direita mais distante deles, mais um espaço, usando 100px entre telas do mesmo fluxo e 200px+ entre seções diferentes.
Redimensione por métodos, não por propriedades
width e height são somente leitura, então mudanças de geometria passam por shape.resize(w, h) em vez de atribuição direta.
Organize camadas com insertChild
A ordenação em z usa insertChild(index, shape); appendChild explicitamente não é a forma de ordenar camadas.
Os tokens padrão são apenas um recurso de reserva
Quando o usuário tem um sistema de design, suas cores, espaçamentos e tipografia prevalecem; as escalas embutidas se aplicam apenas quando nenhum existe.
Mantenha o piso de acessibilidade
O contraste de texto permanece em 4.5:1 para corpo de texto e 3:1 para texto grande, e as áreas de toque nunca ficam abaixo de 44x44px.
Limite a paleta e as fontes
Use 1 cor primária mais 1 secundária mais neutras, e no máximo 1-2 fontes em todo o design.
Redefina o tipo de crescimento de texto após redimensionar
O Penpot redefine o comportamento de dimensionamento de texto ao redimensionar, então growType precisa ser configurado novamente para auto-width ou auto-height.

04 Coloque em prática

Instalar penpot-uiux-design no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar penpot-uiux-design ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Forma genérica de CLI skills para skills/penpot-uiux-design/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Cada elemento está dentro de seu contêiner, verificado com analyzeDescendants combinado com isContainedIn.
Nenhum texto fica abaixo de 12px, encontrado filtrando shapes por fontSize.
O contraste de cores atinge o WCAG AA antes de o design ser considerado final.
O aninhamento e a hierarquia são revisados com shapeStructure.
A tipografia do corpo do texto permanece em 16px ou mais.
Estados de carregamento, vazio e erro são considerados, não apenas o caminho ideal.

No OpenDesign importe penpot-uiux-design a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Arquivo da skill: skills/penpot-uiux-design/SKILL.md Checksum do conteúdo registrado na verificação; commit 1899b18
License: MIT De LICENSE.
Estrelas do repositório: 38.981 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório github/awesome-copilot, que contém 6 skills neste catálogo. Não é uma classificação ou contagem de uso para penpot-uiux-design.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Ferramentas MCP DisponíveisQuatro ferramentas com finalidades específicas: executar código, exportar formas, importar imagens, buscar a documentação da API do Penpot.
Configuração do Servidor MCPVerifique primeiro se está em execução, depois clone, compile, carregue a URL do plugin, configure o VS Code e resolva problemas.
Princípios Fundamentais de DesignRegras de ouro para clareza e consistência, além da ordem de prioridade de cinco etapas da hierarquia visual.
Fluxo de Trabalho de DesignEtapas ordenadas, desde a verificação do design system até a inspeção, criação, layout flexível e validação visual.
Tratamento do Design SystemPergunte sobre ou descubra tokens, cores, estilos de texto e componentes, e depois siga um caminho de acordo com a resposta.
Principais Armadilhas da API do PenpotGeometria somente leitura, insertChild para ordem em z, ordem flex invertida, reinício do growType após redimensionamento de texto.
Posicionamento de Novos QuadrosLocalize os quadros existentes, calcule o próximo x a partir da borda mais à direita, mantenha os fluxos agrupados visualmente.
Tokens de Design PadrãoEscala de espaçamento de 8px, escala de tipografia e papéis de cor semânticos como alternativa para designs sem sistema definido.
Checklist de ComponentesRequisitos em formato de checklist para botões, formulários e navegação, cobrindo estados, dimensionamento e rótulos.
Verificações Rápidas de AcessibilidadeSeis verificações: contraste, áreas de toque, foco, texto alternativo, hierarquia de títulos, independência de cor.
Checklist de Revisão de DesignVerificações finais de hierarquia, espaçamento, tipografia, WCAG AA, estados e consistência com o sistema.
Validação de DesignsTabela de métodos de validação, além da exportação de CSS a partir de uma seleção com generateStyle.

A Descrição da Própria Skill

Guia completo para criar designs profissionais de UI/UX no Penpot usando ferramentas MCP. Use essa skill quando: (1) Criar novos designs UI/UX para aplicações web, mobile ou desktop, (2) Construir design systems com componentes e tokens, (3) Projetar dashboards, formulários, navegação ou landing pages, (4) Aplicar padrões e boas práticas de acessibilidade, (5) Seguir diretrizes de plataforma (iOS, Android, Material Design), (6) Revisar ou melhorar designs existentes do Penpot para usabilidade. Gatilhos: "projetar uma UI", "criar interface", "construir layout", "projetar dashboard", "criar formulário", "projetar landing page", "tornar acessível", "design system", "biblioteca de componentes".

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 12.103 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre o Skill penpot-uiux-design

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Preciso instalar o servidor MCP do Penpot antes de usar isso?

Não, e o skill verifica isso deliberadamente primeiro, chamando penpot_api_info. Ele só fornece as etapas de instalação depois que você confirma que o servidor não está instalado; depois disso, a configuração clona o penpot-mcp, executa npm install e npm run bootstrap, e então carrega o plugin a partir de http://localhost:4400/manifest.json no Penpot.

Qual cliente ele configura?

A seção de configuração mostra um trecho de settings.json do VS Code registrando um servidor penpot em http://localhost:4401/sse. Também alerta que as ferramentas podem não aparecer até que você reinicie completamente o VS Code ou o Claude após alterar a configuração.

Penpot UI/UX Design

Execute penpot-uiux-design em uma tarefa real de design de UI.

Baixe o OpenDesign, importe penpot-uiux-design a partir do link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

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

O Que a Skill penpot-uiux-design Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando usar a skill penpot-uiux-design

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que a skill penpot-uiux-design dá ao Claude Code e ao Codex

Verifique o servidor antes de instalar qualquer coisa

Nunca desenhe um board sobre outro

Redimensione por métodos, não por propriedades

Organize camadas com insertChild

Os tokens padrão são apenas um recurso de reserva

Mantenha o piso de acessibilidade

Limite a paleta e as fontes

Redefina o tipo de crescimento de texto após redimensionar