Material técnico traduzido

Model Context Protocol (MCP): Do Conceito à Prática

Um guia completo sobre os servidores Model Context Protocol que conectam assistentes de IA às suas ferramentas — do design e desenvolvimento de UI/UX à automação do seu ambiente de trabalho diário.

MCP SERVERS 19

WORKFLOWS 5

ECOSSISTEMA UI/UX + Dev

LICENÇA Open-source

⬇ Baixar PDF

Publicado em 12 de agosto de 2026

#ia #mcp #ui-ux #traducao

Fundamentos

O que é o Model Context Protocol (MCP)?

O Model Context Protocol (MCP) é um protocolo aberto e padronizado, criado pela Anthropic, que define como modelos de linguagem (LLMs) e agentes de IA se conectam a ferramentas e dados externos. Antes do MCP, cada integração exigia uma ponte sob medida; com o protocolo, um mesmo servidor MCP pode ser usado por qualquer assistente de IA compatível.

Na prática, o MCP organiza essa conexão em três camadas:

Papel	Função
Cliente MCP	O assistente ou IDE (Claude Desktop, Cursor, Windsurf, Cline, opencode…) que hospeda o agente e conversa com os servidores.
Servidor MCP	Um processo que expõe as ferramentas (ações), recursos (dados/contexto) e prompts (fluxos prontos) de um sistema — Figma, banco de dados, navegador, Jira etc.
Ferramentas / Recursos / Prompts	O que o servidor oferece ao modelo: executar ações, buscar informações e guiar tarefas dentro da ferramenta conectada.

O resultado é que a IA deixa de ser apenas um conselheiro passivo e passa a ser um participante ativo: ela pode ler um design, gerar código, testar uma interface e consultar seus sistemas — tudo por meio de servidores MCP.

Por que isso importa aqui: este guia reúne 19 servidores MCP — 14 do ecossistema de UI/UX e 5 do seu ambiente diário — organizados não por lista técnica, mas por workflows de trabalho, para que você saiba qual servidor usar em cada etapa e como combiná-los.

”O futuro da engenharia de UI/UX é colaborativo, automatizado e movido por IA — e os servidores MCP são a ponte para esse futuro.”

Workflow 1 · Ideação

💡 Brainstorm & Descoberta Visual

O ponto de partida de qualquer produto: explorar ideias, organizar referências e obter feedback visual rápido. Aqui, dois servidores ajudam a transformar conversas em quadros visuais e a “ver” o que está na tela.

MCP-Miro

evalstate⭐ 33

Conecta o Claude Desktop (e outros) à plataforma de quadro branco Miro.

Ferramenta	Descrição
`create_sticky_note` / `create_shape`	Cria post-it / forma em um quadro Miro
`bulk_create_items`	Cria vários itens de uma vez
`get_board_items` / `get_frames`	Recupera itens / frames de um quadro
`get_items_in_frame`	Obtém itens dentro de um frame específico

APIs: Miro REST API, Node.js, TypeScript, MCP · Chaves: token OAuth Miro. Ótimo para brainstorming visual — “tirar foto de post-its e pedir ao Claude para criar um equivalente no Miro”.

Vibe-Eyes

monteslu⭐ 22

Atua como os “olhos” dos LLMs em sessões de vibe coding com jogos e apps baseados em navegador, resolvendo o problema de contexto visual.

Ferramenta	Descrição
`getGameDebug`	Obtém visualização de canvas e informações de depuração

APIs: @neplex/vectorizer, Socket.IO, Express, SVGO, MCP SDK, Zod · Chaves: nenhuma. Cliente de navegador captura o canvas, servidor Node.js vetoriza as imagens e as disponibiliza via MCP — útil para depurar jogos.

Workflow 2 · Criação

🎨 Design & Prototipagem

A etapa em que o design toma forma no Figma, Framer, Illustrator e Photoshop. São os servidores que deixam a IA ler, criar e editar seus arquivos de design diretamente.

Cursor Talk to Figma MCP

Sonny Lazuardi⭐ 2,4 mil

Integração poderosa que implementa o MCP entre o Cursor AI e o Figma, permitindo ler e modificar designs via linguagem natural (projetado para Cursor, mas adaptável a outros clientes).

Categoria	Exemplos de ferramentas
Documento & Seleção	`get_document_info` `get_selection` `get_node_info`
Criação de elementos	`create_rectangle` `create_frame` `create_text`
Texto & Estilização	`set_text_content` `set_fill_color` `set_stroke_color` `set_corner_radius`
Layout & Organização	`move_node` `resize_node` `delete_node`
Componentes & Export	`get_styles` `create_component_instância` `export_node_as_image` `execute_figma_code`

