O Visual Editor é um novo recurso dentro do Navegador Cursor que permite editar aplicações web visualmente enquanto um agente de IA trabalha ao seu lado para atualizar o código subjacente. Ele reúne sua aplicação web, base de código e ferramentas de edição visual em uma única janela, eliminando a lacuna entre design e desenvolvimento. Você pode arrastar elementos, inspecionar componentes e suas propriedades, e descrever alterações apontando e clicando — tudo sem sair do seu fluxo de trabalho.
O editor visual permite manipular o layout e a estrutura de um site diretamente, arrastando e soltando elementos renderizados na árvore DOM. Você pode trocar a ordem dos botões, girar seções e testar diferentes configurações de grade sem nunca mudar de contexto. Quando o design visual corresponder ao que você tinha em mente, peça ao agente para aplicá-lo — o agente localiza os componentes relevantes e atualiza o código subjacente para você.
Aplicações modernas construídas em React usam propriedades de componentes para controlar diferentes estados. O editor visual exibe essas propriedades na barra lateral, facilitando a alternância entre variantes e a visualização de como cada uma é renderizada. Isso fornece feedback imediato sobre como os componentes se comportam em diferentes condições.
A barra lateral oferece controles deslizantes, paletas de cores e seus próprios tokens do sistema de design para ajustar estilos com precisão. Cada ajuste é totalmente interativo: seletores de cores ao vivo mostram suas escolhas, e os controles permitem reorganizar grades, layouts flexbox e tipografia com precisão. As alterações aparecem instantaneamente no navegador.
Clique em qualquer elemento da sua interface e descreva o que deseja alterar. Você pode clicar em um elemento e dizer "deixe isso maior", clicar em outro e solicitar "deixe isso vermelho", e em um terceiro digitar "troque a ordem deles". Os agentes são executados em paralelo e, em segundos, suas alterações entram em vigor.
"O editor visual unifica seu trabalho entre design e código, ajudando você a articular melhor o que deseja, para que a execução não seja limitada pela mecânica."
Esta é a ideia central: em vez de forçá-lo a traduzir ideias visuais em código manualmente, o Visual Editor permite que você expresse alterações naturalmente por meio de arrastar e soltar, apontar e linguagem natural. O agente cuida da tradução do código, para que você permaneça focado na intenção do design, em vez dos detalhes de implementação. É um passo em direção a um futuro onde os agentes estão profundamente conectados à construção de aplicativos, e os humanos expressam ideias por meio de interfaces que conectam o pensamento ao código de forma mais direta.
Você constrói aplicações web e deseja acelerar seu ciclo de iteração de UI. Se você está cansado de alternar entre navegador, editor de código e ferramentas de design para fazer alterações simples de layout ou estilo, o Visual Editor oferece uma abordagem unificada. É especialmente valioso se você trabalha com componentes React e precisa testar vários estados, ou se colabora com designers que desejam ver as alterações aplicadas em tempo real.
Loading comments…
Criador
moonbyte
Visitar site
cursor.com/blog/browser-visual-editor
Informações do projeto
Palavras-chave do produto
