Modo de Design
O Modo de Design permite orientar agentes com prompts visuais. No navegador, na Janela de Agentes, você pode clicar em um elemento, desenhar na página ou descrever uma alteração por voz. O Cursor captura o contexto necessário e edita o código enquanto você segue para a próxima alteração.
O trabalho de UI costuma ser espacial. Em vez de descrever uma alteração em uma frase, sua instrução 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 reduz a distância entre perceber algo e corrigi-lo.
Clique em um elemento no app em execução, envie um prompt para esse elemento selecionado e deixe o agente editar o código.
Abrir o Modo de Design
O Modo de Design está disponível no navegador, dentro da Janela de Agentes. Abra o navegador e ative o Modo de Design com CmdCtrl + Shift + D. Use o mesmo atalho para desativá-lo e voltar à navegação normal.
Formas de orientar o agente
O Modo de Design oferece várias maneiras de expressar sua intenção.
Selecione um elemento
Clique em qualquer elemento do produto em execução para direcioná-lo. O agente recebe o elemento e o código correspondente, para que você possa dar instruções sobre exatamente o que vê sem sair do app.
Selecione vários elementos
A seleção múltipla é útil quando a alteração depende da relação entre elementos. Referencie dois componentes e peça ao agente para fazer um corresponder ao outro, remover conteúdo repetido ou ajustar um grupo de uma só vez.
Selecione vários elementos e descreva como eles devem mudar juntos.
Desenhe na página
O desenho indica ao agente a qual área da página sua instrução se aplica. Circule uma seção cheia, delimite uma região ou marque parte de uma página animada. A anotação fica sobre um quadro congelado da área de visualização, para que o agente veja o estado exato da página ao qual você estava respondendo.
Narre por voz
Você pode ditar instruções em vez de digitá-las. O microfone permanece disponível enquanto os agentes trabalham, permitindo colocar a próxima alteração na fila sem esperar.
Use entrada de voz e desenhos para descrever uma alteração.
Atalhos de teclado
| Ação | Atalho |
|---|---|
| Alternar o Modo de Design | CmdCtrl + Shift + D |
| Selecionar uma área | Shift + arrastar |
| Adicionar elemento ao chat | CmdCtrl + L |
| Adicionar elemento à entrada | OptionAlt + clicar |
O que o agente vê
Selecionar um elemento adiciona dois sinais complementares ao contexto:
- Identidade do elemento: o xpath, o componente, os atributos, os estilos computados e as props da árvore de fibras. Isso ajuda o agente a encontrar a origem e editar o código correto.
- Uma captura de tela: o layout, os elementos ao redor e o estado exato da página. Isso dá ao agente contexto espacial para a alteração.
Trabalhe sem interromper o fluxo
Ao refinar uma interface, uma edição geralmente leva à próxima. Você ajusta um componente, percebe o espaçamento ao redor dele e vê como outro componente deve combinar.
O Modo de Design permite enviar essas edições assim que você as percebe. Aponte para um elemento, descreva a alteração, passe para outra parte da página e envie outra edição antes de a primeira terminar. Isso facilita realizar várias tarefas e gerenciar vários subagentes de uma só vez. À medida que os agentes concluem as tarefas, o app é recarregado automaticamente e suas alterações aparecem no produto em execução.
Esse fluxo funciona melhor com um modelo Fast que seja eficiente em trabalho de interface. Recomendamos o Composer 2.5.