Os melhores servidores MCP de design para Claude Code e Cursor

Um servidor MCP de design permite que um agente de código leia designs, pesquise referências de interface ou gere telas por meio do Model Context Protocol. Para um design já existente no Figma, comece com o Figma. Para busca de referências, use o Mobbin. Para novas telas de apps móveis em um projeto editável, o Sleek é uma opção criada para essa função.

Esta comparação cobre as funcionalidades documentadas e os caminhos de configuração de oito provedores para o Claude Code e o Cursor, verificados em 28 de setembro de 2026. Somos os criadores do Sleek. As recomendações abaixo são baseadas no que cada integração faz, não em um ranking de qualidade dos resultados baseado em testes diretos.

O que é um servidor MCP de design?

Um servidor MCP de design expõe as ferramentas de um produto de design para um cliente de IA. O agente pode chamar essas ferramentas e receber dados ou imagens sem pedir para você copiar cada detalhe no chat. O protocolo fornece a conexão; o servidor determina se o agente pode ler um arquivo, buscar em um catálogo ou alterar um design.

Um servidor hospedado se conecta por meio de uma URL. Uma integração local se conecta a um software no seu computador. Nenhuma das duas opções indica diretamente se a ferramenta consegue gerar telas. Verifique as operações disponíveis antes de escolher um servidor.

Como os servidores MCP de design se comparam?

O Figma é útil quando o design está ou deve ser feito no Figma. O Mobbin fornece referências de produtos existentes. O Stitch e o Sleek oferecem fluxos hospedados de geração de telas, enquanto o Pencil e o Paper conectam um agente a um canvas local. Algumas funcionalidades se sobrepõem, portanto escolha o tipo de resultado e o fluxo de trabalho de que você precisa, em vez de buscar a lista mais longa de ferramentas.

Todos os detalhes de acesso abaixo estão atualizados em setembro de 2026. As fontes dos provedores e as instruções dos clientes vêm logo após a tabela.

A tabela separa a geração da recuperação de referências. O resultado de uma busca pode ajudar o agente a entender um padrão de checkout, mas não é uma nova tela de checkout para o seu aplicativo.

O que faz o servidor MCP do Figma?

O MCP do Figma fornece contexto de design para implementação, incluindo layout, variáveis e componentes. O servidor remoto também permite que clientes compatíveis criem e editem conteúdo nativo no Figma. Use-o quando quiser trabalhar a partir de um arquivo do Figma ou editar esse arquivo. O servidor desktop continua disponível para leitura do contexto de design local.

A central de ajuda do Figma lista acesso remoto para todos os planos e tipos de licença, acesso desktop para licenças Dev ou Full pagas, e escrita no canvas gratuita durante a fase beta. O acesso não é ilimitado: a página de limites de uso do Figma concede ao plano Starter até 20 chamadas de ferramentas de leitura por mês, com limites maiores para licenças Dev e Full pagas.

Comandos verificados em 2026-09-28.

O guia de instalação remota recomenda este plugin para o Claude Code:

claude plugin install figma@claude-plugins-official

Ou adicione apenas o servidor:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Abra /mcp no Claude Code e faça a autenticação. Para o Cursor, o mesmo guia documenta este comando no chat do agente:

/add-plugin figma

Para a opção desktop, ative o servidor MCP no painel de inspeção do Dev Mode do Figma. O guia desktop fornece este comando para o Claude Code:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

A configuração desktop para o Cursor é:

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Cole o link de um frame e peça para o agente implementá-lo. Esse é o ponto de partida mais claro quando o layout já foi decidido. As ferramentas de escrita do servidor remoto também o tornam uma opção quando você precisa criar conteúdo diretamente no Figma.

O que faz o servidor MCP do Google Stitch?

O Google Stitch fornece uma conexão MCP hospedada para trabalhar com projetos do Stitch e gerar telas a partir de texto. O design resultante permanece em um projeto do Stitch. Ele atende desenvolvedores que querem usar o gerador de design do Google diretamente do seu agente de código e recuperar dados de telas como parte do mesmo fluxo de trabalho.

O guia de configuração do MCP do Stitch documenta a autenticação via chave de API e OAuth. A opção com chave de API utiliza uma chave obtida nas configurações do Stitch. O SDK oficial do Stitch também documenta o endpoint remoto, a geração e a recuperação de HTML e imagens de telas.

Claude Code, usando a configuração de chave de API do guia de instalação:

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Cursor, em .cursor/mcp.json:

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Substitua o marcador de posição pela sua chave e mantenha esse arquivo fora do controle de versão. Verifique os limites atuais na sua conta do Stitch antes de planejar um lote de gerações. A página de configuração é um guia de conexão.

O que faz o servidor MCP do Mobbin?

