Crie um mockup realista de conversa no estilo WhatsApp e baixe em PNG. Escreva os dois lados da conversa e defina o nome do contato, os tiques, os horários e o tema claro ou escuro. Grátis, sem cadastro, e tudo funciona no seu navegador. Só para paródia, mockups e rascunhos de design.
Só para paródia, mockups, educação e rascunhos de design. Não use para se passar por pessoas reais, falsificar provas nem enganar ninguém sobre uma conversa real do WhatsApp.
Você acabou de criar um mockup de conversa. Estes widgets grátis do CommonNinja transformam o chat em um canal de verdade no seu site, sem código.
Coloque um botão de chat do WhatsApp de verdade no seu site para que os visitantes falem com você com um toque, direto da página que já estão lendo.
Um botão flutuante, todos os canais. Deixe as pessoas falarem com você por WhatsApp, Messenger, Telegram ou e-mail a partir de um único widget.
Responda automaticamente às perguntas que você recebe o dia todo e passe as mais difíceis para uma conversa de verdade com você.
Deixe o compartilhamento da sua página a um toque para os visitantes. Cada compartilhamento leva a imagem que você acabou de criar para além do seu próprio público.
Outras ferramentas grátis para conteúdo de redes sociais e mockups.
Crie um mockup de conversa no estilo Telegram no modo claro ou escuro e exporte como um PNG limpo.
Usar ferramenta →Crie um mockup de conversa no estilo Messenger com balões azuis arredondados. Grátis, no seu navegador.
Usar ferramenta →Crie um mockup de post no estilo Reddit com votos, prêmios e uma seção de comentários em thread. Exporte um PNG.
Usar ferramenta →Crie prints realistas de posts do X (Twitter) com visualizações, níveis de selo de verificação e itens salvos. Baixe um PNG limpo.
Usar ferramenta →Crie um mockup de mensagem de texto do iPhone com balões azuis do iMessage ou verdes de SMS, reações e um aviso de Lido.
Usar ferramenta →Crie um mockup de post do Facebook com reações, compartilhamentos e uma thread de comentários. Exporte um PNG.
Usar ferramenta →Crie um mockup de post do Instagram com a sua própria foto, legenda, curtidas e comentários.
Usar ferramenta →Crie um mockup de DM do Instagram com balões em degradê, reações de coração e a etiqueta Visto.
Usar ferramenta →Crie um mockup de conversa do Snapchat com barras laterais coloridas, um snap score e um status em cada linha.
Usar ferramenta →Coloque um texto grande atrás do seu objeto principal com um clique. Recorte automático, sem cadastro, tudo no seu navegador.
Usar ferramenta →Crie um mockup de conversa no estilo ChatGPT no modo claro ou escuro, com linhas de raciocínio e blocos de código.
Usar ferramenta →Crie um mockup de chat de IA no estilo Gemini com o ícone de brilho, inícios de frase em negrito e uma exportação limpa em PNG.
Usar ferramenta →Crie um mockup de um card de AI Overview do Google com barra de pesquisa, resposta em tópicos e fontes citadas.
Usar ferramenta →Como funciona
Sem conta, sem cadastro, totalmente grátis. O mockup aparece ao vivo e o PNG é gerado no seu navegador, então nem o seu texto nem a sua imagem são enviados a um servidor.
Adicione uma mensagem, marque como Contato ou Você e digite o texto. Mude a ordem das linhas com as setas e defina um horário para cada uma.
Defina o nome do contato e a linha de status, envie uma foto de perfil, escolha claro ou escuro e ligue ou desligue o papel de parede, os tiques, os horários e os pontinhos de digitação.
Um clique exporta um PNG nítido em 2x com largura fixa de celular, pronto para um slide, um storyboard, o rascunho de uma landing page ou um meme.
Os detalhes
Um print de conversa convincente quase nunca depende das cores. Depende do ritmo da conversa e de os pequenos detalhes baterem entre si.
linhas curtas + turnos desiguais + minutos de diferença = ritmo real
As pessoas conversam em fragmentos. Mandam duas mensagens seguidas, respondem atrasado e quase nunca escrevem um parágrafo completo. Copie esse ritmo e o mockup parece um print de tela. Escreva como um e-mail e ele parece um rascunho.
A outra metade é a coerência. Se o cabeçalho diz online, a última resposta deve ser recente. Se o estado de entrega diz lida, a mensagem mais nova deve ser uma que você enviou. Cada um desses detalhes é pequeno sozinho, e cada um é a primeira coisa que o leitor nota quando está errado.
Vale dizer com todas as letras: um visual convincente é para trabalho de design. Nunca é motivo para apresentar um mockup como uma conversa verdadeira. Mantenha como um gráfico, sinalize quando fizer diferença e invente todos os nomes que aparecem nele.
Configurações
Seis controles definem o visual da exportação. Veja o que cada um faz e para que tipo de trabalho ele serve melhor.
| Configuração | O que faz | Ideal para |
|---|---|---|
| Tema claro | Fundo de conversa bege, balões recebidos brancos e balões enviados verde-claro | Posts de blog, apresentações e qualquer coisa colocada sobre uma página branca Mais usado |
| Tema escuro | Fundo quase preto com balões enviados verde-escuro | Reels, miniaturas e fotos de produto que precisam de muito contraste Depende do caso |
| Papel de parede da conversa | Textura suave com padrão atrás dos balões | Capturas de tela que devem parecer um celular de verdade, e não um gráfico chapado Depende do caso |
| Tiques de entrega | Um tique para enviada, dois para entregue e dois azuis para lida | Mostrar se a última mensagem foi enviada, entregue ou lida Mais usado |
| Indicador de digitação | Três pontinhos em um balão no fim da conversa | Mockups com suspense, em que a resposta ainda está chegando Depende do caso |
| Barra de status | Relógio, barras de sinal e bateria no topo | Visual de captura de tela completa do celular. Desligue para um card mais limpo em uma apresentação Depende do caso |
Os temas seguem as paletas claras e escuras comuns dos apps de mensagens em 2026. Esta ferramenta não tem vínculo com nenhuma plataforma de mensagens nem é endossada por elas.
Use do jeito certo
Um mockup de conversa é um recurso de design. Estes são os trabalhos do dia a dia para os quais ele foi feito, e os usos que o transformam em algo completamente diferente.
| Cenário | O que é | Veredito |
|---|---|---|
| Mockups de apps e sites | Conversas de exemplo em um protótipo de produto, um fluxo de onboarding ou a demo de um recurso de chat | Bom uso |
| Treinamento de suporte e vendas | Mostrar à sua equipe como é uma boa resposta a um cliente, com nomes inventados | Bom uso |
| Memes e esquetes | Diálogos claramente humorísticos entre personagens inventados | Bom uso |
| Storyboards e roteiros | Visualizar uma cena de conversa para um vídeo, um anúncio ou um exercício em sala de aula | Bom uso |
| Falsificar provas | Apresentar um mockup como uma conversa verdadeira em uma disputa, uma reclamação ou um processo judicial | Nunca |
| Se passar por alguém ou aplicar golpes | Fazer parecer que uma pessoa, marca ou banco real disse algo que nunca disse | Nunca |
Evite isto
Quatro destes são questão de técnica. Os dois primeiros não são negociáveis. Leia antes de exportar qualquer coisa que vá sair da sua própria tela.
A única regra que importa mais do que todas as dicas de design desta página. Um mockup não é registro de nada. Usá-lo para sustentar uma reclamação, ganhar uma discussão ou enganar um empregador, uma plataforma ou um tribunal é fraude, não design.
Nunca apresente como realUm nome real, um logo real ou um número de telefone real no cabeçalho transforma um rascunho de design em uma forma de se passar por outra pessoa. Em vez disso, invente o contato. Não custa nada e mantém o mockup limpo.
Invente o contatoRespostas que chegam antes da mensagem que respondem, ou uma conversa que pula horas entre duas frases, quebram a ilusão na hora. Faça os horários avançarem em passos pequenos.
Mantenha os horários em ordemOs tiques de entrega só aparecem nas mensagens que você enviou, nunca nas que recebeu. Esta ferramenta segue essa regra, então deixe uma mensagem enviada por último se os tiques forem o destaque da imagem.
Tiques só nas enviadasUma conversa real é curta, em minúsculas e meio bagunçada. Parágrafos completos com pontuação perfeita parecem texto publicitário, e é exatamente isso que faz um mockup parecer montado.
Escreva como as pessoas conversamUm mockup claro sobre um slide branco parece flutuar, e um escuro em um reel escuro desaparece. Escolha o tema pensando onde a imagem vai ficar de fato, não no que fica bonito no editor.
Combine o tema com o contextoBoas práticas
Todos os widgets do CommonNinja citados abaixo são grátis para começar. Aplique estas dicas enquanto escreve a conversa e depois de colocar a imagem.
01
Um nome e sobrenome genéricos mantêm o foco no texto das mensagens e afastam você de qualquer coisa que pareça um contato real.
02
Conversas reais são desequilibradas. Duas mensagens rápidas de uma pessoa e depois uma resposta mais longa parecem muito mais verdadeiras do que um vaivém certinho a cada linha.
03
Coloque a primeira mensagem alguns minutos antes da última. Respostas no mesmo minuto durante a conversa inteira são o jeito mais rápido de perceber um mockup.
04
Se a história é “leu e não respondeu”, termine com uma mensagem enviada e defina o estado de entrega como Lido. Se é “está respondendo”, ligue o indicador de digitação.
05
O relógio e a bateria deixam a captura com cara de celular, mas poluem um slide. Tire os dois quando o mockup ficar dentro de outra moldura ou da imagem de um dispositivo.
06
Um mockup mostra como uma conversa poderia ser. Um botão de chat começa a conversa de verdade, em qualquer página em que o visitante já esteja.
Adicione o chat do WhatsApp grátis →EN07
Nem todo mundo manda mensagem do mesmo jeito. Um único botão flutuante pode oferecer WhatsApp, Messenger, Telegram e e-mail, para que os visitantes escolham o que já usam.
Adicione o All In One Chat grátis →EN08
Em um artigo, uma apresentação ou um pitch, uma legenda curta dizendo que a conversa é um mockup de design elimina qualquer dúvida e não custa nada.
Glossário
Seis termos que aparecem sempre que você cria um print de mensagens. Úteis se você faz isso para uma equipe.
Do blog
Mais do blog do CommonNinja (em inglês). Grátis, sem cadastro, só posts práticos sobre como falar com seus clientes onde eles já estão.
In this article, we are going to discuss how to build a chat application with Svelte and Firebase.
Ler artigo →ENIn this article, we’ll explain why a chatbot is essential to an e-commerce store
Ler artigo →ENIn this article, we are going to discuss how to use social media to drive traffic to your website.
Ler artigo →ENIn this article, we explore using social media to promote tournament brackets, discussing strategies for crafting...
Ler artigo →ENIn this article, we are going to discuss the top WhatsApp Chat Button widgets for your website. We’ll present a list of...
Ler artigo →ENIn this article, we are going to discuss the top Telegram Chat widgets for your website. We’ll present a list of...
Ler artigo →EN