Módulo 6 · 3 de 6

API, CLI e MCP: quando usar cada um

Leitura: ~4 min

Nas últimas páginas, você conheceu a CLI e o MCP. No Módulo 1, você aprendeu sobre APIs. São três formas diferentes de conectar coisas, e pode ser confuso saber qual é qual. Vamos organizar isso de uma vez.

As três formas de conversar com sistemas

Pense nos três como formas diferentes de se comunicar. Cada uma tem seu público, seu contexto e seu propósito:

  • API (Application Programming Interface): é a conversa entre dois programas. O front-end pede dados ao back-end via API. O Figma puxa as fontes do Google Fonts via API. Você, como designer, raramente chama uma API na mão no trabalho (embora tenha feito exatamente isso no exercício do Módulo 1), mas tudo que você vê na tela depende delas. Vimos isso no Módulo 1.
  • CLI (Command Line Interface): é a sua conversa com o computador, por texto. Em vez de clicar em menus, você digita comandos. Git, npm, ferramentas de design tokens, tudo roda pela CLI. Vimos isso duas páginas atrás.
  • MCP (Model Context Protocol): é a conversa da IA com seus serviços. Em vez de você copiar informação para a IA, o MCP permite que ela acesse diretamente suas ferramentas, com sua permissão. Vimos isso na página anterior.
API vs. CLI vs. MCP API CLI MCP Quem fala com quem Programa com programa Pessoa com computador IA com serviços Analogia Garçom que leva o pedido à cozinha Falar diretamente com o computador A IA pede direto; a API ainda serve Exemplo App pede dados ao servidor Você digita git pull Claude lê seu arquivo do Figma Quando o designer encontra Sempre: tudo na tela depende de APIs Git, npm, design tokens, ferramentas de IA IA integrada com Figma, Jira, código Precisa saber usar? Não usar, mas entender Básico ajuda muito Saber que existe basta Três formas de conectar. Cada uma tem seu lugar. Você não precisa dominar todas. Precisa saber quando cada uma aparece.
API (programa com programa), CLI (pessoa com computador) e MCP (IA com serviços): três formas de conectar sistemas, cada uma com seu contexto.

Cenários do dia a dia

Para ficar ainda mais concreto, vamos ver situações reais onde cada um aparece:

  • "O app está demorando para carregar os produtos" : Isso é um problema de API. Os dados estão vindo devagar do servidor. Você, como designer, precisa pensar: o que o usuário vê enquanto espera? Skeleton screen? Loading spinner? Mensagem de erro se demorar demais? São decisões de design que dependem de entender que existe uma API no meio.
  • "Roda npm install e depois npm run dev para ver o projeto local" : Isso é CLI. O dev está te pedindo para instalar as dependências do projeto e rodar ele localmente no seu computador. São dois comandos. Se você fez o exercício da página sobre CLI (duas páginas atrás) e já usou echo no terminal, sabe que digitar comandos não é tão assustador.
  • "A IA vai ler direto o nosso Figma para gerar os componentes" : Isso é MCP. A IA está se conectando ao Figma para ter contexto real do projeto. Você pode contribuir perguntando: quais arquivos ela vai acessar? Quem dá permissão? Como garantimos que ela use a versão mais recente dos componentes?

Como eles se complementam

O ponto importante é que API, CLI e MCP não competem entre si. Eles se complementam:

  • A API é a infraestrutura. Tudo na web depende dela.
  • A CLI é a ferramenta de quem opera. Desenvolvedores e, cada vez mais, designers usam CLI para interagir com essa infraestrutura.
  • O MCP é a evolução. Permite que a IA use APIs e ferramentas diretamente, sem precisar de intermediário humano.

Pensar nesses três conceitos juntos te dá uma visão de sistema que poucos designers têm. E essa visão é exatamente o que diferencia um designer que "faz telas" de um que participa de decisões de produto.

Checagem rápida

Sem nota, sem pressão. Responda de cabeça e depois abra para conferir.

Na reunião, alguém diz "roda o npm install para subir o projeto local" e, minutos depois, "a IA vai puxar os componentes direto do nosso Figma". Como você classifica cada frase?

A primeira é CLI: você digitando um comando no terminal para conversar direto com o computador. A segunda é MCP: a IA acessando um serviço externo (o Figma) com contexto e permissão, sem você copiando e colando no meio. Uma terceira camada está escondida nas duas: por baixo, tanto o Figma quanto o servidor respondem via API, a conversa entre programas.

Um colega insiste que precisa "escolher" entre API, CLI e MCP para o projeto. Por que essa pergunta não faz sentido?

Porque as três não competem, elas se empilham. A API é a infraestrutura sobre a qual tudo roda. A CLI é como uma pessoa opera essa infraestrutura por texto. E o MCP deixa a IA usar APIs e ferramentas diretamente, sem intermediário humano. Um fluxo real costuma passar pelas três em níveis diferentes, então a pergunta certa é "onde cada uma aparece", não "qual usar".