CodeKitHubO que é esta ferramenta?
O Gerador de Chat Personalizado é uma ferramenta de mockup baseada no navegador para criar um print de chat que não está preso à identidade visual de um único app real. Em vez de uma cor de marca fixa, você tem um seletor de cor para o balão "enviado" e outro para o balão "recebido", podendo assim combinar com um app fictício, um conceito de UI hipotético, ou simplesmente as cores que combinam com seu meme ou apresentação.
Isso é útil quando você quer um mockup de chat para uma história, um wireframe, ou uma piada sobre um app inventado, e não quer que a identidade visual reconhecível de um mensageiro real específico distraia do ponto principal.
Apenas para entretenimento e design: esta ferramenta foi feita para piadas, memes, esquetes, slides de apresentação, protótipos de UI/UX e conteúdo para redes sociais. Nunca deve ser usada para fabricar provas fraudulentas, assediar ou difamar alguém, ou se passar pelas mensagens reais de uma pessoa de verdade — isso pode ser ilegal dependendo da sua jurisdição e vai contra o uso pretendido desta ferramenta.
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. Não há envio a servidor, nem conta, nem rastreamento do conteúdo das suas mensagens.
Por que usar?
- Você está apresentando o conceito de UI de um app de mensagens que sua empresa está desenvolvendo e precisa de um mockup com as cores da própria marca, sem usar a identidade visual de nenhum app já existente.
- Está gravando um vídeo de esquete para o TikTok ou YouTube com uma cena de chat de um aplicativo fictício, mas usar a interface de um app real de verdade traria problema de direitos de imagem.
- Vai colocar num slide de apresentação um exemplo de conversa hipotética ("imagine que essa troca de mensagens aconteceu") e quer que pareça uma captura de tela de verdade, não só um texto solto no slide.
- Está fazendo o roteiro visual de um jogo ou visual novel e quer mostrar antecipadamente como ficaria a cena de troca de mensagens entre dois personagens.
- Quer liberdade total para combinar as cores dos balões de enviado e recebido com a identidade visual do seu projeto, sem ficar preso às cores de nenhum app existente.
- Mesmo enviando uma foto de rosto real para o avatar, é bom saber que a imagem nunca sai do navegador — tudo é processado localmente no canvas.
Como usar
- Defina o nome do contato, o texto de status e escolha o tema claro ou escuro para o restante da interface.
- Escolha uma cor para o balão enviado e outra para o balão recebido usando os dois seletores de cor.
- Envie uma foto para o avatar, ou deixe como um círculo colorido com iniciais.
- Adicione linhas de mensagem: digite o texto, escolha um lado (ele/eu) e um horário.
- Ajuste a barra de status (hora, bateria, sinal) como preferir.
- Veja a prévia em forma de telefone atualizar ao vivo e clique em "Baixar PNG" para salvar a imagem.
Exemplo
Entrada
Contato: "Alex" · Balão enviado: roxo · Balão recebido: cinza claro · Mensagem 1 (ele): "A gente ainda vai hoje à noite?" · Mensagem 2 (eu): "Vou sim! Te vejo às 8 😊"Resultado
Uma imagem PNG de 375×812 mostrando uma tela de chat com um balão cinza claro à esquerda com a primeira mensagem, e um balão roxo à direita com a resposta — usando exatamente as cores que você escolheu.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, texto de status e tema claro/escuro para o restante da interface.
- Cores do balão enviado e do balão recebido, escolhidas de forma independente.
- Avatar: envie uma foto de verdade (recortada em círculo) ou escolha uma cor padrão.
- Linhas de mensagem ilimitadas, cada uma com seu próprio texto, lado (ele/eu) e horário.
- Barra de status do telefone: hora, porcentagem de bateria e força do sinal.
Uso responsável
Este gerador existe para facilitar a criação de imagens de chat claramente fictícias para humor, storytelling e trabalhos de design. Não é uma ferramenta para fabricar provas, encenar assédio ou fazer alguém acreditar que uma conversa falsa é real. 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.
Configurações recomendadas por tipo de uso
A combinação ideal de tema e proporção muda conforme o objetivo final da imagem. Veja abaixo algumas sugestões de configuração para os usos mais comuns.
| Uso | Configuração recomendada |
|---|---|
| Postagem em Stories do Instagram ou TikTok | Manter a proporção vertical de celular e escolher o tema de acordo com o modo do app de destino |
| Slide de apresentação | Ajustar as cores dos balões para combinar com a paleta de cores da marca ou do slide |
| Protótipo de UI/UX para compartilhar com o time | Evitar cores associadas a apps reais para não gerar confusão sobre qual app está sendo prototipado |
| Cena dentro de um vídeo ou esquete | Manter as mensagens curtas e divididas em várias linhas para que o texto não fique pequeno demais na tela |
Perguntas frequentes
É legal ou ético usar esta ferramenta?
A ferramenta em si é legal para uso em entretenimento, mockups, 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 para cometer fraude, assediar ou difamar uma pessoa, ou se passar pelas mensagens reais de alguém. 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.
Devo usar esta ferramenta ou um dos geradores específicos de plataforma?
Se o seu mockup precisa parecer com um app real específico — WhatsApp, Telegram, Messenger, Signal, WeChat ou LINE — use o gerador dedicado daquele app para que as cores, marcas de confirmação e estilo do cabeçalho combinem com o que o público espera. Use este Gerador de Chat Personalizado quando quiser um mockup de chat para um app fictício, um wireframe, ou conteúdo onde você não quer a aparência de nenhuma marca real específica, e prefere escolher as cores exatas dos balões você mesmo.
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. A foto é usada apenas localmente no seu navegador e nunca é enviada a lugar nenhum.
Qual o tamanho da imagem exportada?
A prévia e o PNG exportado usam uma proporção de tela de celular (375×812 por padrão), que fica natural ao compartilhar em redes sociais ou incorporar em uma apresentação.
Dá para reordenar as mensagens depois de já ter adicionado várias?
As linhas de mensagem aparecem na ordem em que foram adicionadas à lista, então para mudar a sequência da conversa é preciso apagar a linha e recriá-la na posição certa. Como cada linha tem lado e horário configuráveis individualmente, também dá para intercalar mensagens de horários diferentes na mesma conversa.
Dá para exportar com fundo transparente para colar na apresentação?
O PNG exportado desenha a tela inteira do celular, incluindo fundo e barra de status, então a imagem já vem pronta para ser colocada direto no slide como uma "captura de tela". Se você quiser integrar melhor ao fundo do slide, uma opção é recortar só a moldura do celular ou adicionar uma sombra por fora, dando a impressão de um recorte de tela real.
Mensagens muito longas quebram o layout dos balões?
Os balões são pensados para quebrar linha automaticamente e ajustar a própria altura conforme o texto digitado. Mas uma única linha muito longa sem quebra natural (como um link sem espaços) pode ultrapassar a largura da tela e ficar com aparência estranha — o ideal é dividir mensagens compridas em várias linhas separadas, como acontece numa conversa de verdade.
O tema claro e escuro aparece igual em qualquer rede social onde eu postar?
Sim — o tema que você escolhe fica gravado na própria imagem PNG exportada, então ela vai aparecer sempre do mesmo jeito, independente de a rede social onde você postar estar no modo claro ou escuro. Vale escolher o tema pensando em qual vai ficar mais legível no contexto em que a imagem será usada.