Navegador e modo de design
Um Chromium dentro do workspace, com ferramentas para apontar um elemento da página e dizer ao agente o que mudar.
Cada workspace pode abrir abas de navegador. O navegador é um Chromium de verdade, e o modo de design são três ferramentas para levar a interface até o agente: Grab, Annotate e Markup.
Abrir o navegador
| Ação | macOS | Linux e Windows |
|---|---|---|
| Nova aba de navegador | ⇧⌘B | Ctrl+Shift+B |
| Focar a barra de endereço | ⌘L | Ctrl+L |
| Buscar na página | ⌘F | Ctrl+F |
| Voltar e avançar | ⌘[ / ⌘] | Alt+← / Alt+→ |
| Recarregar e recarregar sem cache | ⌘R / ⇧⌘R | Ctrl+R / Ctrl+Shift+R |
Também dá para abrir pelo + da barra de abas (New Browser Tab).
A barra de endereço aceita endereços http, https e localhost; o resto vira busca no buscador padrão. Arquivos locais não abrem por ali: para um arquivo HTML, use Open Preview to the Side no próprio arquivo.
A barra de ferramentas tem voltar, avançar, recarregar, abrir no navegador do sistema, devtools em janela separada, Grab page element, Annotate page element e o menu do navegador. O menu tem perfis, Import Cookies (de Chrome, Edge, Arc, Brave, Firefox, Safari e outros) e Viewport Size, com tamanhos de 320×568 a 1920×1080.
Grab: copiar um elemento
| Ação | macOS | Linux e Windows |
|---|---|---|
| Grab Page Element | ⌘C | Ctrl+C |
O atalho só liga o Grab quando não há texto selecionado nem campo focado; nos outros casos, é a cópia normal.
Passe o mouse ou clique num elemento e aperte C para copiar o contexto ou S para copiar uma captura do elemento. Esc cancela.
O contexto copiado traz o URL, a tag, o papel, um seletor CSS, o arquivo de origem e o componente React quando a página expõe isso, o tamanho, o texto e um trecho do HTML. Nada vai para o agente sozinho: você cola onde quiser.
Annotate: feedback para o agente
| Ação | macOS | Linux e Windows |
|---|---|---|
| Annotate Page Element | ⇧⌘C | Alt+Shift+N |
No Linux e no Windows, Ctrl+Shift+C já é copiar no terminal, por isso o atalho é outro.
- Clique no elemento.
- Escreva o que o agente deve mudar ali.
- Escolha a intenção: Change (padrão) ou Question.
- Clique em Add, ou use ⌘Enter no macOS e Ctrl+Enter no Linux e no Windows.
- Repita para quantos elementos precisar.
A bandeja de anotações permite editar e apagar cada nota, limpar tudo, copiar tudo e enviar. Send abre Send notes to, com os agentes rodando no workspace ou New agent. O prompt vai quando o agente estiver pronto, e as notas entregues saem da bandeja.
O agente recebe um texto em Markdown com o título Design Feedback, o URL e o tamanho da janela e, para cada elemento, o seletor, o arquivo de origem, o componente, a posição, as classes, o texto, os estilos calculados principais, o caminho no DOM, o HTML e o seu pedido.
O texto enviado não leva imagem. Para mandar uma imagem, use o S do Grab ou o Markup e cole no agente. O Annotate funciona só em abas de navegador locais, não em workspaces remotos.
Markup: desenhar na captura
O Markup desenha sobre uma captura da página, com caneta, marca-texto, seta, retângulo, elipse, texto e borracha. ⌘Z e ⇧⌘Z no macOS, ou Ctrl+Z e Ctrl+Shift+Z no Linux e no Windows, desfazem e refazem. Copy Markup copia a imagem para colar no agente.
Configurações
Em Settings → Browser: página inicial, buscador padrão, zoom, para onde vão os links (Link Routing), o que acontece ao clicar num URL no terminal, rótulos de worktree em endereços localhost, sessão e cookies, e a identificação do navegador (exige reiniciar).
Com Link Routing, ⇧⌘+clique no macOS ou Ctrl+Shift+clique no Linux e no Windows abre o link no navegador do sistema.
Agentes usando o navegador
Settings → Agent Browser Use deixa os agentes controlarem o navegador do Dusky com os seus logins, em três passos: ligar, instalar a skill e importar os cookies. A partir daí os agentes usam comandos da CLI como snapshot, screenshot, goto, click e fill.