O MCP do Mobbin permite que o agente pesquise interfaces de produtos reais e receba imagens de telas. Ele é útil antes de desenhar um fluxo ou implementar um padrão sobre o qual você ainda não se decidiu. Suas ferramentas documentadas buscam materiais existentes; elas não geram um novo design de aplicativo. O resultado serve como material de referência para a sua próxima decisão.

A introdução do Mobbin confirma o uso de OAuth e o acesso nos planos Pro, Team e Enterprise. Sua lista de ferramentas inclui telas, fluxos e seções de sites. URLs de imagens em alta resolução expiram após 30 dias.

O guia do Mobbin para o Claude Code recomenda configurar primeiro o conector verificado no Claude Desktop ou na web. Ele também documenta esta alternativa exclusiva via CLI:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Em seguida, abra /mcp, selecione o Mobbin e faça a autenticação.

Para o Cursor, os passos de configuração do provedor usam o plugin do Marketplace em vez de um trecho de JSON:

1. Abra o plugin do Mobbin no Cursor Marketplace e selecione Add to Cursor.
2. Selecione Add Plugin.
3. No Cursor, abra Customize, depois Installed e em seguida Mobbin.
4. Selecione Authenticate e faça login.

Peça uma referência concreta, como telas de onboarding de aplicativos bancários. Escolha os padrões úteis antes de pedir para um gerador ou agente de código implementar seu próprio fluxo.

O que faz o servidor MCP do Sleek?

O MCP do Sleek permite que um agente gere telas editáveis de apps para iOS e Android em um projeto do Sleek. O agente pode recuperar o HTML das telas, renderizar imagens e retornar o link de um projeto para revisão. Use-o quando o design do aplicativo móvel for a etapa que falta entre o seu briefing e o código que você deseja que o agente escreva.

O README do MCP do Sleek documenta um servidor hospedado, login via OAuth e exportações para Figma e código. Forneça ao agente o briefing completo do app em uma única mensagem para que o Sleek possa planejar o conjunto de telas de forma integrada. A geração consome créditos do workspace; a leitura e a renderização não.

Claude Code:

claude mcp add --transport http sleek https://sleek.design/api/mcp

Abra /mcp, selecione o Sleek e conclua a autenticação no navegador. Para o Cursor, adicione o seguinte ao .cursor/mcp.json para um único projeto ou ao ~/.cursor/mcp.json para todos os projetos:

{
  "mcpServers": {
    "sleek": {
      "url": "https://sleek.design/api/mcp"
    }
  }
}

Ative o servidor e faça login. O README recomenda o uso de OAuth; as chaves de API são uma opção alternativa para clientes que não oferecem suporte a ele.

Contas gratuitas podem testar a API com 60 créditos de teste concedidos uma única vez. Entre os planos de assinatura públicos, o acesso contínuo à API e ao agente exige o plano Pro ou Team; o Starter não inclui esse acesso. O plano Pro custa $69/mês ou $360/ano com 20.000 créditos mensais em setembro de 2026. As exportações para Figma e código estão incluídas em todos os planos, com as exportações do plano gratuito limitadas às telas desbloqueadas.

O README do MCP estima cerca de 30 créditos por nova tela e de 5 a 30 por edição. Apenas uma execução de design pode estar ativa por projeto. A chamada design aguarda até 270 segundos e, se necessário, retorna um status de execução em andamento; o agente deve consultar periodicamente get_design_run em vez de reenviar o briefing.

O Sleek produz designs e código de interface exportável. Seu agente de código ainda precisa conectar os dados e o comportamento do aplicativo, além de adaptar o código da tela caso você esteja construindo com React Native ou SwiftUI. Se você prefere um fluxo de trabalho com API REST, o guia de skills de design de UI para Claude Code explica a instalação separada da skill do Sleek.

O que faz o servidor MCP do ScreensDesign?

O ScreensDesign MCP combina pesquisa de apps iOS com geração de telas. Sua página do MCP lista uma biblioteca com mais de 2.715 apps de maior faturamento, fluxos de UX completos, sinais de receita e ferramentas que geram telas a partir dessas referências em setembro de 2026. Ele se encaixa em um briefing que começa pela análise de padrões mobile existentes.

O acesso ao MCP exige o ScreensDesign Pro. O servidor hospedado suporta OAuth ou chaves de API com escopo. Para o Claude Code, adicione o endpoint HTTP e autentique-se via /mcp:

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

Para o Cursor, adicione isto ao .cursor/mcp.json e conecte o servidor:

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

Use o passo a passo de configuração do fornecedor para a configuração específica da conta. Os sinais de receita descrevem os apps de referência; eles não provam que copiar uma tela vai melhorar a taxa de conversão do seu app.

O que faz o servidor MCP do AIDesigner?

