Funcionalidades
Edições visuais
Como alterar design, textos e layout diretamente na página
Não tens de descrever cada pequena alteração ao agente: podes trabalhar diretamente na pré-visualização do teu projeto. Clica num elemento para lhe mudares o aspeto, reescreve o texto no próprio sítio ou desenha uma marca sobre a página para mostrares ao agente do que estás a falar.
As edições visuais trabalham sempre com um elemento concreto. Escolhes um elemento na página, vês as definições disponíveis para ele e alteras tudo ali mesmo. As alterações de design e de texto são escritas no projeto quando guardas, sem passarem pelo agente e sem gastarem créditos.
As edições visuais só funcionam no computador. A barra de ferramentas não aparece no telemóvel nem em janelas de navegador estreitas.
A barra de ferramentas
Sobre a pré-visualização em direto do teu projeto flutua uma barra com três ferramentas:
- Editar design: Clica em qualquer elemento para mudares o aspeto, a imagem ou o layout.
- Editar texto: O texto editável fica contornado, basta clicares nele e reescrevê-lo.
- Anotação: Desenha na página para mostrares do que estás a falar.
Com Esc voltas a qualquer momento à navegação normal da pré-visualização.
Editar design
Ao selecionares um elemento, as definições dele abrem no painel da esquerda. O que encontras lá depende do tipo de elemento: uma secção oferece tamanho, espaçamento, fundo, contornos e a disposição dos elementos que contém, um elemento de texto oferece tipografia e numa imagem podes trocar o ficheiro.
O cabeçalho do painel mostra onde estás, desde o nível Global até ao elemento selecionado, e com o seletor de tema verificas o resultado em modo claro e escuro antes de guardares.
Editar texto
O texto que podes reescrever fica contornado diretamente na pré-visualização. Clica lá dentro e escreve. É a forma mais rápida de corrigir um título ou um parágrafo, porque vês o resultado no sítio enquanto escreves.
Anotação
Às vezes é mais rápido mostrar ao agente o que queres dizer do que descrevê-lo.
Com a Anotação ligada, desenha sobre a parte da página de que estás a falar. O Vibewax percebe que elementos ficam por baixo da tua marca e junta-os à tua mensagem seguinte. Desenha as marcas que precisares, escreve depois a mensagem e envia-a como de costume.
Enquanto desenhas, tens Desfazer marca, Refazer marca e Limpar à mão na própria barra.
As anotações servem para apontar, não para deixar comentários. Não ficam guardadas com o projeto e não custam nada além da mensagem que envias.
Guarda ou descarta as alterações de design antes de começares a anotar e não mudes o tamanho da pré-visualização enquanto desenhas. Ao mudares o tamanho, as marcas desaparecem, porque estão ancoradas ao sítio onde o conteúdo estava.
Navegação entre elementos
Clicar exatamente naquilo que queres nem sempre é possível, sobretudo quando os elementos se sobrepõem ou um elemento aninhado tapa aquele que o contém.
Por cima da tua seleção aparece uma pequena barra que te deixa subir um nível ou passar com as setas para os elementos vizinhos. Aí encontras também o ícone de código, que abre o código-fonte do elemento no separador Código, e a opção de remover o elemento por completo.
Perguntar à IA
Em textos e imagens tens no painel o botão Perguntar à IA, para as alturas em que é mais simples descrever uma alteração do que configurá-la. Num texto, reescreve o conteúdo conforme pedires. Numa imagem, pode editar a que já tens ou gerar uma nova, e vês o resultado antes de o usares.
Com um elemento selecionado, também o campo de mensagem do chat passa a editar esse elemento. Tudo o que escreveres ali aplica-se apenas à tua seleção atual.
Perguntar à IA e as mensagens enviadas pelo chat gastam créditos como qualquer outro pedido à IA, e o preço de Perguntar à IA aparece antes de a executares. Tudo o que definires à mão no painel é gratuito.
Guardar as alterações
Enquanto tiveres alterações por guardar, a barra mostra quantas são e podes guardá-las todas de uma vez com Guardar ou anulá-las com Descartar.
Guardar não passa pelo agente, por isso é imediato e não custa créditos. Se a alteração for mais exigente, o Vibewax passa-a ao agente no chat, onde se comporta como qualquer outra mensagem.
Quando a barra de ferramentas não está disponível
A barra esconde-se, ou fica cinzenta, quando a edição direta não funcionaria:
- Espera que o Vibewax termine: O agente ainda está a trabalhar no teu projeto.
- À espera que a pré-visualização esteja pronta: A pré-visualização ainda está a arrancar.
- Fecha o plano para editar a página: Tens um plano aberto no chat.