Mostre à sua IA de programação o elemento exato a alterar

“Deixe o segundo botão maior.” A instrução diz qual é a mudança, mas não onde, então sua ferramenta de programação com IA precisa adivinhar de qual botão você está falando. O SuperchargeInspect acaba com a adivinhação. Aponte para o elemento, escreva uma nota descrevendo a mudança e copie uma referência que inclui a nota, um print anotado e os estilos observados do elemento. Em uma única referência, você entrega à ferramenta o elemento, a aparência dele e a mudança que deseja.

O fluxo de trabalho em quatro etapas

Você inicia uma inspeção com Alt+Shift+E ou pelo botão da barra de ferramentas e depois percorre a página passando o mouse ou usando as setas do teclado. O fluxo tem quatro etapas.

1. Selecione o elemento. Passe o mouse sobre ele ou navegue com as setas do teclado e pressione Enter para fixá-lo.
2. Adicione sua nota. Pressione Enter de novo para escrever sua nota. Descreva a mudança em palavras, por exemplo “deixe este botão com largura total”. A referência marca a nota como a única mudança solicitada.
3. Copie a referência. Pressione Ctrl+Enter, ou Cmd+Enter no macOS. Um único item da área de transferência contém a referência em texto e o PNG anotado.
4. Cole. Cole na sua ferramenta de programação com IA e deixe que ela decida qual parte usar.

O card de exemplo acima executa esse mesmo fluxo. Clique em uma parte para fixá-la e pressione Copiar referência. A demonstração copia a referência em texto e o PNG anotado, exatamente como a extensão faz.

O que a referência contém

A referência em texto é texto simples que você pode ler rapidamente. Depois de um cabeçalho curto e uma linha de segurança, ela lista sua nota e a URL de origem e, em seguida, o elemento com sua dica de localizador e o texto visível, que é marcado como dado de referência. Depois vêm o tamanho do viewport e a posição de rolagem, os limites do elemento e os estilos observados: a pilha font-family declarada, os valores de cor, padding e margin de cada lado, gap, border radius e display. Ela termina com um trecho curto da marcação do elemento tal como a página o compôs.

A captura de tela anotada é o recorte visível com um rodapé abaixo dele: sua nota, a origem, o elemento e uma linha curta de estilo.

A linha de segurança marca o texto da página como dado de referência, para que o texto da página não possa se passar por uma instrução. Só a sua nota conta como pedido.

Como colar na sua ferramenta de programação com IA

Sua ferramenta de programação com IA decide se usa o texto, a imagem ou ambos. Nem toda combinação de ferramenta e sistema operacional foi certificada.

Se uma colagem mantiver só um formato, use Copiar apenas texto, Copiar apenas imagem ou Salvar PNG no menu Mais formas de copiar.

Limitações da referência

Uma referência copiada é um retrato do que foi observado. Ela captura o que a página mostra, não o que a construiu. O Inspect não recupera arquivos-fonte, nomes de componentes nem as regras CSS do autor. O valor da fonte é a pilha font-family declarada, a lista que a página solicita. A ferramenta de destino decide quais formatos manter. Via SSH, em um container remoto ou em um ambiente de programação hospedado, a imagem local não vai junto com a colagem. Salve o PNG primeiro e depois anexe-o do jeito que a ferramenta remota aceita arquivos. O PNG salvo é o recorte limpo, sem o rodapé, então sua nota vai no texto colado.

Privacidade

O Inspect não faz chamadas de rede, não tem conta e nunca envia nada a um serviço de IA nem submete prompts. Nada do que você inspeciona sai do seu dispositivo até você mesmo colar o conteúdo ou salvar o PNG. Ele lembra sua última seleção em cada página, no armazenamento da sessão, que é apagado quando você fecha o navegador.

Inspecionar elemento CSS: leia e copie valores de CSS.