APIs: Figma Plugin API, WebSocket, Bun, TypeScript, Zod · Chaves: nenhuma (exige plugin Figma + Cursor). Conexão via WebSocket entre Cursor AI e o plugin do Figma.

Framelink Figma MCP Server

GLips⭐ 4,4 mil

Faz a ponte entre arquivos do Figma e ferramentas de codificação com IA (Cursor, Windsurf e Cline).

Ferramenta	Descrição
`get_file`	Busca e simplifica os dados de um arquivo do Figma
`get_images`	Baixa imagens de um arquivo do Figma

APIs: Figma REST API, MCP SDK, Express.js, Zod, Remeda · Chaves: token da API Figma. Diferencial: simplifica respostas complexas da API em formatos limpos e legíveis por LLM.

Figma MCP Server com Chunking

archimedescrypto⭐ 1

Especializado em arquivos Figma grandes por meio de gerenciamento avançado de memória (chunking e paginação) — ideal para o Workflow 2 quando o design scale além do tamanho normal.

Ferramenta	Descrição
`get_file_data`	Obtém dados do arquivo com chunking e paginação
`list_files` / `get_file_versions`	Lista arquivos / histórico de versões em blocos
`get_file_comments` / `get_file_info`	Comentários com paginação / info com travessia de nós
`get_components` / `get_styles`	Componentes e estilos com suporte a chunking
`get_file_nodes`	Obtém nós específicos com suporte a chunking

APIs: Figma API, MCP, Node.js, TypeScript, Axios, Docker · Chaves: FIGMA_ACCESS_TOKEN. Ideal para sistemas de design empresariais com milhares de nós vetoriais.

Framer Plugin MCP

Sheshiyer⭐ 7

Criação e gerenciamento de plugins Framer com recursos web3 (carteiras cripto e contratos inteligentes), integrando protótipos a funcionalidades descentralizadas.

Ferramenta	Descrição
`create_plugin`	Cria um novo projeto de plugin Framer com recursos web3
`build_plugin`	Compila o plugin Framer para produção

APIs: MCP SDK, Framer SDK, Web3, Node.js, TypeScript · Chaves: nenhuma. Permite Wallet Connect, interação com contratos e componentes de NFTs.

Illustrator MCP Server

Spencer Hubert⭐ 14

Permite que IA interaja com o Adobe Illustrator via execução de JavaScript e feedback visual — abre caminho para criação automatizada de vetores e prototipagem.

Ferramenta	Descrição
`captureIllustrator`	Screenshot do workspace atual do Illustrator
`runIllustratorScript`	Executa código JavaScript no Illustrator

APIs: Python, MCP, AppleScript, Adobe JS API, httpx, Pillow · Requisitos: Só macOS Adobe Illustrator.

Photoshop Python API MCP Server

loonghao⭐ 11

Ponte entre Python e o Adobe Photoshop para controle programático e automação de tarefas de edição.

APIs: Python, Poetry, Nox, pytest, GitHub Actions · Chaves: nenhuma.

⚠️ Em estágio inicial. O autor não recomenda instalar ainda, mas, com contribuições open-source, poderia ser um divisor de águas para automatizar operações do Photoshop.

Workflow 3 · Handoff

📐 Design → Código (Handoff)

A ponte entre o design aprovado e o código real: converter layouts em componentes, organizar/documentar a UI e gerar estrutura para apps. São os servidores que eliminam o atrito do design-to-code.

MCP Figma → Converter React

studentofjs⭐ 4

Converte designs do Figma diretamente em componentes React, agilizando o fluxo design→código com acessibilidade de fábrica.

Categoria	Ferramentas
Ferramentas Figma	`getFigmaProject` `getFigmaComponentNodes` `extractFigmaComponents`
Ferramentas React	`generateReactComponent` `generateComponentLibrary`

APIs: Figma API, React, Tailwind CSS, TypeScript, Express.js, Zod, Axios, Prettier · Chaves: token API Figma. AcessibilidadeTailwind Adiciona atributos de acessibilidade automaticamente e converte estilos do Figma em classes Tailwind.

Storybook MCP Server

dannyhw⭐ 4

Faz a ponte entre LLMs e o Storybook, o famoso framework de desenvolvimento de componentes UI — promissor para descoberta de componentes, documentação e sugestões de testes.

Ferramenta	Descrição
`get-stories`	Recupera uma lista de stories do Storybook

APIs: MCP SDK, Storybook, Bun, TypeScript, Zod · Chaves: nenhuma.

MCP Server Flutter

Anton Malofeev⭐ 18

Interage com aplicações Flutter, ligando modelos de linguagem ao desenvolvimento de apps — útil para fluxos de desenvolvimento automatizados e testes mobile.

