Voltar
Material gratuito

Mostrar em vez de descrever: imagem dentro da conversa com a IA

Print de erro, print de tela, desenho de interface. As três formas de colar imagem, e o ciclo em que ela confere o próprio resultado sozinha.

5 min de leitura
Mostrar em vez de descrever: imagem dentro da conversa com a IA

O que você vai aprender

Você está com um erro na tela. Uma mensagem vermelha, um layout quebrado, um gráfico que saiu torto. E aí começa o trabalho inútil: traduzir em palavras o que já está visível na sua frente.

Três parágrafos depois, a IA entendeu outra coisa. O problema nunca foi a capacidade dela — foi você ter virado tradutor de imagem para texto, num caminho onde a informação se perde toda vez.

A saída é não descrever. É mostrar. O Claude Code aceita imagem dentro da conversa, e isso muda tanto o diagnóstico de erro quanto a construção de interface.


As três formas de colar uma imagem

A documentação oficial lista três caminhos, e cada um falha de um jeito diferente:

1. Colar da área de transferência. Tire o print pelo atalho do seu sistema e cole na conversa com Ctrl+V.

Aqui está a pegadinha que derruba quase todo usuário de Mac: o atalho padrão é Ctrl+V, não o Cmd+V do costume. Se você colar com Cmd+V, na maioria dos terminais a imagem simplesmente não entra — sem erro nenhum aparecer. Você fica achando que o recurso não existe.

A exceção é o iTerm2, onde Cmd+V funciona. E no Windows com WSL, se o terminal estiver capturando o Ctrl+V para si, a alternativa documentada é Alt+V.

Deu certo? Aparece um marcador [Image #1] na linha. É por ele que você se refere à imagem no texto do pedido, e é a confirmação visual de que ela entrou.

2. Arrastar o arquivo para dentro da janela. Pegue o PNG e solte na janela do terminal.

3. Escrever o caminho do arquivo no pedido. Analisa o erro em ~/Downloads/erro.png. É o caminho mais confiável quando os outros dois falham, e o único que funciona bem em sessão remota por SSH, onde não existe área de transferência compartilhada.

Dica prática: se o print está numa pasta com espaço no nome, ponha o caminho entre aspas. Sem elas o caminho quebra no espaço e ela procura um arquivo que não existe.


Os dois usos que valem a pena

O uso óbvio, e ainda assim subaproveitado. Em vez de copiar a mensagem de erro e perder o contexto visual (qual aba estava aberta, o que mais tinha na tela, onde o layout quebrou), você manda a tela inteira.

Pedido que funciona bem:

[cola o print]
Esse erro aparece quando clico em salvar. Acha a causa no código e me diz
o arquivo e a linha antes de mexer em qualquer coisa.

O "antes de mexer em qualquer coisa" é o que impede ela de sair editando seis arquivos com base num palpite. Diagnóstico primeiro, correção depois.

Desenho de tela: ela monta

Este é o que quase ninguém usa. Você desenha a interface — num papel, no Figma, no Paint, num rabisco de guardanapo fotografado — manda a imagem e pede para ela construir.

[cola o desenho]
Monta essa tela em React com Tailwind. Segue o espaçamento e a hierarquia
do desenho; onde eu não especifiquei cor, usa o padrão do projeto.

Funciona com rabisco de verdade. Não precisa ser mockup bonito — precisa ter a estrutura visível.


O ciclo que muda tudo: ela confere o próprio resultado

Aqui está a parte que a documentação ensina e que raramente aparece em tutorial.

A imagem não serve só para ela entender o pedido. Serve para ela conferir o que fez — e o ciclo fecha sozinho:

  1. Você mostra o desenho da tela.
  2. Ela monta o código.
  3. Ela roda, tira um print do resultado.
  4. Ela compara o print com o desenho original.
  5. Lista o que ficou diferente e corrige.
  6. Repete até bater.

O que isso muda na prática: você deixa de ser o olho dela. Antes, cada rodada exigia que você abrisse o navegador, olhasse, achasse a diferença e descrevesse em palavras — de novo o trabalho de tradução. Agora você entra só no fim, para conferir se o resultado presta.

Para o ciclo funcionar ela precisa conseguir tirar o print sozinha. Na prática isso quer dizer ter uma ferramenta de navegador disponível na sessão. Sem ela, o ciclo continua válido, só que o passo 3 é seu: você tira o print do resultado e cola de volta na conversa dizendo "compara com o desenho que te mandei".

Mesmo nessa versão manual o ganho é grande, porque a comparação é dela, não sua. Você não precisa achar a diferença — só entregar as duas imagens.


Quando mostrar não ajuda

Nem tudo melhora com imagem, e insistir custa contexto:

A regra que resolve os quatro casos: imagem serve para o que é visual. Erro de layout, gráfico, hierarquia de tela, screenshot de aplicativo de terceiro. Texto continua sendo texto.


O resumo em uma linha

Você não precisa descrever o que está vendo. Cola o print com Ctrl+V (mesmo no Mac), pede o diagnóstico antes da correção — e quando for construir tela, mande o desenho e deixe ela comparar o resultado com ele.

Você é o dono ou sócio do negócio?