Añade un bloque Vibe de la biblioteca de bloques a tu página. Lo encontrarás en la categoría «Otros» o directamente en la lista de categorías que aparece debajo Zero Block.

Escribe una indicación en el campo de entrada para generar el bloque. Cuando hayas terminado, haz clic en el botón «Enviar» o pulsa la tecla Intro del teclado.

Para seleccionar un modelo de IA para la generación de código, haz clic en el nombre del modelo que aparece debajo del campo de entrada.

Para adjuntar una imagen, un archivo o un vídeo a tu solicitud, haz clic en el icono del clip. Puedes utilizar el archivo como contenido del bloque o como referencia.

Haz clic en el icono del signo de interrogación para ver ejemplos de indicaciones para generar un bloque o utilizarlas como punto de partida para crear tu propia indicación.

Haz clic en cualquier ejemplo de comando para utilizarlo.

También puedes ver una vista previa de un ejemplo de plantilla en forma de demostración en vivo en una página aparte, como por ejemplo una portada.

Para copiar el código del bloque generado, haz clic en «Copiar el código». El bloque se añadirá automáticamente a tu página.

Haz clic en «Aplicar solicitud» para abrir el editor y modificar tu solicitud. En el editor, también puedes adjuntar imágenes o seleccionar un modelo de IA diferente para la generación.

Una vez generado el bloque, el chat de IA mostrará el mensaje «¡Listo!» para indicar que el bloque ya está listo para su uso. Debajo del mensaje, verás las opciones para copiarlo, volver a generarlo o eliminarlo.

En el chat, puedes desplegar la respuesta de la IA para ver y copiar el código.

Para ver el código completo, haz clic en «Código» en el panel superior para abrir el editor, donde podrás editarlo manualmente y personalizar aún más el bloque.

Para obtener el mejor resultado, puedes volver a generar el código del bloque perfeccionando tu solicitud original o introducir una solicitud completamente nueva.

Por ejemplo, basta con que describas lo que hay que cambiar en el bloque, y la IA actualizará el código en consecuencia.

De forma predeterminada, el bloque muestra la última versión generada. Para ver una versión anterior, haz clic en el icono del ojo. Para aplicarla, haz clic en «Aplicar».

Con esta opción, puedes alternar entre las diferentes versiones del bloque. Para guardar el resultado, solo tienes que cerrar la ventana del chat de IA.

Para volver a editar el bloque después de cerrar el chat, haz clic en el botón «Editor de bloques».

Para editar un elemento de un bloque creado, haz clic en él. Se abrirá el panel de estilo y contenido.

Para cambiar rápidamente a otro elemento, haz clic en el icono «Capas». Se abrirá el panel «Capas».

Selecciona diferentes capas para encontrar el elemento o grupo que necesites. La capa seleccionada aparece resaltada en gris.

También puedes abrir el panel «Capas» desde el código de Vibe Block. Haz clic en el icono de «Capas» y, a continuación, selecciona la capa que desees. Se abrirá el panel de estilos.

Haz clic en el icono de la flecha para seleccionar rápidamente el grupo principal de un grupo o elemento anidado.

Haz clic en el icono de código para editar el elemento en el código.

Para copiar un elemento, haz clic en el icono de copiar. Para eliminarlo, haz clic en el icono de la papelera. Utiliza las flechas arriba y abajo para mover el elemento en el panel «Capas» y cambiar su orden.

Para editar un elemento con IA, haz clic en «Editar con IA». Se abrirá un panel para introducir una indicación. El campo ya está rellenado con la ruta del elemento que deseas modificar.

Las opciones disponibles en el campo «Contenido» dependen del elemento seleccionado.

En el caso de un elemento de texto, puedes editar el texto en el campo «Contenido».

En el caso de una imagen, puedes sustituir o eliminar el archivo, subir uno nuevo o seleccionar una imagen de la biblioteca de imágenes.

En el caso de un formulario, aparecerá el botón «Servicios». Úsalo para conectarte a un CRM c Tilda o u otro servicio de recopilación de datos.

En el caso de un grupo que contenga elementos, se mostrará el código. Puedes editarlo en el campo «Contenido» o abrirlo directamente en el editor de código.

Para configurar la adaptabilidad de un grupo o elemento, selecciona el icono de pantalla deseado en el campo «Puntos de ruptura».

De forma predeterminada hay cuatro puntos de ruptura disponibles, pero puedes añadir valores personalizados. Haz clic en el icono de engranaje, selecciona «Añadir», introduce el ancho de pantalla deseado y guarda los cambios.

Para un grupo o elemento, puedes configurar el ancho y la altura, el radio de las esquinas, la opacidad y las dimensiones mínimas y máximas.

También puedes configurar los ajustes de Flex para los elementos.

En el caso de los grupos y los elementos, puedes configurar los márgenes y el relleno, así como cambiar el color de fondo.

Para añadir un borde a un grupo o elemento, haz clic en «Borde». Las opciones disponibles se mostrarán en el panel de estilos.

También puedes configurar efectos adicionales o añadir propiedades a un elemento, como animaciones.

Vibe Block incluye límites de solicitudes gratuitas en todos los planes de precios de forma predeterminada. En la tabla siguiente se indica el número de solicitudes que puedes realizar cada 12 horas y al mes, en función de tu plan de precios.

Si has alcanzado el límite de solicitudes de tu cuenta, puedes comprar solicitudes adicionales. Para ello, ve a la página «Compras de solicitudes de IA» o haz clic en el botón «Comprar solicitudes» del menú emergente del chat en bloque.

En la misma ventana, también puedes consultar tu límite de solicitudes para el día actual y el total de límites de uso restantes incluidos en el plan.