O AIDesigner MCP gera e refina designs em HTML/CSS com Tailwind para viewports mobile ou desktop. Ele pode usar o contexto do repositório e compartilhar os resultados com seu canvas. Escolha essa opção quando quiser código de interface gerado a partir do contexto do seu projeto, e depois inspecione o resultado antes de tratá-lo como uma implementação.

O guia oficial de configuração oferece uma CLI que configura o servidor e as instruções do agente. Execute isto na raiz do seu projeto para o Claude Code:

npx -y @aidesigner/agent-skills init

Para o Cursor, selecione o host explicitamente:

npx -y @aidesigner/agent-skills init cursor

Ambos se conectam a https://api.aidesigner.ai/api/v1/mcp. Conclua o login via OAuth no painel MCP do cliente. A geração consome créditos da conta; verifique seu saldo antes de gerar várias versões. O resultado documentado é HTML de interface, não um app mobile nativo completo.

O que faz o servidor MCP do Pencil?

O Pencil, agora pen.dev, conecta um agente ao documento .pen aberto em seu aplicativo desktop ou extensão de IDE. O agente pode inspecionar e alterar esse canvas enquanto você trabalha no mesmo arquivo. Isso atende desenvolvedores que querem um documento de design junto ao seu repositório e um fluxo de trabalho interativo de edição local.

A documentação de integração de IA descreve uma conexão stdio local com o aplicativo. O guia de instalação fornece estas etapas para o Claude Code em vez de uma URL que funcione em qualquer máquina:

1. Abra um documento .pen no pen.dev.
2. Ative o Claude Code CLI em Settings e depois em MCP.
3. Inicie ou reinicie o Claude Code.
4. Execute /mcp e confirme que o pencil está conectado.

Para o Cursor, use o caminho documentado para a extensão de IDE:

1. Abra Extensions e pesquise por pen.dev.
2. Instale a extensão.
3. Crie ou abra um arquivo .pen.

A página de preços informa que o pen.dev está gratuito no momento, em setembro de 2026. Isso não inclui a assinatura separada do seu agente de código. Mantenha o documento aberto para este fluxo de trabalho com MCP; não tente adivinhar um endpoint hospedado nem use um caminho para o executável copiado da máquina de outra pessoa.

O que faz o servidor MCP do Paper?

O MCP do Paper permite que um agente leia e edite um documento de design do Paper construído com HTML e CSS. Ele suporta um fluxo de trabalho de canvas compartilhado: o agente altera o design, você o inspeciona e o agente pode usar o resultado durante a implementação. O Paper Desktop precisa estar em execução com um arquivo aberto para essas operações no documento.

O guia do MCP do Paper documenta as seguintes instalações de plugin. Primeiro, instale e abra o Paper Desktop. Para o Claude Code, execute:

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

Em seguida, abra o Claude Code e verifique o /mcp. Para o Cursor, execute isto no painel do agente:

/add-plugin paper-desktop

Recarregue o Cursor se o servidor não aparecer. A configuração antiga de HTTP via localhost do Paper ainda funciona, mas os plugins atuais utilizam a CLI do Paper. A CLI pode expor ferramentas enquanto o Desktop estiver fechado; ainda assim, a leitura e a escrita de documentos exigem o aplicativo aberto.

A página de preços do Paper lista 100 chamadas MCP por semana no plano gratuito e 1 milhão por semana no Pro em setembro de 2026. O Pro custa $20 por editor por mês, ou $16 por editor por mês na cobrança anual. Um limite de chamadas de ferramentas não é uma contagem de telas: uma única tarefa de design pode envolver várias chamadas.

Qual servidor MCP de design você deve usar?

Use o Figma para implementar um design existente no Figma, o Mobbin para encontrar referências e o Sleek para gerar telas de apps móveis em um projeto que você pode revisar e exportar. O Stitch é outra opção de geração hospedada. Escolha o Pencil ou o Paper quando quiser um agente e um canvas local trabalhando no mesmo documento de design.

Comece pela tarefa imediata. Se um colega de equipe já lhe entregou um frame no Figma, um segundo gerador adiciona uma decisão de design que você talvez não precise tomar. Se você não tem um layout, buscar referências pode ajudar a decidir o que incluir na tela antes de iniciar a geração. Para o briefing de um novo aplicativo móvel, conecte seu agente ao Sleek e inspecione as telas resultantes antes de implementá-las. O teste gratuito cobre cerca de uma execução de design; o plano Pro dá suporte ao uso contínuo.

Forneça ao agente quaisquer regras de marca existentes como parte do briefing. A biblioteca DESIGN.md oferece orientações de design por escrito que você pode usar juntamente com essas ferramentas; ela é uma entrada separada da conexão MCP.

Para opções além de integrações com agentes, veja o ranking de ferramentas de design de apps móveis com IA e as alternativas ao Claude Design.

Perguntas frequentes