Imágenes, vídeos, documentos, temas, tipografía e iconos

Todo lo que hay en estas pestañas de la biblioteca se puede incluir en una petición con una mención @. Selecciona un elemento para copiar su mención y luego selecciona Añadir a la petición, o escribe @ en el cuadro y elígelo de la lista. También puedes soltar archivos en la biblioteca para añadirlos, o seleccionar + bajo el cuadro de la petición y luego Añadir a la biblioteca.

Imágenes

• Tus imágenes: selecciona Importar o suelta archivos PNG, JPEG, WebP, GIF, AVIF o SVG. Cada imagen recibe una mención a partir de su nombre de archivo, como @image/storefront.
• De Unsplash: busca fotos, filtra por forma o color, o selecciona Mezclar. Al copiar la mención de una foto, esta se guarda en tus imágenes para que la mención siga funcionando. Cada foto lleva el crédito de su fotógrafo. Dondequiera que aparezca una foto de Unsplash (la biblioteca, el lienzo y las apps exportadas), se lee «Foto de nombre en Unsplash», con enlaces al perfil de Unsplash de quien la tomó y a Unsplash.
• Selecciona una imagen para verla en grande. Desde ahí puedes copiar su mención, añadirla a tu petición, descargarla o editar su nombre de mención y su texto alternativo. Usa Seleccionar para eliminar o exportar varias a la vez.

Cuando mencionas una imagen, Vibr indica al modelo su tamaño, su forma y su texto alternativo, y coloca la imagen real en el borrador.

Al añadir una imagen, Vibr elimina sus metadatos, como los datos de la cámara, la ubicación y los comentarios, y deja la imagen tal cual. Un SVG conserva solo su dibujo: se eliminan los scripts, los enlaces y cualquier otra cosa que pueda ejecutarse o cargarse desde otro sitio, y se mantienen los colores definidos con estilos, tal como los exportan Illustrator e Inkscape. Las fotos de Unsplash se mantienen exactamente como las sirve Unsplash. Las imágenes de otros sitios web no se cargan en el lienzo: añádelas a tu biblioteca y menciónalas.

Vídeos

• Tus vídeos: selecciona Importar o suelta archivos MP4, MOV o WebM de hasta 100 MB. Cada vídeo recibe una mención a partir de su nombre de archivo, como @video/latte-pour, y un fotograma de portada tomado hacia el primer segundo.
• De Pixabay: busca vídeos. Al copiar la mención de un vídeo, este se guarda en tus vídeos para que la mención siga funcionando. Cada vídeo de Pixabay lleva el crédito de su creador: dondequiera que aparezca uno (la biblioteca, el lienzo y las apps exportadas), se lee «Vídeo de nombre en Pixabay», con enlaces al perfil de Pixabay de su creador y a Pixabay.
• Selecciona un vídeo para reproducirlo. Desde ahí puedes copiar su mención, añadirlo a tu petición, descargarlo o editar su nombre de mención y su descripción. Usa Seleccionar para eliminar o exportar varios a la vez.

Cuando mencionas un vídeo, Vibr indica al modelo su tamaño, su forma, su duración y su descripción, y coloca el vídeo real en el borrador. Los borradores reproducen los vídeos sin sonido y en bucle, con una portada, y no los inician solos para quienes piden a su dispositivo movimiento reducido.

Al añadir un vídeo, Vibr elimina los metadatos de los archivos MP4 o MOV, como la ubicación y el dispositivo con el que se grabó, y deja la imagen y el sonido tal cual. Algunos fotogramas pasan por la misma comprobación en el dispositivo que las imágenes. Los vídeos de Pixabay se mantienen exactamente como los sirve Pixabay.

Las apps exportadas llevan tus vídeos consigo. Hasta 25 MB de vídeo subido caben en la página única; por encima de eso, App (.html) descarga un zip con la página y una carpeta videos junto a ella.

Documentos

Guarda aquí briefs, notas de investigación y retos de diseño, y lleva cualquiera a una petición con su mención, como @doc/ordering-app-brief.

• Añadir documentos: selecciona Importar, suelta archivos en la biblioteca o selecciona Guardar en la biblioteca en la vista previa de un documento adjunto. Funcionan PDF, Word, PowerPoint, Excel, CSV, Markdown y texto, como en Adjunta documentos.
• Qué se guarda: el texto que Vibr leyó y hasta dos imágenes, nunca el archivo, así que nada de él puede ejecutarse después. Se aplican las mismas comprobaciones que al adjuntar.
• Usarlo: una petición que menciona @doc/nombre envía el texto y las imágenes de ese documento, como un adjunto. Las peticiones siguientes no lo vuelven a enviar salvo que lo mencionen.
• Ver, renombrar y eliminar con los botones de cada documento. Al renombrarlo cambia su mención.

Las bibliotecas exportadas y los archivos de prototipo llevan los documentos que usan, y su texto e imágenes se revisan de nuevo al importarlos.

Temas

Un tema es un conjunto de colores, radio de esquina, espaciado y sombras, con modos claro y oscuro que cumplen el contraste WCAG.

• Nuevo tema abre el editor. Elige un color primario y uno neutro (y, si quieres, success, warning, danger e info), el nivel de contraste (AA o AAA), el radio de esquina, la unidad de espaciado y el estilo de sombra.
• Importar tokens incluye JSON de tokens de diseño W3C, por ejemplo de Tokens Studio for Figma o Style Dictionary, o propiedades personalizadas de CSS.
• Cada tema muestra si todos los pares de colores cumplen el nivel de contraste, en ambos modos.
• El menú ⋯ de un tema permite editarlo, duplicarlo, copiar su CSS o sus tokens, o eliminarlo.

Menciona un tema como @theme/default. Los borradores que usan un tema tienen un botón Modo oscuro en el lienzo.

Escala tipográfica

• Importar familia tipográfica añade una fuente a partir de archivos WOFF2, WOFF, TTF u OTF y crea una escala para ella.
• Nueva escala crea una escala para una fuente que ya uses, como Georgia.
• Una escala nueva tiene seis estilos: Display, Heading 1 a 3, Body y Caption. Editar escala cambia tamaños, pesos, interlineados y espaciado, o añade estilos.

Menciona un estilo como @type/georgia/h1.

Iconos

• Los iconos de Lucide vienen incluidos. Busca uno y selecciónalo para copiar su mención, como @icon/arrow-right. Después de copiarlo, también puedes descargarlo como SVG.
• Importar fuente de iconos añade tu propio conjunto, con su CSS, un selection.json de IcoMoon o un config.json de Fontello. Una fuente de ligaduras como Material Symbols funciona sola. Los iconos importados usan @icon/set/name.