Imagens e Multimodal: Cole um print e ele entende
📚 Navegação da Série: O artigo anterior 16 Fluxos de Trabalho Comuns repassou os padrões diários como ler código, consertar bugs e escrever testes. Este artigo adiciona uma nova dimensão — não dá apenas para digitar texto para ele, mas também mostrar imagens diretamente: print de erro, design, diagrama de arquitetura, jogue lá e ele entenderá.
Por exemplo, transformar um print de tela feito pelo designer num site. Antigamente a gente precisava ficar medindo pixel por pixel — quanto de margem aqui, qual tamanho de fonte ali, qual o raio da borda do botão, perdíamos uma manhã inteira só ajustando valores.
Mas agora, você só precisa arrastar aquele PNG diretamente para a janela do Claude Code e digitar algo como "Gere o CSS equivalente baseado neste design".
Alguns minutos depois, ele cospe um bloco inteiro de CSS — layout, esquema de cores, bordas arredondadas e sombras; tudo bate. Copie e cole no projeto, atualize o navegador e está praticamente idêntico ao design original. A diferença de eficiência é imediata: mostrar é muito mais rápido do que falar.
No fim das contas, a frase "Uma imagem vale mais que mil palavras" é literalmente verdade aqui no Claude Code. Hoje, vamos explicar detalhadamente "como dar imagens + o que você ganha com isso".
Após ler este artigo, você terá:
- Três métodos para colocar imagens dentro do Claude Code, só seguir e fazer (incluindo uma armadilha de atalho que usuários de Mac costumam cair)
- Os três principais usos reais de imagens: Colar prints de erros, recriar designs, ler gráficos/diagramas de arquitetura
- Uma regra de ouro: quando você deve usar imagem e quando apenas digitar é suficiente
- Como lidar com múltiplas imagens, como o Claude as referencia e como abrir a imagem que ele mencionou num clique
01 Por que dar imagens em vez de apenas digitar?
A conclusão primeiro: Quando explicar algo por texto for "mais difícil do que tirar um print", então tire o print.
Esta é a regra clara escrita em preto e branco na documentação oficial — "Use imagens quando a descrição por texto não for clara ou for muito longa".
Analogia: Uma imagem vale mais que mil palavras. Você tenta descrever um pop-up de erro vermelho pro seu amigo: "tem um 'X' vermelho no canto superior esquerdo, umas letrinhas embaixo e um botão do lado direito...". Seu amigo fica confuso. Mas se você tirar um print e mandar, ele "Ah!" na mesma hora. O princípio é o mesmo para o Claude — economiza sua energia pra organizar palavras, e também economiza a energia dele para tentar adivinhar.
Quais cenários são os melhores para usar imagens? Principalmente estas três categorias:
| Cenário | O quão cansativo é digitar | O quão fácil é com imagem |
|---|---|---|
| Desalinhamento da Página / CSS errado | "Esta div está uns 20 pixels pra direita e sobrepondo a de baixo" | Tire um print, ele vê o erro na hora |
| Pop-up de erro / Texto vermelho do Console | Digitar ou copiar/alinhar a stacktrace gigante manualmente | Jogue o print, e você envia até o contexto ao redor |
| Recriar design / Clonar componente | "A cor principal é um azul arroxeado, bordas médias..." | Dê a imagem e deixe-o medir sozinho |
É preciso deixar claro uma diferença importante: O Claude Code olha "o conteúdo dentro da imagem", não tira o print para você. A ação de tirar o print você mesmo precisa fazer (usando a ferramenta do sistema); ele é responsável por "entender a imagem que você deu".
💡 Resumo em uma frase: A regra é única — se for mais difícil descrever do que tirar um print, mande o print; as palavras oficiais dizem "use imagens quando o texto não for claro ou for longo".
02 Três formas de mandar a imagem: Arrastar, Colar e Caminho
Como você insere a imagem lá dentro? A documentação oficial dá três formas, escolha qualquer uma, o resultado é o mesmo. Vou listá-las por "facilidade de uso", da menor para a maior.
Esta imagem unifica os três caminhos: arrastar para a janela, copiar e ctrl+v para colar (inclusive no Mac), ou fornecer o caminho do arquivo direto — as três levam ao mesmo lugar, que é alimentar o Claude com a imagem para ele "trabalhar olhando para ela".
Método Um: Arrastar para a janela (Mais intuitivo)
Simplesmente arraste o arquivo de imagem do seu Finder / Gerenciador de Arquivos para a janela do terminal onde o Claude Code está rodando, solte, e pronto.
É o jeito que exige menos raciocínio — como arrastar uma foto para o chat do WhatsApp. Quem é novato costuma começar por aqui, zero curva de aprendizado.
Método Dois: Copiar e ctrl+v (Mais frequente, mas tem pegadinha)
Muitas vezes a imagem nem está salva como arquivo — você acabou de tirar o print, ou clicou com o botão direito e "Copiar imagem" na web. Nesses casos, colar direto é a melhor coisa.
Mas aqui temos a maior pegadinha de todas, que a própria documentação faz questão de destacar:
Copie a imagem e use
ctrl+vpara colá-la na CLI (não usecmd+v).
Aviso: No Mac, colar a imagem também é ctrl+v, não o cmd+v ao qual você está acostumado.
O quão contra-intuitivo isso é? Usuários de Mac colam coisas com cmd+v há dez anos, a memória muscular está enraizada. Na primeira vez que você for colar um print, a chance de instintivamente apertar cmd+v é grande, e o resultado será uma string estranha de texto de caminho jogada no terminal, a imagem nem entrou e você acha que não suporta. Se você olhar a documentação, entende — em muitos terminais o cmd+v cola o caminho em texto, só o ctrl+v coloca a própria imagem para o Claude.
(Detalhe: alguns terminais como o iTerm2 até aceitam cmd+v para imagens, mas como o comportamento varia de app pra app, ctrl+v é a rota que sempre funciona em todo lugar, decore-a e não sofra).
Grave isto na mente:
| Plataforma | Para colar imagem use | Não use |
|---|---|---|
| Mac | ctrl+v | ❌ cmd+v (a maioria dos terminais colará como texto de caminho) |
| Windows / Linux | ctrl+v (No WSL, se o terminal interceptar ctrl+v, use alt+v) | —— |
Um pequeno detalhe: depois de colar com sucesso, aparecerá um marcador [Image #1] no input (oficialmente chamado de "chip"), indicando que a imagem foi anexada; você pode continuar digitando seu texto naquele mesmo prompt.
Método Três: Dar o caminho da imagem direto (Bom para scripts ou fotos salvas)
Se a imagem já estiver salva como um arquivo e você souber o caminho, a forma mais seca é digitar o caminho diretamente no prompt, para que ele mesmo leia:
Analise esta imagem: /caminho/para/sua/imagem.pngBasta trocar /caminho/para/sua/imagem.png pelo caminho real da sua imagem (aceita caminhos absolutos e relativos). Este método não depende do mouse, sendo excelente para scripts ou quando a imagem está muito escondida dentro de algum diretório do projeto.
💡 Resumo em uma frase: Arrastar / Colar com
ctrl+v/ Dar caminho do arquivo, as três servem; Usuários do Mac, lembrem-se doctrl+v, nuncacmd+v.
03 Uso Um: Colar erros e prints da UI, dando a ele "A cena do crime"
O primeiro cenário super prático — jogue aquele print de erro pra ele, pra que ele resolva olhando pro local do crime.
Por que essa tática é tão boa? Porque muitos erros e problemas de estilo, texto nenhum consegue passar todos os detalhes. Um pop-up tem ícones, tem cores, tem o layout; tentar descrever com palavras dará apenas um esboço. Com a UI fora do lugar, é pior ainda; você nota uns pixels a mais que seriam um pesadelo de explicar falando.
Analogia: Ir ao hospital e em vez de tentar explicar onde dói, você mostra o exame. Você diz "uma dorzinha no canto inferior direito", o médico só pode chutar; colocar a tomografia na mesa, e o problema fica óbvio. O print é a "tomografia" do Claude.
Como fazer? Coloque a imagem no input (qualquer um dos três métodos) e, em seguida, digite uma frase indicando o que você quer. O próprio prompt de exemplo da documentação já manda bem:
Aqui está um print do erro. O que está causando isso?Ou, problemas na Interface (UI):
Descreva os elementos de UI que estão neste printPor exemplo, ajustando uma página React, um botão teimava em ir para a direita e nem lendo o CSS dava pra entender o porquê. Neste caso, você simplesmente tira o print de onde está torto e o alimenta, dizendo "por que esse botão empurrou para a direita?". O Claude dá uma olhada e te fala "seu contêiner pai tem um padding-right, somando com a própria margin do botão, eles se acumularam" — resolve a charada em uma frase, aí basta mudar uma linha de código. Tentar explicar aquilo por texto daria horas de bate e volta.
💡 Resumo em uma frase: Para erros e problemas de UI, o print é a "foto do local do crime" — dar pra ele olhar é mil vezes mais ágil do que tentar falar sobre.
04 Uso Dois: Reproduzir mockups / designs em código diretamente do print
Este é aquele cenário onde a "diferença de eficiência se destaca imediatamente", e merece ser focado — dar a ele uma imagem do design e deixá-lo cuspir o código funcional.
Por que este é tão impressionante? Porque ele economiza na parte mais desgastante: transformar o "design → código". Medir os valores com a régua de pixel, ajustar espaçamento, testar paleta de cor, normalmente era a tarefa chata do frontend. Agora, você joga pro Claude dar a você uma versão quase 100% pronta e você faz só o refinamento.
Analogia: Levar a foto de uma roupa pro alfaiate. Você não precisa medir tudo; você coloca a foto da camisa na frente dele e ele corta o molde e a costura sozinho. O print do design é a "foto de amostra" do Claude.
Exemplos oficiais; sabendo estas duas frases já dá pra começar a trabalhar:
Gere o CSS correspondente seguindo este designQual estrutura HTML poderia reproduzir este componente?A primeira instrução faz ele gerar o CSS visualmente, e a segunda faz ele deduzir a estrutura de HTML que poderia abrigar o componente. Combine as duas e o esqueleto estático do componente sai de primeira.
Falando a verdade, tenha expectativas reais: não será uma cópia pixel por pixel, e sim um ponto de partida altamente finalizado. Como o código do começo do artigo, o layout e cores gerais podem estar idênticos, mas algumas margens internas estarem desviadas 2 pixels, e um ajuste seu corrige. Mas isso já te economizou no mínimo uma hora de trabalho — fazer do zero vs mexer 20% do que ele fez são duas coisas bem diferentes.
| Reproduzir Design | ❌ Tudo Manual | ✅ Dê pra ele o print |
|---|---|---|
| Medir Valores | Você mede cada pixel um por um | Ele chuta baseado na imagem |
| Esqueleto / Molde | Começar arquivo do vazio absoluto | Ele já te dá uma versão executável |
| Seu trabalho real | O tempo todo fazendo do zero | Ajustar o finalzinho (os 20% restantes) |
💡 Resumo em uma frase: Print de design + "Gere o CSS correspondente" = Ele te dá os 80% iniciais e você ajusta os 20% restantes, economizando sua cota inteira de suor e trabalho braçal.
05 Uso Três: Ler gráficos e arquiteturas para entender "Como está estruturado"
O terceiro uso: Tabelas, banco de dados (schema), diagramas de infraestrutura — ele também consegue ler essas informações "estruturadas".
Por que separar como uma nova categoria? Porque nas outras duas (erro, design) a imagem é "interface", e aqui a imagem é "relacionamento" — quem chama quem, como flui o dado, as camadas dos módulos. Essas relações são tortuosas de escrever no texto, mas numa imagem saltam aos olhos. E o Claude ama isso.
Analogia: Apresentar o sistema pra um novo colega; desenhar quadrados no quadro branco funciona melhor do que conversar meia hora. Falar "o usuário chama pedidos, que então avisa estoque e pagamentos...", a pessoa não absorve direito. No quadro branco as caixinhas ligadas por flechas fazem ela entender no ato. Tirar um print desse diagrama para o Claude faz o mesmíssimo papel.
Exemplos oficiais cobrem os ângulos de "Ler" e "Alterar":
Este é o schema de banco de dados atual. Como devemos mudá-lo para a nova feature?Há algum elemento problemático ou errado nesse diagrama?A primeira frase é pegar o banco de dados que você já tem em imagem e pedir pra ele atualizar a tabela; e a segunda é para ele auditar se aquele desenho arquitetônico tem algo de estranho.
Uma aplicação comum: assumiu projeto legado, o antigo dev mandou um PNG da arquitetura. Só puxe ela no Claude Code e faça-o te explicar as rotas primeiro. Ele lê chamadas e os blocos na imagem e te dá um overview resumido — é muito melhor que você fritar o olho olhando pro PNG sozinho, afinal é como se alguém te explicasse pra te puxar pela mão.
💡 Resumo em uma frase: Tabelas, schemas, diagramas — alimente-o com essas coisas cheias de "relacionamentos" para contextualizá-lo e então faça-o analisar a estrutura.
06 Mais Imagens, Referências, Abrir as Imagens: Alguns truques marotos
Pra fechar com coisas que vão te tornar mais rápido, tudo tirado também da documentação oficial.
Pode mandar múltiplas fotos de uma vez
Não precisa fazer uma de cada vez — o mesmo prompt pode conter várias fotos. Você joga um "Ache a diferença entre este design antigo e esse design novo", com as duas fotos juntas. Em um redesign, se você fizer isso evita aquele bate-e-volta constante no texto para poder descrevê-las.
Como o Claude referencia a foto: [Image #1]
Quando ele falar sobre a imagem que você colocou, ele vai usar identificadores como [Image #1], [Image #2] — ou seja, numeradas. Assim, se tiver muita imagem, ele apontar assim ajuda a você rastrear de "qual imagem exatamente ele tá falando".
Clique para abrir a foto que ele está falando
Você percebeu o [Image #N] que ele printa na resposta? O identificador é clicável. De acordo com as doc oficiais:
Quando o Claude se referir a uma imagem (por exemplo,
[Image #1]), o cliqueCmd+Click(no Mac) ouCtrl+Click(no Windows/Linux) abrirá a imagem no visualizador de imagens padrão.
Basicamente, você usa Cmd+Click no Mac e Ctrl+Click no Windows/Linux em cima do texto da imagem que ele devolveu, e o próprio sistema operacional abre ela para você revisar.
| O que você quer | Mac | Windows / Linux |
|---|---|---|
| Colar Imagem | ctrl+v | ctrl+v |
Abrir [Image #N] | Cmd+Click | Ctrl+Click |
Note como a ordem dos botões virou: a colagem no terminal requer ctrl, mas abrir a imagem (no Mac) requer Cmd. Não inverta as bolas.
💡 Resumo em uma frase: Um único prompt pode mandar múltiplas imagens, e o Claude as pontua através de
[Image #N], se quiser rever a imagem, basta clicar naquele número (Cmd+Clickpara o Mac) e ela irá abrir.
07 A Prática Real: Arraste a imagem, e o veja ler (em três etapas)
Só teoria não vinga, pegue a imagem que você quiser na área de trabalho e vamos completar os passos "alimentar → ele entender". Não importa onde nem se precisa de projeto.
Passo 1: Encontre alguma foto no seu computador
Tire print, pegue um JPG/PNG. Usuários do Mac costumam ter Captura de Tela 2026-06-10...png no desktop. Coloque onde seja fácil arrastar.
Passo 2: Inicie o Claude Code, não importa em qual diretório
claudeEspera-se: Uma tela bonita e depois um input. (O leitor de imagem funciona onde quer que você tenha inciado, de boas).
Passo 3: Mande a Imagem, mande-o explicar
De novo, as três opções, para os novatos, prefira o arraste puro: pegue o arquivo do Desktop ou Finder/Explorer, puxe pra dentro do console; e você logo verá um [Image #1]. Agora, emende a frase de texto:
O que há nesta imagem? Descreva-a em português.E dê enter.
Espera-se: Que ele examine e descreva de maneira satisfatória o que tinha no seu JPG/PNG — um print do Slack, a foto do gato. Acertou sobre os elementos = Ele lê foto com facilidade e o seu teste foi 100% vitorioso.
⚠️ Aviso para os "Mac users que adoram o copiar e colar": primeiro copie a foto num visualizador (como a pré-visualização da Apple), depois vá para a tela do Claude e ponha o ctrl+v (nunca o cmd+v). Se apareceu umas letras estranhas /User/fulano... você caiu na velha armadilha e deu a ele apenas um string que não funciona.
💡 Resumo em uma frase: Arrastar /
ctrl+v/ Escrever caminho. Feito isso, mande descrever. Você verá como ele entende rápido.
08 Conclusão
Neste capítulo, você abriu os "olhos" do Claude Code — não só falando por texto, como fazendo com que ele enxergue o mundo pela câmera do computador através das fotos.
Juntando as pontas:
| Tópico | Ponto Principal |
|---|---|
| Como Dar a Imagem | Arrastar / ctrl+v / Dar o caminho, os três caminhos são iguais. |
| A Grande Casca de Banana | Colar no Mac requer ctrl+v, Nunca use cmd+v |
| O Triângulo dos Casos de Uso | Prints de bugs, Mockups de Design (Gerando código), Arquiteturas e Tabelas. |
| Quando você deve enviar imagem | É mais rápido mandar a imagem do que ficar escrevendo "tem uma div amarela..." no prompt. |
| Mais Imagens e Atalhos | Você alimenta múltiplos [Image #N] e você os visualiza no Mac num único Cmd+Click (ou Ctrl no resto). |
O que você já consegue fazer hoje: Jogar e alimentar um Claude faminto com um Print que apita vermelho em vez de quebrar a cuca arrumando as log-lines gigantes. Sabendo como funciona aquele erro crônico do usuário Mac (cmd vs ctrl), seu nível de descrição e trabalho despenca radicalmente — você fala menos, e manda mais foto.
No próximo artigo 18 "CLAUDE.md" — Anteriormente você dava foto, código e até projeto, mas toda vez tem que ficar enfiando regras "Use npm!" pro garoto decorar. Existe uma forma inteligente de automatizar o conhecimento local pra quando o Claude entra no repo, ele descobre as regras sozinhos e não quebra a casa toda. O nome da regra é "Seu Manual de Funcionário", chamado de CLAUDE.md; onde se tudo estiver correto, a paz reina.