Adicione um Vibe Block da Biblioteca de Blocos à sua página. Você pode encontrá-lo na categoria “Outros” ou diretamente na lista de categorias abaixo Zero Block.

Digite uma solicitação no campo de entrada para gerar o bloco. Quando a solicitação estiver pronta, clique no botão "Enviar" ou pressione a tecla Enter no teclado.

Para selecionar um modelo de IA para geração de código, clique no nome do modelo abaixo do campo de entrada.

Para anexar uma imagem, um arquivo ou um vídeo à sua solicitação, clique no ícone do clipe de papel. Você pode usar o arquivo como conteúdo do bloco ou como referência.

Clique no ícone de ponto de interrogação para ver exemplos de prompts para gerar um bloco ou usá-los como ponto de partida para o seu próprio prompt.

Clique em qualquer exemplo de prompt para usá-lo.

Você também pode visualizar um exemplo de prompt em uma demonstração ao vivo em uma página separada, como um exemplo de capa.

Para copiar o código do bloco gerado, clique em “Copiar o código”. O bloco será então adicionado automaticamente à sua página.

Clique em “Aplicar prompt” para abrir o editor e modificar sua solicitação. No editor, você também pode anexar imagens ou selecionar um modelo de IA diferente para a geração.

Assim que o bloco for gerado, o chat de IA exibirá a mensagem “Pronto!”, indicando que o bloco está pronto para uso. Abaixo do prompt, você verá as opções para copiá-lo, regenerá-lo ou excluí-lo.

No chat, você pode expandir a resposta da IA para visualizar e copiar o código.

Para ver o código completo, clique em “Código” no painel superior para abrir o editor, onde você poderá editá-lo manualmente para personalizar ainda mais o bloco.

Para obter o melhor resultado, você pode regenerar o código do bloco refinando sua solicitação original ou inserir uma solicitação totalmente nova.

Por exemplo, basta descrever o que precisa ser alterado no bloco, e a IA atualizará o código de acordo com isso.

Por padrão, o bloco exibe a versão mais recente gerada. Para visualizar uma versão anterior, clique no ícone do olho. Para aplicá-la, clique em “Aplicar”.

Com essa opção, você pode alternar entre diferentes versões do bloco. Para salvar o resultado, basta fechar a janela do chat de IA.

Para editar o bloco novamente após fechar o chat, clique no botão "Editor de blocos".

Para editar um elemento em um bloco criado, clique nele. O painel de estilo e conteúdo será aberto.

Para alternar rapidamente para outro elemento, clique no ícone “Camadas”. O painel “Camadas” será aberto.

Selecione diferentes camadas para localizar o elemento ou grupo desejado. A camada selecionada fica destacada em cinza.

Você também pode abrir o painel Camadas a partir do código do Vibe Block. Clique no ícone Camadas e, em seguida, selecione a camada desejada. O painel de estilos será aberto.

Clique no ícone de seta para selecionar rapidamente o grupo pai de um grupo ou elemento aninhado.

Clique no ícone de código para editar o elemento no código.

Para copiar um elemento, clique no ícone de cópia. Para excluí-lo, clique no ícone da lixeira. Use as setas para cima e para baixo para mover o elemento no painel Camadas e alterar sua ordem.

Para editar um elemento com IA, clique em “Editar com IA”. Um painel para inserir um prompt será exibido. O campo já está preenchido com o caminho para o elemento que você deseja alterar.

As opções disponíveis no campo Conteúdo dependem do elemento selecionado.

No caso de um elemento de texto, é possível editar o texto no campo Conteúdo.

No caso de uma imagem, você pode substituir ou excluir o arquivo, fazer o upload de uma nova imagem ou selecionar uma imagem da Biblioteca de Imagens.

Em um formulário, aparecerá o botão “Serviços”. Use-o para conectar-se a Tilda , CRM ou outro serviço de coleta de dados.

Para um grupo que contenha elementos, o código será exibido. Você pode editá-lo no campo Conteúdo ou abri-lo diretamente no editor de código.

Para configurar a responsividade de um grupo ou elemento, selecione o ícone da tela desejada no campo “Pontos de quebra”.

Quatro pontos de quebra estão disponíveis por padrão, mas você pode adicionar valores personalizados. Clique no ícone de engrenagem, selecione “Adicionar”, insira a largura da tela desejada e salve as alterações.

Para um grupo ou elemento, é possível definir a largura e a altura, o raio dos cantos, a opacidade e as dimensões mínimas e máximas.

Você também pode definir configurações flexíveis para os elementos.

Para grupos e elementos, é possível configurar margens e espaçamento interno, além de alterar a cor de fundo.

Para adicionar uma borda a um grupo ou elemento, clique em “Borda”. As opções disponíveis serão exibidas no painel de estilos.

Você também pode configurar efeitos adicionais ou adicionar propriedades a um elemento, como animação.

O Vibe Block possui limites de solicitações gratuitas incluídos por padrão em todos os planos de preços. A tabela abaixo mostra quantas solicitações você pode fazer a cada 12 horas e por mês, dependendo do seu plano de preços.

Se você atingiu o limite de solicitações da sua conta, pode adquirir solicitações adicionais. Para isso, acesse a página “Compras de solicitações de IA” ou clique no botão “Comprar solicitações” no menu pop-up do chat em bloco.

Na mesma janela, você também pode visualizar o seu limite de solicitações para o dia atual e o total de limites de uso restantes incluídos no plano.