Ferramenta	Descrição
`flutter_execute`	Executa comandos Flutter em um repositório (create, pub, run, screenshot)

APIs: MCP SDK, Flutter, TypeScript, Node.js, Zod · Requisitos: caminho válido para um repositório Flutter.

Workflow 4 · Validação

🧪 Testes & QA de UI

Garantir que a interface funcione e se comporte como o esperado: testar entre navegadores, validar fluxos e checar acessibilidade. Dois servidores dominam essa etapa.

Playwright MCP

Microsoft⭐ 7 mil

Extensão do framework Playwright que permite a agentes de IA interagir com navegadores de forma estruturada. Implementação oficial da Microsoft.

Modo Snapshot	Modo Visão	Uso típico
`browser_navigate` `browser_click` `browser_type` `browser_select_option` `browser_snapshot` `browser_take_screenshot`	`browser_screenshot` `browser_move_mouse` `browser_click` `browser_type`	Testes web, extração de dados, automação de formulários, pesquisa de UI/UX

APIs: Playwright, MCP, Node.js, Zod, TypeScript · Chaves: nenhuma. Abordagem focada em acessibilidade e interações determinísticas. O modo visão cria um ciclo de feedback multimodal.

MCP Selenium Server

Angie Jones⭐ 78

Automação de navegador por meio do consagrado framework Selenium WebDriver — ideal para testes entre navegadores, automação de fluxo e acessibilidade.

Ferramenta	Descrição
`start_browser` / `navigate`	Inicia sessão / navega para uma URL
`find_element` / `click_element`	Encontra / clica em um elemento
`send_keys` / `get_element_text`	Digita / obtém o texto de um elemento
`hover` / `drag_and_drop` / `take_screenshot`	Hover / arrastar e soltar / screenshot

APIs: Selenium WebDriver, MCP SDK, Node.js, Chrome/Firefox · Chaves: nenhuma.

Workflow 5 · Integração

🔗 Automação Multi-domínio

Fluxos que cruzam várias ferramentas e domínios em um único agente — da geração de imagem à conversão de Markdown. Aqui a flexibilidade é o superpoder.

MCP-Toolbox

AI-ZeroLab⭐ 9

Coleção abrangente que estende as capacidades dos LLMs — a maior da lista, com mais de 30 ferramentas para automação multi-ferramenta.

APIs: múltiplas APIs, Python · Chaves: várias conforme a ferramenta (Figma, Tavily, etc.) · Integração: Docker. Ideal para fluxos entre domínios: geração de imagem, conversão Markdown e acoplamento com outros MCPs.

Resumo

📊 Análise Comparativa

Os 19 servidores do guia organizados por workflow, com foco e principais casos de uso.

Servidor	Workflow	Foco	Casos de uso
MCP-Miro	1 · Brainstorm	Quadro branco	Brainstorming visual, mapas
Vibe-Eyes	1 · Brainstorm	Contexto visual	Feedback visual, debug de jogos
Cursor Talk to Figma	2 · Design	Integração Figma	Manipulação de design
Framelink Figma	2 · Design	Acesso a dados Figma	Leitura/limpeza de arquivos
Figma c/ Chunking	2 · Design	Figma em arquivos grandes	Sistemas empresariais
Framer Plugin	2 · Design	Plugins Framer c/ web3	Blockchain, NFTs
Illustrator MCP	2 · Design	Controle do Illustrator	Vetores, automação
Photoshop API	2 · Design	Automação do Photoshop	Edição, batch
Figma → React	3 · Handoff	Conversão para código	Automação design-to-code
Storybook MCP	3 · Handoff	Descoberta de componentes	Documentação de UI
Flutter MCP	3 · Handoff	Comandos Flutter	Apps Flutter, teste mobile
Playwright MCP	4 · QA	Automação de navegador	Testes web, pesquisa UI
MCP Selenium	4 · QA	Testes com Selenium	Testes entre navegadores
MCP-Toolbox	5 · Integração	Coleção abrangente	Fluxos entre domínios
ai-memory	Ambiente	Memória persistente	Handoff entre sessões
jira	Ambiente	Integração Jira	Tickets, projetos (leitura)
postgres	Ambiente	Banco PostgreSQL	Consultas SQL, schemas
filesystem	Ambiente	Sistema de arquivos	Leitura/escrita de arquivos
chrome-devtools	Ambiente	Chrome ao vivo	Inspeção, screenshots, PDF

Ambiente local — opencode

⚙️ Os 5 MCPs do seu ambiente

Complemento deste guia: os servidores MCP realmente configurados no seu ambiente (arquivo ~/.config/opencode/opencode.json). São o exemplo mais concreto de “MCP na prática” — todos com enabled: true.

