Cursor inicia o editor visual do navegador: integração perfeita de design e código. A Cursor lançou oficialmente seu "Editor Visual do Navegador", integrado ao navegador Cursor. Ele unifica aplicativos da web, bases de código e recursos de edição visual em uma única janela, permitindo que os desenvolvedores manipulem e modifiquem diretamente os elementos da interface por meio de recursos intuitivos de arrastar e soltar e dicas de ferramentas de clicar e localizar, preenchendo a lacuna entre as ideias de design e a implementação do código. Funcionalidade principal e princípio de funcionamento: Reorganização de layout por arrastar e soltar: Os usuários podem arrastar e soltar elementos diretamente na árvore DOM renderizada para trocar a ordem dos botões, girar áreas ou testar layouts em grade. O agente de IA localiza automaticamente os componentes relevantes e atualiza o código subjacente, eliminando a necessidade de escrever CSS ou JSX manualmente. • Testar o estado do componente: Para aplicações construídas com frameworks como o React, a barra lateral exibirá as propriedades do componente em tempo real, permitindo que os usuários alternem e verifiquem rapidamente diferentes estados variantes por meio de controles interativos. • Ajustes de atributos visuais: A barra lateral integra ferramentas como controles deslizantes, seletores de cores e tokens do sistema de design, permitindo ajustes finos de estilo em tempo real. Por exemplo, os usuários podem usar o seletor de cores em tempo real para modificar cores, ajustar layouts de grade/caixa flexível ou otimizar a tipografia. Todas as alterações são sincronizadas com o código-fonte pelo agente de IA. • Instruções de modificação com um clique: Depois que um usuário clica em um elemento da interface, ele pode descrever a alteração usando linguagem natural (como "aumentar o tamanho", "tornar vermelho" ou "inverter a ordem"). O agente de IA processa várias instruções em paralelo e aplica a atualização em tempo real, em questão de segundos. Essa interação de "clicar e selecionar" faz com que o processo de modificação pareça mais uma conversa com um designer. Esses recursos simplificam o processo de design e codificação: começando com uma visualização renderizada, direcionando agentes de IA para modificar o código por meio de arrastar e soltar ou prompts e, finalmente, exibindo uma pré-visualização do código em tempo real no navegador. Essa abordagem reduz as "limitações dos mecanismos de execução sobre a criatividade", permitindo que os desenvolvedores expressem suas intenções com mais precisão. Benefícios: O editor visual com IA integrada melhora significativamente a eficiência do desenvolvimento, especialmente para desenvolvedores front-end e full-stack. Ele transforma a lógica abstrata do código em operações de interface tangíveis, ajudando os usuários a "expressarem suas ideias" com mais facilidade e, assim, acelerando o ciclo de iteração. A IA do cursor é a principal força motriz: o agente não apenas lida com atualizações de código, mas também suporta a execução paralela de múltiplas tarefas, garantindo que as alterações sejam seguras e reversíveis. Por exemplo, “Você pode clicar em um elemento e dizer ‘Aumente este tamanho’, enquanto simultaneamente solicita a outro que ‘Torne-o vermelho’ e a um terceiro que ‘Inverta a ordem’. Os agentes são executados em paralelo e as alterações entram em vigor em segundos.” Isso incorpora a visão da Cursor para um futuro onde “os pensamentos vão direto para o código”. Blog oficial do Cursor
