Estamos empolgados em lançar um editor visual para o Cursor Browser. Ele reúne seu aplicativo web, sua base de código e poderosas ferramentas de edição visual, tudo na mesma janela. Você pode arrastar elementos, inspecionar componentes e props diretamente e descrever alterações apenas apontando e clicando. Agora, as interfaces do seu produto ficam mais imediatas e intuitivas, reduzindo a distância entre design e código.

#Reorganize com arrastar e soltar

O editor visual permite manipular diretamente o layout e a estrutura de um site, arrastando e soltando elementos renderizados na árvore do DOM.

Isso unifica o design visual com o código. Você pode trocar a ordem de botões, girar seções e testar diferentes configurações de grid sem nunca precisar alternar de contexto. Quando o design visual estiver do jeito que você imaginou, peça para o Agente aplicá-lo. O Agente localizará os componentes relevantes e atualizará o código subjacente para você.

#Teste estados de componentes diretamente

Muitos aplicativos modernos são desenvolvidos em React, onde os componentes têm propriedades para controlar diferentes estados. O editor visual facilita exibir essas props na barra lateral para que você possa fazer alterações em diferentes variações de um componente.

#Ajuste propriedades com controles visuais

A barra lateral do editor visual permite que você refine estilos com controles deslizantes, paletas e seus próprios tokens de cor e design system. Cada ajuste é totalmente interativo: seletores de cor em tempo real que mostram uma prévia das suas escolhas, além de controles para reorganizar grades, layouts flexbox e tipografia com precisão.

#Aponte e peça

O editor visual também permite clicar em qualquer elemento da interface e descrever o que você quer mudar. Você pode clicar em um elemento e dizer “deixe isto maior”, em outro pedir “deixe isto vermelho” e, em um terceiro, digitar “inverta a ordem deles”. Os agentes são executados em paralelo e, em poucos segundos, suas alterações são aplicadas.

#Subindo na hierarquia de abstração

O novo editor visual do Cursor unifica seu trabalho entre design e código, ajudando você a articular melhor o que deseja, para que a execução não fique limitada por detalhes mecânicos.

Vemos um futuro em que agentes estarão ainda mais profundamente conectados ao desenvolvimento de apps na web, e em que as pessoas expressam suas ideias por meio de interfaces que conectam pensamento e código de forma mais direta. Esses recursos são um passo nessa direção.

Leia a documentação do Browser. Saiba mais sobre todos os novos recursos do Cursor 2.2.