MCP para designers: conectando Figma, tokens e código a Claude e Cursor

O que é MCP, em palavras simples

A documentação oficial do MCP o descreve como um padrão de código aberto para conectar aplicações de IA a sistemas externos, como arquivos, bancos de dados e ferramentas. Um de seus próprios exemplos é Claude Code gerando um aplicativo da web inteiro a partir de um design Figma. Para um designer, a parte importante é esta: a IA não precisa mais adivinhar a aparência do seu design. Ele pode perguntar diretamente à ferramenta de design.

Ferramentas de design com servidores MCP hoje

Em outubro de 2026:

• Figma: um servidor MCP que fornece contexto de design aos agentes (variáveis, componentes, layout) para geração de código e pode gravar conteúdo nativo de volta na tela. Figma lista-o nos planos Starter e pago; a escrita em tela é gratuita durante sua versão beta.
• Penpot: um servidor MCP gratuito e aberto que funciona com qualquer cliente MCP, incluindo Claude, Cursor, VS Code e OpenAI Codex, e pode ser auto-hospedado.
• ExodeUI (nós fazemos): um servidor MCP que permite que ferramentas de codificação de IA criem e editem animações interativas com estados e física de primavera.
• Tokens de design: se seus tokens estiverem em um repositório como JSON, uma ferramenta de codificação de IA já poderá lê-los como arquivos; um servidor dedicado só é necessário para tokens armazenados dentro de uma ferramenta.

Como os designers realmente o usam

Os fluxos de trabalho mais comuns são práticos e não mágicos. Os desenvolvedores selecionam um quadro e pedem à IA para implementá-lo com a biblioteca de componentes existente. Os designers pedem à IA para verificar se uma tela codificada corresponde ao design e listar as diferenças. As equipes pedem à IA para atualizar os tokens de um componente na base de código. E cada vez mais, os designers usam a IA para esboçar variantes diretamente na tela e, em seguida, refiná-las manualmente.

Conectando um servidor

Claude Code adiciona servidores com o comando claude mcp add ou por meio de um arquivo .mcp.json no projeto e suporta servidores HTTP remotos, bem como locais. Cursor gerencia servidores MCP em suas configurações e oferece suporte a servidores locais (stdio) e remotos. Os servidores remotos geralmente solicitam que você faça login uma vez com o OAuth. Cada fornecedor documenta o comando ou URL exato de seu servidor.

O que observar

MCP dá acesso real às ferramentas de IA, então trate-o como qualquer integração:

• Permissões: um agente que pode gravar no canvas ou repositório também pode cometer erros. Use o histórico de versões e revise as alterações.
• Privacidade: verifique para onde vão os dados do projeto e se o seu plano permite isso.
• Custo: alguns recursos de gravação são gratuitos na versão beta e planejados para serem baseados no uso.
• Qualidade: a saída de IA segue seu sistema de design somente se o sistema estiver bem estruturado, com componentes e tokens nomeados.