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

Digite um comando no campo de entrada do chat para gerar o bloco. Em seguida, 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 no bloco.

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 ou criar seu próprio prompt usando esses exemplos.

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 exemplo e criar o bloco na página, clique em “Copiar o código”.

Clique em “Aplicar prompt” para abrir o editor e modificar sua solicitaçã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á editar manualmente o código gerado do bloco.

Para obter o melhor resultado, você pode regenerar o código do bloco usando o mesmo prompt, refinar o prompt original ou inserir uma nova solicitação.

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

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 e selecionar a mais adequada. 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 “Editar com IA”.

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.

Alterne entre as diferentes camadas para selecionar o elemento ou grupo desejado. A camada selecionada fica destacada em cinza.

Você também pode abrir rapidamente 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 duplicação. 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á conterá o caminho para o elemento que você deseja alterar.

Os itens que você pode editar no campo Conteúdo dependem do elemento selecionado.

No caso de um elemento de texto, você pode 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 configurar a largura e a altura, o raio dos cantos, a opacidade, bem como 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.

Para editar o conteúdo de um Vibe Block, clique em “Conteúdo”.

O painel de edição exibirá campos e elementos que você pode atualizar rapidamente: texto, imagens, ícones da biblioteca e outros elementos de bloco disponíveis.

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.