Immagini, video, documenti, temi, tipografia e icone

Tutto ciò che si trova in queste schede della libreria può essere inserito in una richiesta con una menzione @. Seleziona un elemento per copiarne la menzione, poi seleziona Aggiungi al prompt, oppure digita @ nella casella e sceglilo dall'elenco. Puoi anche trascinare i file sulla libreria per aggiungerli, oppure selezionare + sotto la casella della richiesta, poi Aggiungi alla libreria.

Immagini

• Le tue immagini: seleziona Importa oppure trascina file PNG, JPEG, WebP, GIF, AVIF o SVG. Ogni immagine riceve una menzione basata sul nome del file, come @image/storefront.
• Da Unsplash: cerca foto, filtra per formato o colore oppure seleziona Mescola. Copiare la menzione di una foto la salva tra le tue immagini, così la menzione continua a funzionare. Ogni foto riporta il credito del fotografo. Ovunque compaia una foto di Unsplash (la libreria, la tela e le app esportate), si legge «Foto di nome su Unsplash», con i link al profilo Unsplash di chi l'ha scattata e a Unsplash.
• Seleziona un'immagine per vederla in grande. Da lì puoi copiarne la menzione, aggiungerla alla richiesta, scaricarla o modificarne il nome della menzione e il testo alternativo. Usa Seleziona per eliminarne o esportarne più di una alla volta.

Quando menzioni un'immagine, Vibr comunica al modello dimensioni, formato e testo alternativo e inserisce l'immagine reale nella bozza.

Quando aggiungi un'immagine, Vibr ne rimuove i metadati, come i dati della fotocamera, la posizione e i commenti, lasciando invariata l'immagine. Un SVG conserva solo il disegno: script, link e qualsiasi altra cosa che possa essere eseguita o caricata da un altro sito vengono rimossi, mentre i colori impostati con gli stili, come li esportano Illustrator e Inkscape, vengono mantenuti. Le foto di Unsplash restano esattamente come le fornisce Unsplash. Le immagini di altri siti non si caricano nella tela: aggiungile alla tua libreria e menzionale.

Video

• I tuoi video: seleziona Importa oppure trascina file MP4, MOV o WebM fino a 100 MB. Ogni video riceve una menzione basata sul nome del file, come @video/latte-pour, e un fotogramma di anteprima preso a circa un secondo dall'inizio.
• Da Pixabay: cerca video. Copiare la menzione di un video lo salva tra i tuoi video, così la menzione continua a funzionare. Ogni video di Pixabay riporta il credito del suo autore: ovunque ne compaia uno (la libreria, la tela e le app esportate), si legge «Video di nome su Pixabay», con i link al profilo Pixabay dell'autore e a Pixabay.
• Seleziona un video per riprodurlo. Da lì puoi copiarne la menzione, aggiungerlo alla richiesta, scaricarlo o modificarne il nome della menzione e la descrizione. Usa Seleziona per eliminarne o esportarne più di uno alla volta.

Quando menzioni un video, Vibr comunica al modello dimensioni, formato, durata e descrizione e inserisce il video reale nella bozza. Le bozze riproducono i video senza audio e in loop, con un'anteprima, e non li avviano da sole per chi ha chiesto al proprio dispositivo di ridurre il movimento.

Quando aggiungi un video, Vibr rimuove i metadati dei file MP4 o MOV, come la posizione e il dispositivo con cui è stato girato, lasciando invariati immagine e audio. Alcuni fotogrammi passano per lo stesso controllo sul dispositivo usato per le immagini. I video di Pixabay restano esattamente come li fornisce Pixabay.

Le app esportate portano con sé i tuoi video. Fino a 25 MB di video caricati stanno nella pagina singola; oltre questa soglia, App (.html) scarica uno zip con la pagina e una cartella videos accanto.

Documenti

Conserva qui brief, note di ricerca e design challenge, e porta uno di questi in qualsiasi richiesta con la sua menzione, come @doc/ordering-app-brief.

• Aggiungere documenti: seleziona Importa, trascina i file nella libreria oppure seleziona Salva nella libreria nell'anteprima di un documento allegato. Funzionano PDF, Word, PowerPoint, Excel, CSV, Markdown e testo, come in Allega documenti.
• Cosa viene conservato: il testo letto da Vibr e fino a due immagini, mai il file, quindi niente può essere eseguito in seguito. Valgono gli stessi controlli di quando alleghi un documento.
• Usarlo: una richiesta che menziona @doc/nome invia testo e immagini di quel documento, come un allegato. Le richieste successive non lo inviano di nuovo a meno che non lo menzionino.
• Anteprima, rinomina ed eliminazione con i pulsanti di ogni documento. Rinominarlo cambia la sua menzione.

Le librerie esportate e i file di prototipo portano con sé i documenti che usano, e testo e immagini vengono controllati di nuovo all'importazione.

Temi

Un tema è un insieme di colori, raggio degli angoli, spaziatura e ombre, con modalità chiara e scura conformi al contrasto WCAG.

• Nuovo tema apre l'editor. Scegli un colore primario e uno neutro (più success, warning, danger e info, se vuoi), il livello di contrasto (AA o AAA), il raggio degli angoli, l'unità di spaziatura e lo stile delle ombre.
• Importa token importa design token JSON in formato W3C, per esempio da Tokens Studio for Figma o Style Dictionary, oppure proprietà personalizzate CSS.
• Ogni tema mostra se ogni coppia di colori raggiunge il livello di contrasto, in entrambe le modalità.
• Il menu ⋯ di un tema permette di modificarlo, duplicarlo, copiarne il CSS o i token, oppure eliminarlo.

Menziona un tema con @theme/default. Le bozze che usano un tema mostrano un pulsante Modalità scura nel canvas.

Tipografia

• Importa famiglia di font aggiunge un font da file WOFF2, WOFF, TTF o OTF e crea una scala per quel font.
• Nuova scala crea una scala per un font che usi già, come Georgia.
• Una nuova scala ha sei stili: Display, Heading da 1 a 3, Body e Caption. Modifica scala cambia dimensioni, pesi, interlinee e spaziatura, oppure aggiunge stili.

Menziona uno stile con @type/georgia/h1.

Icone

• Le icone Lucide sono integrate. Cercane una e selezionala per copiarne la menzione, come @icon/arrow-right. Dopo averla copiata, puoi anche scaricarla in formato SVG.
• Importa font di icone aggiunge un tuo set, con il relativo CSS, un selection.json di IcoMoon o un config.json di Fontello. Un font a legature come Material Symbols funziona anche da solo. Le icone importate usano @icon/set/name.