studio seu.
Área do cliente
/
Iniciar um projeto
Etapa 1 de 4

O que você tem em mente?

Selecione tudo que se aplica.

Voltar ao blog
UI/UXBrandingSistemaEstrategia

Apps dentro do chat em 2026: como eu desenho uma marca que vive dentro do ChatGPT e do Claude

por Felipe Mota · 14 de setembro de 2026 · 6 min de leitura

Uma marca dentro do chat, em 2026, não é um site encolhido: é um cartão, um carrossel ou uma tela cheia que roda dentro do ChatGPT, do Claude ou do Copilot, com a estrutura visual do anfitrião e a identidade da marca só nos detalhes. Na minha experiência, quem tenta levar o site inteiro para dentro da conversa perde. Quem desenha pensando em sotaque, e não em fantasia completa, ganha espaço no lugar onde o cliente já está decidindo.

O que são apps dentro do chat em 2026

Em 26 de janeiro de 2026 saiu o MCP Apps, a primeira extensão oficial do Model Context Protocol. Na prática, ela permite que um serviço mostre uma interface interativa de verdade dentro da conversa: formulário, mapa, gráfico, carrinho, agenda. A interface roda isolada, num iframe protegido, e o mesmo app funciona em vários anfitriões: Claude, ChatGPT, VS Code com GitHub Copilot, Microsoft 365 Copilot, Goose e Postman.

A lista de parceiros de lançamento já dizia muito: Canva, Figma, Asana, Slack, Box, Amplitude e Salesforce. E em 9 de julho de 2026 a OpenAI trocou o antigo diretório de apps pelo Plugin Directory, que junta apps, skills e modelos de app no ChatGPT e no Codex. O nome mudou, o protocolo continua o mesmo. O recado para quem cuida de marca é simples: a vitrine dentro do chat virou permanente.

Por que apps no chat mudam o design de marca

Aqui no Studio Seu eu passei os últimos anos defendendo que a marca precisa controlar o próprio ambiente: tipografia, cor, ritmo, espaço em branco. Dentro do chat, isso acaba. Quem manda na casa é o anfitrião.

As diretrizes de design de MCP Apps do Claude deixam isso explícito. Fundos, textos, bordas e ícones devem usar os tokens de estilo do anfitrião. A cor da marca entra só em acentos e elementos de identidade. A tipografia fica numa escala de três níveis (título, corpo e legenda) e dois pesos. E o modo escuro é obrigatório: nada de cor fixa no código.

Confesso que minha primeira reação foi de incômodo. Depois virou alívio. Essa restrição obriga a responder uma pergunta que muita marca nunca respondeu: se eu tirar a fonte proprietária e a paleta inteira, o que ainda faz alguém reconhecer a gente?

Como eu desenho uma marca para caber no chat

1. Escolho o sotaque, não a fantasia

Antes de qualquer tela, eu separo o que é estrutura e o que é assinatura. Estrutura vai para os tokens do anfitrião. Assinatura é pouca coisa e precisa ser muito bem escolhida: uma cor de acento, o jeito de mostrar uma foto de produto, um microtexto com a voz da marca, um estado de confirmação que parece da empresa. Eu costumo limitar a três sinais. Mais que isso vira ruído dentro de uma conversa.

2. Desenho primeiro o cartão inline

O formato que mais aparece é o cartão dentro da conversa, e ele é apertado. A orientação do Claude fala em no máximo duas ações, quatro ou cinco dados, altura que se ajusta ao conteúdo e nada de rolagem interna, menus ou popovers. Eu gosto desse limite porque ele funciona como um teste de hierarquia: se a informação principal não cabe ali, o problema não é o chat, é a proposta de valor.

3. Guardo a profundidade para a tela cheia

A especificação prevê três modos de exibição: inline, tela cheia e picture in picture. Eu uso a tela cheia para o que precisa de foco, como comparar planos, editar um pedido ou explorar um portfólio. E lembro sempre que a caixa de mensagem continua visível, então a interface precisa conviver com ela, respeitando as áreas seguras.

4. Divido o trabalho entre o app e a conversa

Uma regra que adotei: tudo que é manipulação direta (filtrar, selecionar, confirmar, salvar) fica no app. Tudo que pede linguagem (uma pergunta, um ajuste, um "faz de novo, só que mais barato") volta para o chat. Quando o app tenta imitar o chat, com campo de texto próprio, a experiência fica confusa e a marca parece intrusa.

5. Testo nos dois temas e no celular

Como a cor estrutural vem do anfitrião, a marca aparece em fundo claro e escuro sem que eu escolha. Por isso testo o acento nos dois temas, com contraste mínimo WCAG AA, alvos de toque de 44 pontos e skeletons no lugar de spinners. Parece detalhe, mas é aí que um app parece nativo ou parece um anúncio colado na conversa.

O que já mudou no meu processo

O design system que eu entrego hoje tem uma camada nova: um mapa de como os tokens da marca conversam com os tokens de um anfitrião. Não é mais só "nossa cor primária é tal". É "quando o fundo é do anfitrião, nosso acento é este, e no tema escuro ele vira este outro".

As ferramentas também empurram nessa direção. No Config 2026, em junho, a Figma deu ao próprio agente skills personalizadas e conectores MCP. O Google, por sua vez, ampliou os apps conectados do Gemini com serviços como Canva, OpenTable e Instacart. Design, produto e conversa estão virando o mesmo fluxo, e a marca precisa aparecer em todos eles sem perder o rosto.

Perguntas frequentes

O que é um MCP App?

É uma interface interativa que um serviço mostra dentro de um assistente de IA, como Claude ou ChatGPT, usando o Model Context Protocol. O mesmo app pode rodar em vários anfitriões compatíveis.

Dá para usar a identidade visual completa da marca dentro do chat?

Não é o recomendado. As diretrizes pedem que estrutura, texto e fundos sigam o anfitrião, e que a marca apareça em acentos, conteúdo e controles próprios.

Minha empresa precisa de um app no ChatGPT ou no Claude agora?

Depende da tarefa. Se o seu cliente resolve algo com começo e fim claros, como agendar, pedir, reservar ou comparar, vale testar. Conteúdo longo e estático continua melhor no site.

Um app no chat substitui o site da marca?

Não. Na minha visão, o site segue como a casa da marca, e o app no chat é a presença dela onde a decisão acontece. Um alimenta o outro.

Conclusão

Eu vejo os apps dentro do chat como o teste de identidade mais honesto que apareceu nos últimos anos. Sem a fonte, sem o layout e sem a tela inteira, sobra a essência: a voz, um acento de cor, o cuidado com cada estado da interface. Se a sua marca não passa nesse teste, o problema não é o ChatGPT. Se você quer descobrir como a sua marca apareceria dentro de uma conversa com IA, me chama aqui no Studio Seu. É exatamente o tipo de desafio que eu gosto de resolver.

O próximo
Vamos construir o seu.
→
Continue lendo
14 de outubro de 2026 · 5 min de leitura
Canva ProSuite em 2026: o que muda quando a ferramenta profissional fica grátis, e o que não muda
13 de outubro de 2026 · 6 min de leitura
Área do cliente em 2026: o que a nova pesquisa do Baymard me fez redesenhar no pós-venda
12 de outubro de 2026 · 5 min de leitura
Checkout para a Black Friday 2026: o que eu reviso na loja seis semanas antes do pico