Cursor Design Mode Annotate: aponte para a interface e deixe o agente editar o código

O Cursor Design Mode Annotate permite apontar para um elemento de uma página web em execução, descrever uma alteração visual e enviar a instrução a um agente de programação com informações do elemento e uma captura de tela. Use o Cursor 3.24.18 ou posterior, abra o navegador dentro do Agents Window e selecione Annotate ou pressione Cmd/Ctrl + Shift + D. Se quiser fazer várias alterações relacionadas, ative Batch edits para reunir as notas e enviá-las juntas.

Esse fluxo ajuda quando você sabe o que está errado na interface, mas não sabe qual componente React, regra CSS ou template controla aquele elemento. Desenvolvedores experientes também podem usar o recurso para conectar o feedback visual ao código-fonte. Mesmo assim, o agente precisa interpretar corretamente a solicitação e modificar o projeto. Por isso, revise o código e a página renderizada depois da execução.

Onde fica o Annotate e por que só aparece um ícone de caneta?

O Annotate fica na barra de ferramentas do navegador dentro do Agents Window do Cursor. O controle exibido depende da versão e da interface que você está usando.

Siga estas etapas:

1. Abra seu projeto no Cursor e acesse o Agents Window.
2. Inicie uma sessão do agente ou abra uma sessão existente. Depois, abra o navegador que mostra sua aplicação em execução.
3. Clique em Annotate na barra de ferramentas do navegador. Outra opção é focar o navegador e pressionar Cmd + Shift + D no macOS ou Ctrl + Shift + D no Windows e Linux.
4. Se preferir, abra a paleta de comandos e procure Toggle Design Mode.
5. Siga as instruções exibidas na parte superior da página para consultar os gestos disponíveis.

De acordo com a documentação oficial do Design Mode, o Annotate está disponível a partir do Cursor 3.24.18.

Se você vê um ícone de caneta com o nome Design Mode, confira primeiro sua versão do Cursor. As versões anteriores usam esse controle no lugar do novo botão Annotate. Atualize o Cursor para utilizar a interface documentada do Annotate.

Existem outros dois motivos para a barra de ferramentas parecer diferente. Antes de abrir o Design Mode pela primeira vez, o botão mostra uma prévia Try Annotate com uma demonstração curta. Depois que você deixa mais de cinco notas, o botão passa a exibir somente o ícone.

Para sair do Design Mode, clique no botão de saída na linha de instruções, pressione o atalho novamente ou use Esc. Primeiro, Escape cancela um traço de desenho ativo, uma edição de texto ou uma nota aberta. O modo só é encerrado quando essas interações estão fechadas.

A documentação pública do Cursor não especifica quais planos de assinatura incluem o Annotate nem confirma um cronograma de disponibilização geral. Portanto, não presuma que todos os usuários tenham acesso apenas porque a versão instalada atende ao requisito.

Como selecionar elementos, desenhar anotações e editar CSS?

Selecione um elemento quando souber qual componente precisa mudar. Marque uma área quando o problema envolver espaçamento, alinhamento ou uma composição visual maior.

Selecionar um ou vários elementos

Clique em um elemento da aplicação em execução para selecioná-lo e abrir uma nota. Descreva nela a alteração desejada.

Imagine, por exemplo, um dashboard SaaS com um cabeçalho sobrecarregado, um campo de busca e uma linha de botões de filtro. Selecione o campo de busca e escreva:

Aumente a altura do campo de entrada e adicione mais espaçamento interno. Alinhe verticalmente o texto com os botões de filtro. Mantenha o esquema de cores atual.

O elemento selecionado fornece um alvo concreto para o agente. A instrução escrita explica o resultado esperado.

Para selecionar vários elementos relacionados, mantenha Shift pressionado e clique em cada um. Por exemplo, selecione o campo de busca e os botões de filtro. Peça ao agente que alinhe todos pela mesma linha de base e padronize suas alturas.

Use a seleção múltipla quando os elementos precisarem mudar juntos. Notas separadas costumam ser mais claras quando as alterações são independentes ou exigem instruções diferentes.

Marcar uma área e desenhar na página

Arraste o cursor pela página para marcar uma região. Depois, descreva a alteração e adicione marcações visuais.

A linha de instruções oferece quatro ferramentas:

• Draw: desenhe uma forma ou contorne uma região que precisa de atenção.
• Ellipse: circule um elemento ou grupo de elementos.
• Rectangle: delimite uma seção da página com um retângulo.
• Arrow: aponte para a parte que precisa mudar.

Mantenha Shift pressionado enquanto arrasta para restringir o movimento a um eixo. No macOS, mantenha Option pressionado. No Windows e Linux, use Alt para desenhar um retângulo a partir do centro. Pressione Cmd/Ctrl + Z para desfazer uma marcação.

Imagine que um card de resumo esteja muito próximo de um gráfico. Desenhe um retângulo ao redor da região entre os dois e adicione esta nota:

Adicione um espaçamento vertical de 24px entre os cards de resumo e o gráfico. Preserve as dimensões atuais do gráfico e mantenha o layout responsivo.

