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.

Escribe una instrucción en el campo de entrada del chat para generar el bloque. A continuación, 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 dentro del bloque.

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 o crea tu propia indicación utilizando estos ejemplos.

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 ejemplo y crear el bloque en la página, haz clic en «Copia el código».

Haz clic en «Aplicar indicación» para abrir el editor y modificar tu solicitud.

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 editar manualmente el código generado del bloque.

Para obtener el mejor resultado, puedes volver a generar el código del bloque utilizando la misma indicación, perfeccionar tu indicación original o introducir una nueva solicitud.

Por ejemplo, basta con describir qué hay que cambiar en el bloque y la IA actualizará el código.

Por defecto, 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 diferentes versiones y seleccionar la que más te convenga. Para guardar el resultado, solo tienes que cerrar la ventana del chat de IA.

Para volver a editar el bloque tras cerrar el chat, haz clic en el botón «Editar con IA».

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».

Cambia entre las distintas capas para seleccionar el elemento o grupo que necesites. La capa seleccionada aparece resaltada en gris.

También puedes abrir rápidamente 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 duplicar. 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 incluirá la ruta del elemento que deseas modificar.

Los elementos que se pueden editar en el campo «Contenido» dependen del elemento seleccionado.

En el caso de un elemento de texto, se puede 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, así como 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.

Para editar el contenido de un Vibe Block, haz clic en «Contenido».

El panel de edición mostrará los campos y elementos que puedes actualizar rápidamente: texto, imágenes, iconos de la biblioteca y otros elementos de bloque disponibles.

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.

Puedes convertir un Vibe Block generado en Zero Block Para ello, abre la configuración de Vibe Block y haz clic en Convertir a Zero Block .

Después de la conversión, haga clic en Editor de bloques para abrir el bloque en Zero Block y personalizar su diseño.