O chat é uma interface para trabalhar com agentes, mas o trabalho de interface tende a ser espacial. Designers, PMs e desenvolvedores frontend costumam se comunicar por meio de anotações que apontam para elementos, regiões ou para o estado da página.

O Design Mode, que estamos atualizando hoje, faz parte de como estamos reduzindo a distância entre o que você vê e o que o agente entende. Ele permite editar seu produto em contexto sem perder o fluxo.

No Browser do Cursor, você pode clicar em qualquer elemento, desenhar na página ou descrever a mudança por voz, e o Cursor obtém o contexto de que precisa para editar o código enquanto você segue para a próxima alteração.

É uma maneira mais rápida e fácil de iterar em mudanças de design com agentes porque a instrução deixa de ser apenas uma frase — em vez disso, ela pode incluir o elemento selecionado, o código por trás dele, o layout ao redor e as relações visuais na página.

Isso encurta o ciclo entre perceber e editar. Você pode apontar para a parte da interface a que se refere sem sair do produto em execução e, depois, continuar fazendo referências no próprio produto enquanto os agentes fazem as edições por trás.

#Aponte, desenhe ou narre a mudança

O Design Mode oferece várias formas de transmitir sua intenção ao agente. Você pode selecionar um elemento, adicionar várias referências, desenhar sobre a interface ou usar a voz para descrever a mudança.

A seleção múltipla é útil quando a mudança depende da relação entre elementos. Você pode referenciar dois componentes e pedir ao agente para fazer um ficar igual ao outro, remover conteúdo repetido ou ajustar um grupo de componentes em conjunto.

Desenhar é útil quando o agente precisa saber a que área da página a instrução se aplica. Você pode circular uma seção cheia de elementos, delimitar uma região ou marcar parte de uma página animada. A anotação fica sobre um quadro congelado da viewport, para que o agente veja o estado exato da página ao qual você estava respondendo.

Nesta versão, você também pode narrar instruções usando a voz, e tornamos a seleção de alvos mais precisa e a experiência mais rápida. No geral, isso faz com que as interações visuais no Design Mode pareçam mais parte de um fluxo normal de edição.

Nos bastidores, selecionar um elemento adiciona dois sinais complementares ao contexto: a identidade do elemento (xpath, o componente, atributos, estilos computados, props da fiber tree) e uma captura de tela para contexto espacial (layout, elementos ao redor e o estado exato da página). Isso dá ao agente exatamente o que ele precisa para encontrar a fonte e editar o código com eficiência.

#Alinhando o modelo ao ritmo do trabalho

Quando você está refinando uma interface de usuário, uma sequência de edições geralmente leva à seguinte. Você ajusta um componente, percebe o espaçamento ao redor dele e então vê como outro componente deve acompanhar isso.

O Design Mode permite que você envie essas edições conforme as percebe. Você pode apontar para um elemento, descrever a alteração, passar para outra parte da página e enviar outra edição antes que a primeira termine. O Design Mode facilita a execução de várias tarefas ao mesmo tempo e torna possível gerenciar vários subagentes.

Esse fluxo funciona melhor com um modelo que consiga fazer alterações pontuais na interface com rapidez. O Composer 2.5 se destaca nisso porque é rápido e também muito bom em trabalho de interface. À medida que os agentes concluem as tarefas, o app é atualizado com hot reload. Você vê as alterações aparecerem no produto em execução e continua até que a interface pareça ideal.

Acreditamos que o futuro de desenvolver software permite que os usuários transitem sem esforço entre níveis mais altos de abstração e detalhes de nível mais baixo, trabalhando em estado de flow quando quiserem. O Design Mode oferece aos usuários o controle, a autonomia e as ferramentas de edição precisas que tornam isso possível.

Experimente o Design Mode na janela de agentes. Leia a documentação do Browser para saber mais ou baixe o Cursor para começar.