O desenho identifica a localização do problema. O texto explica o espaçamento desejado e as restrições que o agente deve preservar.

Editar o texto diretamente na página

Dê um duplo clique em um elemento de texto para editar seu conteúdo. Pressione Return ou Enter para salvar a edição, ou Esc para revertê-la.

Por exemplo, substitua diretamente no navegador o título “Usage Overview” por “API Usage”. Não é necessário descrever essa substituição em outra instrução.

Há uma distinção importante: as edições de texto sempre aguardam Send, mesmo quando Batch edits está desativado. Salvar a edição na página não a envia imediatamente ao agente.

Considere a edição de texto como uma proposta de alteração no código, e não como uma modificação permanente apenas no navegador. O Cursor envia essa alteração junto com a nota para que o agente atualize o projeto.

Alterar propriedades CSS no inspector

Em uma nota direcionada a um único elemento, selecione Edit CSS properties para abrir o inspector CSS. Filtre as propriedades, altere um valor e envie as mudanças CSS junto com a nota.

Esse recurso é útil para alterações específicas, como ajustar padding, tamanho da fonte, comportamento de display ou posicionamento. Você pode alterar diretamente a propriedade sem depender apenas de uma descrição em linguagem natural.

Verifique a página depois que o agente aplicar as mudanças. O novo valor CSS pode interagir com os estilos existentes, as regras de layout ou o comportamento responsivo. Revise o diff para confirmar que o agente alterou o componente correto e não introduziu mudanças sem relação com a tarefa.

Ditar uma nota por voz

A entrada de voz fica disponível quando uma nota já contém texto ou alterações CSS. Clique em Dictate ou mantenha o botão pressionado enquanto fala.

Você pode combinar instruções faladas com desenhos. Por exemplo, circule um banner promocional e peça que o texto fique mais curto, que o botão seja alinhado à direita e que o layout mobile organize os elementos verticalmente.

Revise a nota antes de enviá-la. As marcações visuais identificam o alvo, enquanto o texto ditado descreve o resultado desejado. Use instruções claras, especialmente quando várias mudanças afetarem o mesmo componente.

Quando ativar Batch edits?

Ative Batch edits quando quiser reunir várias alterações visuais relacionadas antes de pedir ao agente que as implemente. Deixe o recurso desativado quando quiser enviar notas de elementos ou áreas imediatamente e verificar o resultado antes de decidir a próxima alteração.

O botão começa desativado. Ele muda a forma como as notas de elementos e áreas chegam ao agente. As edições de texto, porém, sempre aguardam Send.

Comportamento	Batch edits desativado	Batch edits ativado
Notas de elementos ou áreas	Enviadas individualmente	Reunidas em pins numerados
Envio de notas de elementos ou áreas	Pressione Return ou Enter em uma nota para enviá-la imediatamente	Clique em Send na barra de ferramentas para enviar todas as notas pendentes
Agrupamento de mensagens	Cada nota é enviada separadamente	Todas as notas pendentes são enviadas em uma única mensagem
Edições de texto	Aguardam Send	Também aguardam Send
Revisão de notas pendentes	Consulte as edições de texto pendentes na lista Send, quando disponível	Revise as notas acumuladas na lista ao lado de Send
Remoção de notas pendentes	Use Clear All; notas já enviadas não podem ser removidas da fila	Use Clear All para remover as notas pendentes

É importante distinguir as notas enviadas imediatamente das edições de texto pendentes. Com Batch edits desativado, você pode enviar uma nota de elemento ou área pressionando Return ou Enter. Uma edição de texto continua pendente até você enviá-la. Se houver edições de texto pendentes, revise-as na lista Send ou remova as notas pendentes com Clear All.

Quando Batch edits está ativado, a barra substitui Annotate por um botão Send que mostra a quantidade de notas pendentes. Você pode revisar os pins numerados antes de enviá-los. O envio de todas as notas pendentes também encerra o Design Mode.

Se você sair do modo com notas pendentes, o botão Send continuará na barra de ferramentas até que você envie ou limpe essas notas.

Exemplo prático: reformular uma página de preços

Imagine que você queira corrigir três problemas em uma página de preços:

1. O título principal ocupa espaço vertical demais.
2. O botão principal de chamada para ação não está alinhado com o preço.
3. A tabela comparativa parece apertada em telas menores.

Ative Batch edits e crie uma nota para cada problema.

Para o título, selecione o texto e peça para reduzir seu tamanho sem perder a hierarquia visual. Para o botão, selecione-o junto com o preço para mostrar a relação de alinhamento desejada. Para a tabela comparativa, marque a área relevante e descreva o comportamento responsivo esperado.

Antes de enviar, revise os pins numerados. Confirme que cada nota aponta para o elemento ou região correta. Depois, envie todas as notas em uma única mensagem.

Essa abordagem funciona melhor quando as mudanças fazem parte de uma mesma tarefa. O agente consegue visualizar todas as notas juntas e considerar as relações entre os elementos. Entretanto, agrupar as instruções não garante que o modelo implemente todas corretamente.

