Bilder, Videos, Dokumente, Themes, Typo und Icons

Alles in diesen Tabs der Bibliothek lässt sich mit einer @-Erwähnung in eine Anfrage einbringen. Wählen Sie ein Element, um seine Erwähnung zu kopieren, und dann Zum Prompt hinzufügen, oder geben Sie @ im Eingabefeld ein und wählen Sie es aus der Liste. Sie können auch Dateien in der Bibliothek ablegen, um sie hinzuzufügen, oder + unter dem Eingabefeld und dann Zur Bibliothek hinzufügen wählen.

Bilder

• Ihre Bilder: Wählen Sie Importieren oder legen Sie PNG-, JPEG-, WebP-, GIF-, AVIF- oder SVG-Dateien ab. Jedes Bild erhält eine Erwähnung aus seinem Dateinamen, etwa @image/storefront.
• Von Unsplash: Suchen Sie nach Fotos, filtern Sie nach Format oder Farbe oder wählen Sie Mischen. Wenn Sie die Erwähnung eines Fotos kopieren, wird es in Ihren Bildern gespeichert, damit die Erwähnung weiter funktioniert. Bei jedem Foto wird der Fotograf genannt. Wo immer ein Unsplash-Foto erscheint (Bibliothek, Canvas und exportierte Apps), steht „Foto von Name auf Unsplash“, verlinkt mit dem Unsplash-Profil der fotografierenden Person und mit Unsplash.
• Wählen Sie ein Bild, um es groß anzuzeigen. Dort können Sie seine Erwähnung kopieren, es Ihrer Anfrage hinzufügen, es herunterladen oder den Namen für Erwähnungen und den Alternativtext bearbeiten. Mit Auswählen löschen oder exportieren Sie mehrere auf einmal.

Wenn Sie ein Bild erwähnen, teilt Vibr dem Modell Größe, Format und Alternativtext mit und setzt das echte Bild in den Entwurf ein.

Wenn Sie ein Bild hinzufügen, entfernt Vibr seine Metadaten, etwa Kameradaten, Standort und Kommentare, und lässt das Bild selbst unverändert. Ein SVG behält nur seine Zeichnung: Skripte, Links und alles andere, was ausgeführt werden oder etwas von einer anderen Website laden könnte, werden entfernt, und Farben, die über Stile festgelegt sind, wie Illustrator und Inkscape sie exportieren, bleiben erhalten. Unsplash-Fotos bleiben genau so, wie Unsplash sie liefert. Bilder von anderen Websites werden im Canvas nicht geladen: Fügen Sie sie Ihrer Bibliothek hinzu und erwähnen Sie sie stattdessen.

Videos

• Ihre Videos: Wählen Sie Importieren oder legen Sie MP4-, MOV- oder WebM-Dateien bis 100 MB ab. Jedes Video erhält eine Erwähnung aus seinem Dateinamen, etwa @video/latte-pour, und ein Vorschaubild von etwa der ersten Sekunde.
• Von Pixabay: Suchen Sie nach Videos. Wenn Sie die Erwähnung eines Videos kopieren, wird es in Ihren Videos gespeichert, damit die Erwähnung weiter funktioniert. Bei jedem Pixabay-Video wird die Person genannt, die es erstellt hat. Wo immer eines erscheint (Bibliothek, Canvas und exportierte Apps), steht „Video von Name auf Pixabay“, verlinkt mit dem Pixabay-Profil dieser Person und mit Pixabay.
• Wählen Sie ein Video, um es abzuspielen. Dort können Sie seine Erwähnung kopieren, es Ihrer Anfrage hinzufügen, es herunterladen oder den Namen für Erwähnungen und die Beschreibung bearbeiten. Mit Auswählen löschen oder exportieren Sie mehrere auf einmal.

Wenn Sie ein Video erwähnen, teilt Vibr dem Modell Größe, Format, Länge und Beschreibung mit und setzt das echte Video in den Entwurf ein. Entwürfe spielen Videos stumm und in Schleife mit einem Vorschaubild ab und starten sie nicht von selbst für Personen, die auf ihrem Gerät reduzierte Bewegung eingestellt haben.

