Este artigo é patrocinado pela Penpot Imagine que seu arquivo Penpot contém um conjunto completo de ícones, além do design em si, que usa alguns, mas não todos, desses ícones. Se você pedisse a uma IA como Claude ou Gemini para exportar apenas os ícones que estão sendo usados, ela não conseguiria fazer isso. Não é possível interagir com arquivos Penpot. No entanto, um servidor Penpot MCP pode. Ele pode realizar um número escolhido de operações sob regras e permissões definidas, especialmente porque o Penpot possui uma API extensa e ainda mais porque é de código aberto. O trabalho da IA é simplesmente entender sua intenção, escolher a operação correta a ser executada pelo servidor MCP (uma exportação, neste caso) e transmitir quaisquer parâmetros (ou seja, ícones que estão sendo usados). O servidor MCP então traduz isso em uma solicitação de API estruturada e a executa. Pode ser útil pensar na IA como um servidor em um restaurante que recebe seu pedido, o servidor MCP como o menu e o chef, e a solicitação da API como (espero) uma torta de pizza quente em um prato quente. Por que servidores MCP, exatamente? Bem, o Penpot não é capaz de entender sua intenção porque não é um LLM, nem permite que LLMs de terceiros interajam com seus arquivos Penpot para a segurança e privacidade de seus dados Penpot. Embora os servidores Penpot MCP atuem como uma ponte segura, traduzindo a intenção da IA em solicitações de API usando seus arquivos e dados Penpot como contexto. O que é ainda melhor é que, como o Penpot adota uma abordagem de design expresso como código, os designs podem ser criados, editados e analisados programaticamente em um nível granular. É mais contextual, mais específico e, portanto, mais poderoso em comparação com o que outros servidores MCP oferecem, e muito mais cuidadoso do que o fluxo de trabalho de IA abaixo da média ‘Descrever → Gerar’ que acho que ninguém realmente deseja. O whitepaper de IA da Penpot descreve isso como uma abordagem ruim e a abordagem “Converter em código” como a abordagem feia, enquanto os servidores MCP são mais refinados e adaptáveis. Recursos e detalhes técnicos Antes de passarmos aos casos de uso, aqui estão alguns recursos e detalhes técnicos que explicam melhor como funcionam os servidores Penpot MCP:
Está em conformidade com os padrões MCP; Integra-se com a API Penpot para dados de projeto em tempo real; Inclui um SDK Python, API REST, sistema de plugins e ferramentas CLI; Funciona com qualquer assistente de IA habilitado para MCP (Claude no VS Code, Claude no Cursor, Claude Desktop, etc.); Suporta o compartilhamento do contexto de design com modelos de IA e permite que eles vejam e entendam os componentes; Facilita a comunicação com Penpot usando linguagem natural.
O que, então, os servidores MCP poderiam nos permitir fazer no Penpot, e o que os experimentos existentes já alcançaram? Vamos dar uma olhada. Casos de uso do servidor Penpot MCP Se você quiser apenas pular para o que os servidores Penpot MCP podem fazer, o Penpot tem algumas demonstrações de MCP armazenadas em um Google Drive que valem a pena assistir. O CEO da Penpot, Pablo Ruiz-Múzquiz, mencionou que os vídeos 03, 04, 06, 08 e 12 são seus favoritos. Uma maneira ainda mais rápida de resumir os servidores MCP é assistir à inauguração do Penpot Fest 2025. Caso contrário, vamos dar uma olhada em alguns dos exemplos mais refinados que o Penpot demonstrou em sua vitrine pública. Design-to-Code e vice-versa (e mais) Continuando com o que eu estava dizendo anteriormente sobre como os designs Penpot são expressos como código, isso significa que os servidores MCP podem ser usados para converter design em código usando IA, mas também código para design, design para documentação, documentação para projetar elementos do sistema, design para código novamente com base no referido sistema de design e, em seguida, componentes completamente novos baseados no referido sistema de design. Parece surreal, mas a demonstração abaixo mostra essa transmutabilidade, e não vem de instruções vagas, mas de escolhas de design anteriores, independentemente de como foram expressas (design, código ou documentação). Não há surpresas – estas são simplesmente as decisões que você teria tomado de qualquer maneira com base em decisões anteriores, executadas rapidamente. Na demonstração, Juan de la Cruz García, designer da Penpot, transmuta facilmente alguns componentes simples em documentação, elementos de sistema de design, código, novos componentes e até mesmo um projeto completo de Storybook como um pedaço de Play-Doh: Design-to-Code, validação de design/código e operações simples Em uma demonstração semelhante abaixo, Dominik Jain, cofundador da Oraios AI, cria um aplicativo da web Node.js baseado no design antes de atualizar os estilos de front-end, salva nomes e identificadores na memória para garantir uma tradução suave do design para o código antes de verificar a consistência, adiciona umcomente ao lado da forma selecionada no Penpot e, em seguida, substitui um rabisco no Penpot por um componente adaptado. Há muita coisa acontecendo aqui, mas você pode ver exatamente o que Dominik está digitando no Claude Desktop, bem como as respostas de Claude, e é muito robusto: A propósito, a demonstração anterior usou Claude no VS Code, então devo observar que os servidores Penpot MCP são independentes de LLM. Sua pilha de tecnologia depende totalmente de você. IvanTheGeek conseguiu configurar seu servidor MCP com JetBrains Rider IDE e Junie AI. Mais casos de uso Traduza uma placa Penpot para HTML semântico pronto para produção e CSS modular enquanto aproveita quaisquer tokens de design Penpot (lembre-se de que os designs Penpot já são expressos como código, então isso não é um tiro no escuro): Gere um protótipo web interativo sem alterar o HTML existente: Conforme mostrado anteriormente, converta um rabisco em um componente, aproveitando o design existente e/ou elementos do sistema de design: Crie a documentação do sistema de design a partir de um arquivo Penpot: E aqui estão mais alguns casos de uso do Penpot e da comunidade:
Exportações avançadas, Pesquise elementos de design usando linguagem natural, Extraia dados de APIs externas usando linguagem natural, Conecte facilmente o Penpot a outras ferramentas externas, Salvar tarefas repetitivas na memória e executá-las, Teste de regressão visual, Verificação de consistência e redundância do projeto, Análise e feedback de acessibilidade e usabilidade, Verificação de conformidade do sistema de design, Verificação da conformidade das diretrizes (marca, conteúdo, etc.), Monitore a adoção e o uso com análises de design, Mantenha automaticamente a documentação sincronizada com o design, Organização de arquivos de design (por exemplo, marcação/categorização).
Essencialmente, os servidores Penpot MCP abrem caminho para um número infinito de fluxos de trabalho graças à eficiência e facilidade do cliente LLM/LLM escolhido, mas sem expor seus dados a ele. Para que você usaria servidores MCP? Os servidores Penpot MCP nem estão em fase beta, mas é um experimento ativo do qual você pode fazer parte. Os usuários do Penpot já começaram a explorar casos de uso para servidores MCP, mas o Penpot quer ver mais. Para garantir que a próxima geração de ferramentas de design atenda às necessidades de designers, desenvolvedores e equipes de produtos em geral, elas devem ser construídas de forma coletiva e colaborativa, especialmente no que diz respeito à IA. Nota: Penpot está procurando testadores beta ansiosos para explorar, experimentar e ajudar a refinar o servidor MCP do Penpot. Para participar, escreva para support@penpot.app com o assunto “MCP beta test voluntário”. Há algo que você acha que os servidores Penpot MCP poderiam fazer e que as ferramentas atuais não são capazes de fazer bem o suficiente, rápido o suficiente ou não são capazes de fazer nada? Você pode aprender como configurar um servidor Penpot MCP aqui mesmo e começar a mexer hoje mesmo, ou se seu cérebro já estiver cheio de ideias, Penpot quer que você participe da discussão, compartilhe seus comentários e fale sobre seus casos de uso. Alternativamente, a seção de comentários logo abaixo também não é um mau lugar para começar!
