Sketch:
desenhe, e o agente vê o que você quer dizer
O Sketch é uma tela de desenho integrada bem dentro do compositor do agente de IA. Abra uma tela em branco para esboçar um mockup ou um diagrama, ou abra uma captura para anotá-la. Circule o bug, desenhe uma seta, destaque a região, adicione uma nota. O desenho é anexado à sua mensagem e enviado ao seu agente de IA de programação.
Uma imagem vale mais que mil palavras, e isso vale em dobro para um agente de IA. Em vez de escrever 'o botão no canto superior direito do modal está perto demais da borda', você o circula. O desenho cai ao lado do seu prompt, o agente recebe o feedback visual de uma vez, e você nunca saiu do terminal.
Sketch em ação: abra a tela a partir do compositor, circule o bug visual em uma captura, anexe o desenho, envie-o ao agente.
Aqui está o problema que o Sketch resolve. Você está fazendo vibe coding com um agente de IA e algo parece errado na tela. Um card transborda, um botão fica alguns pixels fora do lugar, o espaçamento de uma linha está quebrado. Para fazer o agente corrigir, você tem que descrever o problema visual em palavras. 'O segundo card da coluna do meio, aquele com o avatar, o padding dele está apertado demais à direita.' Você escreve três frases, o agente adivinha, corrige o elemento errado, você escreve mais três.
O Sketch elimina a adivinhação. Você faz uma captura, abre-a na tela do Sketch, desenha um círculo vermelho ao redor do card quebrado, adiciona uma seta e a palavra 'apertado demais aqui', e anexa à sua mensagem. O agente não interpreta mais um parágrafo. Ele olha o desenho. O feedback visual é inequívoco porque é visual.
O Sketch funciona no sentido contrário também. Comece de uma tela em branco e esboce o que você quer antes de o agente construir: um mockup rápido de uma tela, um wireframe de um layout, um diagrama ágil de um fluxo. Um esboço feito à mão orienta o agente melhor que um muro de texto. Você desenha o protótipo, o agente programa.
A tela do Sketch aberta a partir do compositor: anote uma captura, desenhe formas e setas, depois anexe o desenho à mensagem enviada ao seu agente.
Por que o Sketch faz parte do seu fluxo com agentes
Precisão. Um círculo em uma captura aponta para um elemento exato. Uma frase aponta para um palpite. Quando você desenha o problema, o agente corrige a coisa que você realmente quis dizer, não a coisa ao lado dela. Acabou o 'não, o outro botão, o que está abaixo dele'.
Velocidade. Desenhar um retângulo ao redor de uma região leva três segundos. Descrever essa mesma região em palavras leva três frases, e as frases ainda são ambíguas. O Sketch transforma anotar um bug visual de uma tarefa em um reflexo.
Expressão. Algumas ideias são formas, não frases. Um layout, um fluxo, uma tela. Com o Sketch você desenha o mockup ou o diagrama diretamente, à mão livre ou com formas e setas, e entrega o desenho ao agente como especificação.
Fluxo. O Sketch vive dentro do compositor. Você não abre um app de desenho separado, não exporta um arquivo, não arrasta nada. O desenho e o seu prompt escrito viajam juntos na mesma mensagem, então o agente recebe todo o contexto de uma vez.
Como o Sketch funciona, do início ao fim
Do botão Sketch no compositor a um desenho anexado à mensagem do agente.
Abra o Sketch a partir do compositor
Todo compositor de agente tem um botão Sketch. Clique nele e uma tela de desenho em tela cheia abre, pronta para usar, com a ferramenta de retângulo já ativa para você enquadrar as coisas de imediato.
Desenhe em uma tela em branco, ou anote uma imagem
Comece de uma tela em branco para esboçar um mockup, um wireframe ou um diagrama. Ou abra uma imagem existente: solte uma captura no compositor, depois clique no lápis na miniatura dela (ou em Anotar na pré-visualização do arquivo) para desenhar por cima.
Esboce, circule, seta, destaque, digite
A tela oferece desenho à mão livre, retângulos, elipses, setas, linhas e texto. Circule um elemento quebrado, aponte uma seta para ele, destaque uma zona, escreva uma nota curta ao lado. O que tornar o feedback visual óbvio.
Anexe o desenho à sua mensagem
Clique em Anexar à mensagem. A tela é exportada como PNG e adicionada como miniatura ao compositor, exatamente como um arquivo solto. Quando você anota uma imagem existente, a versão anotada substitui a miniatura original, então o agente nunca recebe as duas.
Envie ao agente
Digite o seu prompt normalmente e envie. O PNG é anexado à mensagem pelo mesmo pipeline de qualquer outro arquivo. O desenho e o seu texto chegam ao agente juntos, em um único turno.
O agente lê o desenho
Seu agente de IA de programação recebe o esboço como anexo de imagem. Desde que o modelo dele suporte entrada de imagem, ele vê exatamente o que você circulou, marcou com seta e destacou, e age sobre o feedback visual em vez de interpretar uma descrição.
Duas formas de usar o Sketch
Comece do nada, ou desenhe por cima do que já está lá.
Tela em branco: esboce um mockup
Abra uma tela vazia e desenhe o que você quer que o agente construa. Um mockup rápido de uma tela, um wireframe de um layout, um protótipo de um componente, um diagrama de um fluxo de dados. Traços à mão livre, caixas, setas e rótulos de texto. Um esboço feito à mão é uma especificação que o agente pode seguir sem você escrever um único parágrafo de descrição de UI.
Anotar: desenhe em uma captura
Carregue uma captura ou qualquer imagem na tela e marque-a. Circule o elemento desalinhado, desenhe uma seta no transbordamento, destaque a cor errada, escreva 'corrija isto' ao lado do bug. A tela do Sketch abre com a sua imagem como camada de fundo, você desenha por cima, e a captura anotada vai direto para o agente como feedback visual.
O que o Sketch realmente é
O Sketch é uma tela de desenho completa embutida no app desktop do AgentsRoom, aberta a partir do compositor de qualquer agente de IA. Não é um visualizador de capturas com um marcador por cima. Você tem ferramentas de desenho de verdade: caneta à mão livre, retângulos, elipses, setas, linhas e texto, o mesmo conjunto que você espera de uma superfície de esboço de verdade.
A tela funciona em dois modos. O modo em branco dá a você uma superfície vazia para mockups, wireframes e diagramas. O modo de anotação carrega uma imagem existente como fundo e deixa você desenhar por cima dela. Você chega ao modo de anotação a partir da miniatura de qualquer imagem já anexada ao compositor, ou pelo botão Anotar na pré-visualização do arquivo.
Quando você anexa o desenho, o Sketch exporta a tela para um PNG sobre fundo branco para que cada traço fique legível, depois solta o arquivo na bandeja de anexos do compositor. A partir daí o desenho segue o caminho normal: vai junto com o seu prompt e é enviado ao agente como imagem. O Sketch não adiciona nenhum novo mecanismo de envio, ele se conecta ao que já existe.
Tudo fica na sua máquina. Os esboços são salvos localmente no disco e não são commitados no seu repositório nem enviados a nenhum serviço de terceiros. São transitórios por natureza: um desenho é contexto para uma mensagem, não um arquivo que você tem que gerenciar. O Sketch é local, privado e agnóstico de provedor: funciona com qualquer agente cujo modelo aceite uma imagem, então as configurações de Claude Code e Codex têm ambas o mesmo fluxo de desenho ao agente.
O que as pessoas desenham com o Sketch
Três padrões que transformam um desenho na forma mais rápida de falar com um agente.
Reporte um bug visual
Capture a UI quebrada, circule o elemento, marque o transbordamento com uma seta, destaque o espaçamento errado. O agente vê o bug visual em vez de decodificar a sua descrição dele. A forma mais rápida de reportar uma regressão de UI a um agente de IA.
Esboce um mockup ou wireframe
Desenhe a tela antes de o agente construí-la. Um wireframe rápido, um esboço de layout, um mockup de baixa fidelidade de um componente. Entregue o desenho ao agente como briefing e deixe-o transformar o seu esboço em código.
Desenhe um diagrama ou fluxo
Algumas explicações são diagramas. Um fluxo de dados, uma máquina de estados, a estrutura de uma página, como dois componentes conversam. Esboce com caixas e setas e envie o diagrama ao agente como contexto.
Descrever em palavras versus desenhar
Mesmo feedback visual, mesmo agente. Um caminho é lento e ambíguo, o outro é um esboço.
Sem o Sketch
- : Você descreve o problema visual em palavras e torce para o agente imaginar a mesma coisa.
- : Você escreve três frases para apontar um elemento, e ainda é ambíguo.
- : Para desenhar um mockup você abre um app separado, exporta um arquivo, depois o arrasta para o compositor.
- : A troca de contexto quebra o seu fluxo e a conversa com o agente.
- : O agente corrige o elemento errado, você re-explica, o loop se arrasta.
Com o Sketch
- : Você circula o elemento em uma captura e o feedback é inequívoco.
- : Um desenho substitui três frases de descrição, em três segundos.
- : A tela está no compositor: sem app separado, sem exportação, sem arrastar e soltar.
- : Você nunca sai do terminal e nunca quebra o fio da conversa com o agente.
- : O agente vê exatamente o que você quis dizer e corrige na primeira tentativa.
O Sketch é o caminho mais curto entre um problema visual e um agente de IA que o entende.
FAQ
O que é o Sketch no AgentsRoom?
O Sketch é uma tela de desenho integrada ao compositor do agente de IA. Você o abre a partir do compositor, desenha um esboço em uma tela em branco ou anota uma captura existente, e o desenho é exportado como PNG e anexado à mensagem que você envia ao seu agente de IA de programação. Ele transforma o feedback visual em algo que você desenha em vez de algo que você descreve.
Como eu envio um desenho a um agente de IA?
Clique no botão Sketch no compositor do agente, desenhe na tela, depois clique em Anexar à mensagem. O desenho vira uma miniatura PNG no compositor. Escreva o seu prompt e envie: o esboço é anexado à mensagem e chega ao agente junto com o seu texto.
Posso anotar uma captura?
Sim. Solte uma captura no compositor, depois clique no lápis na miniatura dela, ou abra a pré-visualização do arquivo e clique em Anotar. A tela do Sketch abre com a sua captura como camada de fundo para você desenhar por cima: circule um bug, adicione uma seta, destaque uma região, escreva uma nota. A captura anotada substitui a original quando você a anexa.
O que eu posso desenhar com o Sketch?
A tela oferece desenho à mão livre, retângulos, elipses, setas, linhas e texto. Você pode esboçar um mockup, desenhar um wireframe, montar um diagrama ou marcar uma captura com círculos, setas e destaques. A ferramenta de retângulo fica ativa por padrão para você enquadrar um elemento no momento em que a tela abre.
O agente de IA realmente vê o meu esboço?
O desenho é anexado à sua mensagem como imagem PNG. Desde que o modelo do agente suporte entrada de imagem, ele vê o esboço e age sobre ele. O Claude e os modelos da classe do GPT-4 que movem o Claude Code e o Codex leem imagens, então o agente recebe o seu feedback visual diretamente.
Quais agentes e provedores funcionam com o Sketch?
O Sketch anexa uma imagem PNG padrão, então é agnóstico de provedor. Qualquer agente cujo modelo aceite uma entrada de imagem funciona: Claude Code, Codex e outros CLIs que o AgentsRoom suporta. Não há configuração específica de provedor.
Eu preciso de um app de desenho ou quadro branco separado?
Não. Esse é o ponto do Sketch. A tela de desenho está dentro do compositor. Você não abre o Excalidraw, o Figma ou um anotador de capturas em outra janela, não exporta um arquivo, não o arrasta de volta. O Sketch mantém todo o ciclo de desenhar e enviar no terminal.
Onde meus esboços são salvos? Eles são privados?
Os esboços são salvos localmente na sua própria máquina. Eles não são commitados no seu repositório git e não são enviados a nenhum serviço de terceiros. São transitórios: um esboço é contexto para uma mensagem, e esboços antigos são limpos automaticamente.
Posso reeditar ou reanotar um esboço?
Sim. Qualquer imagem no compositor, inclusive uma captura que você já anotou, pode ser reaberta na tela do Sketch para desenhar nela de novo. Quando você anexa a nova versão, ela substitui a miniatura anterior, então o agente nunca recebe a mesma imagem duas vezes.
Por que desenhar um bug em vez de descrevê-lo?
Porque uma descrição é um palpite e um desenho não é. Quando você escreve 'o botão do canto superior direito está desalinhado', o agente tem que reconstruir a tela na cabeça. Quando você circula o botão em uma captura, não há nada a reconstruir. Uma imagem vale mais que mil palavras, e para feedback visual a um agente de IA ela também vale vários turnos desperdiçados.
Combina bem com
Automação de Navegador
Seu agente de QA controla um navegador real e captura screenshots. O Sketch é como você anota uma dessas capturas e envia o feedback marcado de volta.
Scratchpad
Um bloco de notas para prompts e anotações dentro do AgentsRoom. O Scratchpad cuida das palavras, o Sketch cuida do desenho: ambos alimentam o mesmo compositor do agente.
Revisão de Vibe Coding
Acompanhe cada arquivo que o agente altera em tempo real. Quando uma alteração parece errada na tela, o Sketch é a forma mais rápida de apontar para ela.
Figma para Agentes de IA
Traga um design do Figma para o fluxo com agentes. O Sketch é o primo mais bruto e mais rápido: um mockup feito à mão direto no compositor quando você não precisa de um arquivo de design completo.
Pare de descrever o bug. Desenhe-o.
Baixe o AgentsRoom e use o Sketch: uma tela de desenho no compositor do agente para esboçar mockups e anotar capturas, depois envie o desenho ao seu agente de IA de programação sem nunca sair do terminal.
App complementar: acompanhe seus agentes em qualquer lugar
Use Claude, Codex, Antigravity CLI ou outro provedor de IA.
Envie bugs e pedidos direto para o seu backlog público.
Uma visão do AgentsRoom em ação.