Wenn Sie ein Video hinzufügen, entfernt Vibr die Metadaten einer MP4- oder MOV-Datei, etwa den Standort und das Gerät, mit dem es gefilmt wurde, und lässt Bild und Ton unverändert. Einige Einzelbilder durchlaufen dieselbe Prüfung auf dem Gerät wie Bilder. Pixabay-Videos bleiben genau so, wie Pixabay sie liefert.

Exportierte Apps nehmen Ihre Videos mit. Bis zu 25 MB hochgeladene Videos passen in die einzelne Seite; darüber hinaus lädt App (.html) ein ZIP-Archiv mit der Seite und einem Ordner videos daneben herunter.

Dokumente

Bewahren Sie hier Briefings, Research-Notizen und Design-Challenges auf, und bringen Sie eines mit seiner Erwähnung in jede Anfrage ein, etwa @doc/ordering-app-brief.

• Dokumente hinzufügen: Wählen Sie Importieren, legen Sie Dateien in der Bibliothek ab, oder wählen Sie In der Bibliothek speichern in der Vorschau eines angehängten Dokuments. PDF, Word, PowerPoint, Excel, CSV, Markdown und Text funktionieren wie unter Dokumente anhängen.
• Was gespeichert wird: der Text, den Vibr gelesen hat, und bis zu zwei Bilder, nie die Datei selbst, sodass später nichts daraus ausgeführt werden kann. Es gelten dieselben Prüfungen wie beim Anhängen.
• Verwenden: Eine Anfrage, die @doc/name erwähnt, sendet Text und Bilder dieses Dokuments mit, wie einen Anhang. Spätere Anfragen senden es nur erneut, wenn sie es erwähnen.
• Ansehen, umbenennen und löschen mit den Buttons an jedem Dokument. Umbenennen ändert die Erwähnung.

Exportierte Bibliotheken und Prototyp-Dateien enthalten die Dokumente, die sie verwenden; Text und Bilder werden beim Import erneut geprüft.

Themes

Ein Theme ist eine Reihe von Farben, Eckenradius, Abständen und Schatten, mit Hell- und Dunkelmodus, die den WCAG-Kontrast erfüllen.

• Neues Theme öffnet den Editor. Wählen Sie eine Primär- und eine Neutralfarbe (auf Wunsch zusätzlich Erfolg, Warnung, Gefahr und Info), die Kontraststufe (AA oder AAA), den Eckenradius, die Abstandseinheit und den Schattenstil.
• Tokens importieren übernimmt W3C-Design-Tokens-JSON, etwa aus Tokens Studio für Figma oder Style Dictionary, oder CSS Custom Properties.
• Jedes Theme zeigt, ob alle Farbpaare die Kontraststufe in beiden Modi erfüllen.
• Über das Menü ⋯ eines Themes können Sie es bearbeiten, duplizieren, sein CSS oder seine Tokens kopieren oder es löschen.

Erwähnen Sie ein Theme etwa als @theme/default. Entwürfe, die ein Theme verwenden, erhalten im Canvas einen Button Dunkelmodus.

Typo-Skala

• Schriftfamilie importieren fügt eine Schrift aus WOFF2-, WOFF-, TTF- oder OTF-Dateien hinzu und erstellt eine Skala dafür.
• Neue Skala erstellt eine Skala für eine Schrift, die Sie bereits verwenden, etwa Georgia.
• Eine neue Skala hat sechs Stile: Display, Heading 1 bis 3, Body und Caption. Skala bearbeiten ändert Größen, Stärken, Zeilenhöhen und Laufweite oder fügt Stile hinzu.

Erwähnen Sie einen Stil etwa als @type/georgia/h1.

Icons

• Lucide-Icons sind integriert. Suchen Sie eines und wählen Sie es, um seine Erwähnung zu kopieren, etwa @icon/arrow-right. Nach dem Kopieren können Sie es auch als SVG herunterladen.
• Icon-Schrift importieren fügt Ihr eigenes Set hinzu, mit seinem CSS, einer IcoMoon-Datei selection.json oder einer Fontello-Datei config.json. Eine Ligaturschrift wie Material Symbols funktioniert auch allein. Importierte Icons verwenden @icon/set/name.