Se uma alteração depender de um resultado intermediário importante, envie a primeira nota separadamente. Verifique a página atualizada e só então decida o próximo passo. Por exemplo, altere primeiro o layout geral da página. Depois, peça ao agente para ajustar os espaçamentos entre os componentes individuais.

Você também pode usar Cmd/Ctrl + L dentro de uma nota ou edição de texto para colocar seu conteúdo no campo de chat, em vez de enviá-lo imediatamente ou mantê-lo aguardando Send. Mantenha Option/Alt pressionado e clique em um elemento para adicioná-lo diretamente ao campo de chat. Se uma nota já estiver aberta, o mesmo atalho adiciona o elemento a essa nota.

Qual contexto o agente realmente recebe?

Cada nota enviada inclui sua instrução, informações estruturadas do elemento e uma captura de tela recortada. Em aplicações compatíveis com React, Vue e Svelte, os detalhes também incluem informações dos componentes para ajudar o agente a localizar o código-fonte correspondente.

Segundo a documentação do Cursor, cada elemento selecionado fornece o seguinte contexto:

Contexto	O que o Cursor fornece	Como isso ajuda
Tag HTML	O nome da tag do elemento	Identifica o tipo de elemento
Atributos	O id, as classes e os atributos do elemento	Ajuda a distinguir o alvo
Caminho do seletor	Um caminho no formato de seletor CSS	Ajuda a localizar o elemento na página renderizada
Texto visível	Os primeiros 200 caracteres do texto visível	Relaciona a seleção ao conteúdo exibido
Geometria	O tamanho e a posição do elemento	Descreve sua localização e dimensões
Estilos calculados	Cor, cor de fundo, tamanho da fonte, família tipográfica, display e position	Informa como o elemento está sendo renderizado
Contexto do componente	Nome e pilha de componentes em aplicações React, Vue e Svelte	Ajuda a relacionar o elemento renderizado ao código-fonte
Captura de tela	Um recorte do elemento selecionado ou da área marcada com o desenho	Mostra o contexto visual da alteração solicitada

Isso fornece muito mais informações do que um prompt genérico como “melhore o cabeçalho”. O agente recebe um alvo, propriedades renderizadas, conteúdo visível e evidências visuais.

Mesmo assim, trata-se de uma captura limitada. A documentação não promete um dump completo do DOM, a folha de estilos inteira, os estilos calculados de todos os elementos ancestrais, todo o estado da aplicação ou uma captura da página completa. A pilha de componentes está disponível para os frameworks listados, mas isso não garante que o agente encontre o arquivo-fonte correto em todos os projetos.

Por exemplo, ao selecionar um botão, o agente recebe seu tipo, classes, dimensões, texto e estilos calculados. A captura mostra como ele está posicionado ao lado do preço. Em uma aplicação React, as informações do componente podem ajudar o agente a relacionar o botão renderizado à sua pilha de componentes.

O mesmo tipo de contexto de componentes está documentado para Vue e Svelte. O Cursor também inclui o nome e a pilha do componente nessas aplicações. A documentação não garante a mesma precisão na localização do código-fonte em todos os frameworks ou projetos.

O agente ainda precisa inspecionar o repositório, entender a implementação ao redor e decidir como realizar a alteração. Depois que terminar, revise o diff e a página em execução.

O Cursor não publica uma fórmula de custo em tokens para as capturas de tela e os metadados do Annotate. Não presuma que cada nota tenha um custo fixo ou que o envio em lote necessariamente reduza o uso total do modelo. Batch edits altera a forma como as notas são enviadas. O custo real depende do fluxo de trabalho do agente e do uso do modelo.

Como verificar as alterações feitas pelo agente?

Use o Annotate para descrever a solicitação com mais precisão. Depois, verifique a implementação no projeto e o resultado na página renderizada.

Depois de enviar as notas:

1. Aguarde o agente concluir as alterações relevantes.
2. Inspecione o diff para encontrar mudanças não relacionadas, seletores incorretos e alterações que violem as convenções do projeto.
3. Verifique a página em execução depois do hot reload, se o servidor de desenvolvimento oferecer esse recurso.
4. Confira novamente o layout nos tamanhos de viewport importantes para sua aplicação.
5. Teste as interações e a acessibilidade quando necessário, incluindo o foco pelo teclado e a legibilidade do texto.

O anúncio do Cursor de 28 de outubro de 2026 afirma que o Annotate ajuda a revisar designs em diferentes tamanhos de tela. A documentação pública de Design Mode fornecida não descreve um mecanismo automático de revisão responsiva. Portanto, verifique os diferentes tamanhos de viewport separadamente, a menos que sua versão instalada ofereça um método documentado para automatizar essa tarefa.

Para trabalhos maiores de interface, o Inspo MCP permite trazer referências de design e capturas de tela para fluxos de desenvolvimento com agentes de programação. Ele resolve outro problema: o Annotate identifica o que mudar em uma interface em execução, enquanto as referências ajudam a explicar a direção visual desejada.

Se você estiver escolhendo um fluxo de desenvolvimento mais amplo, consulte a comparação entre Cursor e Codex em 2026. Ela aborda os fluxos de desenvolvimento, preços, limites e uso sob demanda.