MCP	Tipo	Comando / URL	Status
ai-memory	remote	http://127.0.0.1:49374/mcp	✅ ativo
jira	local	npx mcp-jira-stdio	✅ ativo
postgres	local	npx mcp-postgres	✅ ativo
filesystem	local	@modelcontextprotocol/server-filesystem	✅ ativo
chrome-devtools	local	npx chrome-devtools-mcp@latest	✅ ativo

1. ai-memory — Memória persistente

servidor remoto local

Servidor de memória de longo prazo para agentes. Além do endpoint MCP, há um plugin (ai-memory.ts) que intercepta sessões, prompts e execuções de ferramentas, captura o que o agente lê/escreve (com política de captura via marcadores .ai-memory.toml) e envia ao servidor em 127.0.0.1:49374. No início de cada sessão, busca um handoff (/handoff) e injeta no system prompt o contexto de trabalhos passados — dando memória contínua ao agente entre sessões.

Memória contínuaHandoff entre sessõesCaptura de contexto

2. jira — Integração Jira

npx mcp-jira-stdio · freema

Servidor MCP do Jira. Expõe jira_get_visible_projects, jira_get_project_info, jira_get_issue, busca e comentários. Config: JIRA_BASE_URL, JIRA_EMAIL, JIRA_API_TOKEN — aponta para lemontechinfo.atlassian.net.

⚠️ Segurança: há uma regra instalada (jira-safety.md) que proíbe qualquer escrita — apenas leitura.

3. postgres — Banco PostgreSQL

npx mcp-postgres · kristofer84

Servidor MCP do PostgreSQL: list_tables, get_schema, query_data (só SELECT), além de insert/update/delete e DDL. Suporta SSL, auto-config para AWS RDS e modo read-only (DB_READ_ONLY=true).

⚠️ Segurança: a doc recomenda usar role de menor privilégio em vez do superusuário; execute_raw_query não tem restrição de escrita.

4. filesystem — Sistema de arquivos

@modelcontextprotocol/server-filesystem · oficial

Servidor oficial de referência: lê/escreve arquivos, cria/lista/exclui diretórios, move/renomeia, busca e metadados, com controle de acesso dinâmico via Roots.

5. chrome-devtools — Chrome DevTools MCP

npx chrome-devtools-mcp@latest · Google

O oficial do Google Chrome (48,7 mil ⭐): permite ao agente controlar e inspecionar um Chrome ao vivo — navegar, clicar, screenshots, árvore de acessibilidade, DOM, console, rede, traces de performance/memória e print to PDF. É o tipo de ferramenta capaz de gerar/recapturar PDFs (como este guia) automaticamente.

Combinações

🤝 Usando MCP Servers Juntos

O poder real vem de combinar servidores em fluxos de trabalho de agentes. Três cenários:

Cenário 1 — Pipeline completo design→implementação

Cursor Talk to Figma — explorar/entender a estrutura de um design
Figma to React Converter — gerar o código dos componentes
Playwright MCP ou MCP Selenium — testar os componentes
Storybook MCP — documentar os componentes
MCP-Miro — criar apresentação visual para stakeholders

Cenário 2 — Design system multiplataforma

Figma MCP com Chunking — extrair componentes de arquivos grandes
Figma → React Converter — gerar components web
MCP Server Flutter — implementações mobile
Playwright MCP — testar entre navegadores
MCP-Toolbox — documentar tudo (conversão Markdown)

Cenário 3 — Criação avançada de ativos visuais

MCP-Toolbox — gerar conceitos iniciais (imagem)
Illustrator MCP — refinar gráficos vetoriais
Photoshop Python API — efeitos de foto (quando pronto)
Framer Plugin MCP — integrar aos protótipos
Vibe-Eyes — feedback visual durante testes

Por que usar

Benefícios e Conclusão

Benefício	Descrição
Unindo Design e Desenvolvimento	Eliminam o atrito entre design e código, com transições perfeitas entre fases criativas e técnicas
Automatizando tarefas repetitivas	Controlam ferramentas programaticamente, liberando de tarefas manuais como design-to-code e testes entre navegadores
Colaboração aprimorada	Criam linguagem comum entre designers, desenvolvedores e assistentes de IA
Acessibilidade	Muitos (como Playwright MCP) têm suporte embutido a acessibilidade, apps mais inclusivos por padrão
Aceleração de fluxo	Acesso direto às ferramentas diárias pode comprimir cronogramas de desenvolvimento

O futuro da engenharia de UI/UX é colaborativo, automatizado e movido por IA — e os servidores MCP são a ponte para esse futuro.