Cursor lançou Design Mode: edite UI com cliques e desenhos, agente ajusta o código

Cursor lançou o Design Mode atualizado — um modo onde você edita a interface visualmente, direto no navegador, e um agente de IA ajusta automaticamente o código-fonte. A ideia é simples: apagar a barreira entre o que você vê na tela e o que o agente entende. Em vez de uma longa explicação escrita, você clica no elemento necessário, desenha na página ou fala em voz alta o que precisa mudar.

Quatro formas de dar uma tarefa ao agente

Cursor oferece várias formas intuitivas de mostrar ao agente quais mudanças são necessárias:

• Clique no elemento — você seleciona um elemento no aplicativo em execução, fornece um prompt breve, e o agente encontra o código correspondente e o edita
• Multisseleção — você seleciona vários elementos simultaneamente, útil quando as mudanças afetam relacionamentos entre componentes (alinhar, tornar idênticos, remover duplicação)
• Desenhar na página — você contorna a área necessária da interface com marcador, e o agente vê exatamente a parte da tela que você apontou, levando em conta a marcação e animação
• Descrição por voz — você descreve a tarefa por voz, o sistema reconhece a fala e envia o prompt ao agente

Sob o capô, o sistema passa dois conjuntos de informações para o agente. O primeiro — dados técnicos do elemento: seu xpath, nome do componente, atributos HTML, estilos CSS calculados e dados da árvore de componentes React/Vue. O segundo — captura de tela da página no momento em que você deu o comando. Juntos, isso dão ao agente contexto completo para edição precisa.

Por que isso acelera o desenvolvimento

Editar a interface é sempre uma cadeia de mudanças. Você ajusta um componente, percebe um problema com o espaçamento próximo, entende que precisa refazer um grupo inteiro de botões. No workflow normal, você passa muito tempo explicando cada tarefa separadamente. O Design Mode permite enviar uma nova tarefa sem nem mesmo esperar que o agente termine a anterior.

Cursor usa o modelo Composer 2.5 — ele é especialmente otimizado para mudanças rápidas e precisas de UI. O aplicativo recarrega em tempo real graças ao hot reload, então você vê imediatamente o resultado das mudanças. Isso permite que um único desenvolvedor faça edições complexas de UI várias vezes mais rápido, sem perder a concentração e o estado de fluxo.

A ideia-chave é que o modelo deve ser não apenas inteligente, mas também rápido. Se o agente leva meio minuto pensando na tarefa, você perde o foco. O Composer 2.5 fornece a resposta quase instantaneamente, permitindo que você mantenha o ritmo de trabalho.

O que isso significa para o frontend

O Design Mode transfere o paradigma clássico de comunicação entre designers para a era da IA. Anteriormente, designers, PMs e desenvolvedores apontavam um para o outro áreas da tela, desenhavam setas, escreviam anotações. O Design Mode automatiza essa parte: agora o agente vê o mesmo que você e entende as instruções através da visão, não do texto.

«O futuro do desenvolvimento é a capacidade de se mover entre um alto nível de abstração e detalhes de baixo nível sem perder o estado de fluxo», — a abordagem do

Cursor para o Design Mode.

Para os negócios, isso significa que tarefas de UI podem ser resolvidas mais rapidamente e com menos custo, especialmente para edições iterativas e testes A/B. O desenvolvedor pode se concentrar na arquitetura, enquanto CSS rotineiro e marcação vão para o agente.

O que isso significa

O mundo do desenvolvimento está se movendo para um ponto em que as ferramentas permitem uma transição suave entre estratégia (alto nível) e implementação (baixo nível). O Design Mode é um passo em direção a isso. Você não perde o controle, ganha precisão na edição e mantém a velocidade. A IA não se torna um substituto para o desenvolvedor, mas uma ferramenta que torna seu trabalho mais fácil e rápido.