Edições visuais

Em vez de descrever cada pequena alteração ao agente, você pode trabalhar direto na prévia do projeto. Clique em um elemento para mudar a aparência dele, reescreva o texto no próprio lugar ou desenhe uma marca sobre a página para mostrar ao agente o que você quer dizer.

A edição visual funciona por elemento. Você escolhe um elemento na página, vê as configurações disponíveis para ele e aplica a alteração ali mesmo. As alterações de design e de texto são gravadas no projeto quando você salva, sem passar por uma rodada do agente e sem usar créditos.

A barra de ferramentas

Uma barra de ferramentas flutua sobre a prévia ao vivo do projeto, com três ferramentas:

• Editar design: clique em qualquer elemento para mudar a aparência, a imagem ou o layout dele.
• Editar texto: o texto editável fica contornado, então você pode clicar nele e reescrevê-lo.
• Anotação: desenhe na página para mostrar o que você quer dizer.

Pressione Esc a qualquer momento para voltar a navegar pela prévia.

Editar design

Ao selecionar um elemento, as configurações dele abrem no painel à esquerda. O que aparece depende do tipo de elemento escolhido: uma seção oferece tamanho, espaçamento, fundo, bordas e a forma como os elementos internos são organizados, um elemento de texto oferece tipografia, e uma imagem permite trocar por um novo arquivo.

O cabeçalho do painel acompanha onde você está, do nível Global até o elemento selecionado, e o seletor de tema permite conferir o resultado nos modos claro e escuro antes de salvar.

Editar texto

O texto que você pode reescrever fica contornado direto na prévia. Clique nele e digite. É a forma mais rápida de corrigir um título ou um parágrafo, porque você vê o resultado no lugar enquanto escreve.

Anotação

Às vezes é mais rápido mostrar ao agente o que você quer dizer do que descrever.

Com a Anotação ativada, desenhe sobre a parte da página a que você se refere. O Vibewax identifica quais elementos estão sob a sua marca e os anexa à sua próxima mensagem. Desenhe quantas marcas precisar, depois escreva a mensagem e envie normalmente.

Enquanto você desenha, Desfazer marca, Refazer marca e Limpar ficam à mão na barra de ferramentas.

As anotações servem para apontar, não para deixar comentários. Elas não são salvas com o projeto e não custam nada além da mensagem que você envia.

Navegando entre elementos

Nem sempre dá para clicar exatamente no que você quer, geralmente quando os elementos se sobrepõem ou quando um elemento interno cobre o elemento pai.

Uma pequena barra acima da seleção permite subir um nível ou passar para os elementos vizinhos. É nela também que ficam o ícone de código, que abre o código-fonte do elemento na aba Código, e a opção de remover o elemento por completo.

Perguntar à IA

Perguntar à IA fica ao lado do texto e das imagens no painel, para quando você prefere descrever uma alteração em vez de configurá-la. No texto, ele reescreve o conteúdo a partir do seu pedido. Em uma imagem, ele pode editar a que você tem ou gerar uma nova, e você vê uma prévia do resultado antes de decidir se fica com ela.

Com um elemento selecionado, o campo de mensagem do chat também passa a editar esse elemento. Tudo o que você escrever ali vale apenas para a seleção atual.

Salvando suas alterações

Enquanto houver alterações não salvas, a barra de ferramentas mostra quantas você fez, e você pode salvá-las ou descartá-las todas de uma vez.

Salvar não passa pelo agente, então é imediato e não custa créditos. Se uma alteração for mais complexa, o Vibewax a entrega ao agente no seu chat, onde ela se comporta como qualquer outra mensagem.

Quando a barra de ferramentas não está disponível

A barra de ferramentas se esconde, ou fica esmaecida, quando a edição direta não funcionaria:

• Aguarde o Vibewax terminar: o agente ainda está trabalhando no seu projeto.
• Aguardando a prévia ficar pronta: a prévia ainda está iniciando.
• Feche o plano para editar a página: há um plano aberto no chat.