CodeKitHubO que é esta ferramenta?
O Gerador de Chat do Microsoft Teams é uma ferramenta de mockup baseada no navegador que recria a visualização de chat individual do Teams — um cabeçalho com o avatar do contato, ponto de presença, nome e status, além de ícones de chamada/vídeo/compartilhamento, e uma sequência de mensagens usando o estilo de balão arredondado e alinhado à direita do Teams para mensagens enviadas.
O Teams usa por padrão um tema claro (fundo branco, detalhes roxo Fluent suave #6264A7), correspondendo ao que a maioria dos usuários do Microsoft 365 vê, com opção de alternar para o modo escuro.
Cada contato tem um status de presença — Disponível (verde), Ocupado (vermelho), Ausente (amarelo) ou Offline (cinza) — mostrado como um pequeno ponto colorido no avatar, exatamente como no aplicativo real do Teams.
Apenas para entretenimento e mockup: crie uma demo de produto corporativo, ilustre um fluxo de trabalho do Microsoft 365 para uma apresentação, ou monte o storyboard de um cenário de suporte. Nunca deve ser usada para se passar por uma conversa de trabalho real, um colega real, ou fabricar provas de algo que alguém não disse de verdade.
Nada do que você digita sai do seu dispositivo. Toda a conversa é desenhada com a API HTML Canvas diretamente no navegador, e o PNG é gerado e baixado localmente.
Por que usar?
- Crie prints realistas de chats do Teams para demos de software corporativo e estudos de caso.
- Faça o mockup de como um bot ou notificação do Teams vai aparecer antes de construí-lo.
- Ilustre um cenário de suporte de TI, um fluxo de integração de novos funcionários ou um exemplo de comunicação no trabalho para uma apresentação.
- Prototipe uma interface de chat estilo Teams para uma ferramenta interna.
- Renderização 100% local — o texto da sua conversa nunca chega a um servidor.
Como usar
- Defina o nome do contato e o status de presença (Disponível, Ocupado, Ausente ou Offline).
- Envie uma foto para o avatar, ou deixe como um círculo colorido com iniciais.
- Escolha tema claro ou escuro — o Teams é claro por padrão.
- Adicione linhas de mensagem: digite o texto, escolha um lado (ele/eu) e um horário.
- Veja a prévia em forma de telefone atualizar ao vivo e clique em "Baixar PNG" para salvar a imagem.
Exemplo
Entrada
Contato: "Jordan" · Status: "Disponível" · Mensagem 1 (ele): "Ei! Deu tempo de olhar aquilo?" · Mensagem 2 (ele): "Perfeito, mando o resto hoje à noite" · Mensagem 3 (eu): "Acabei de ver — ficou ótimo, pode publicar"Resultado
Uma imagem PNG mostrando um chat claro do Teams: um cabeçalho com o avatar de Jordan, um ponto de presença verde, nome e status "Disponível", dois balões recebidos cinza claro à esquerda com nome e horário acima, e um balão enviado roxo claro à direita.A imagem é gerada instantaneamente no canvas de prévia ao vivo e é baixada com um clique — sem espera, sem upload.
O que você pode personalizar
- Nome do contato e status de presença (Disponível, Ocupado, Ausente, Offline).
- Avatar: envie uma foto de verdade (recortada em círculo) ou escolha uma cor padrão.
- Tema claro ou escuro, com o claro como padrão autêntico do Teams.
- Linhas de mensagem ilimitadas, cada uma com seu próprio texto, lado (ele/eu) e horário.
Uso responsável
Este gerador existe para facilitar a criação de prints estilo Teams claramente fictícios para demos corporativas, apresentações e trabalhos de design. Não é uma ferramenta para fabricar provas, encenar assédio no trabalho ou fazer alguém acreditar que uma conversa falsa aconteceu num tenant real do Microsoft 365. Se você planeja compartilhar uma imagem feita com esta ferramenta, considere adicionar um contexto (como "fake" ou "mockup") para que quem veja entenda que não é uma conversa real.
Perguntas frequentes
É legal ou ético usar esta ferramenta?
A ferramenta em si é legal para uso em entretenimento, demos de produto, apresentações e trabalhos de design. O que não é legal nem ético é usar a imagem gerada para enganar alguém — por exemplo, apresentá-la como uma conversa real do Teams para cometer fraude, assediar ou difamar um colega, ou se passar por um chat de trabalho real. Dependendo de onde você mora, esse tipo de uso indevido pode configurar fraude, difamação ou assédio. Use apenas para fins claramente fictícios ou ilustrativos.
A ferramenta envia minhas mensagens ou foto para algum lugar?
Não. Cada mensagem, nome, foto e configuração que você insere permanece na memória do seu navegador e é desenhada diretamente em um elemento canvas usando JavaScript. O arquivo PNG é gerado e baixado no seu dispositivo — nada é enviado a nenhum servidor.
Posso controlar o ponto de status de presença?
Sim. Escolha Disponível (verde), Ocupado (vermelho), Ausente (amarelo) ou Offline (cinza) no menu de presença, e o pequeno ponto colorido no avatar do contato é atualizado de acordo, exatamente como no aplicativo real do Teams. Se seu cenário for sobre uma resposta rápida ou uma conversa em andamento, use Disponível ou Ocupado; se o objetivo do mockup for mostrar que uma mensagem ficou sem resposta ou foi vista depois, use Ausente ou Offline para deixar isso crível.
O Teams realmente usa balões de chat arredondados assim?
Sim. Diferente do Discord e do Slack, que mostram mensagens como uma lista simples, o Microsoft Teams usa balões de mensagem arredondados: as mensagens recebidas aparecem à esquerda com o nome do remetente acima, e suas próprias mensagens aparecem alinhadas à direita em um balão roxo claro. Esta ferramenta reproduz exatamente esse layout.
Posso enviar uma foto de verdade como avatar?
Sim. Clique em "Enviar foto" para usar qualquer imagem do seu dispositivo como avatar do contato — ela é recortada automaticamente em círculo. Se você pular essa etapa, o avatar volta a ser um círculo colorido com as iniciais do contato.