Prompts schreiben

Den Screen beschreiben

Schreiben Sie, wofür der Screen gedacht ist und was darauf zu sehen ist, so wie Sie einen Designer briefen würden. Vibr ergänzt realistische Beispielinhalte, Sie müssen die Texte also nicht selbst schreiben.

• Gut: „Ein Analyse-Dashboard mit KPI-Karten und einer Tabelle der letzten Bestellungen“
• Besser: „Ein Analyse-Dashboard für eine Kaffeerösterei: vier KPI-Karten für Umsatz, Bestellungen, durchschnittlichen Bestellwert und Stammkunden, ein Diagramm zum Wochenumsatz und eine Tabelle der letzten Bestellungen mit Status-Chips“

Drücken Sie Eingabe zum Senden und Umschalt+Eingabe für eine neue Zeile. Auf Touchscreens fügt die Eingabetaste eine neue Zeile ein, und der Button Senden sendet.

Ist eine Anfrage zu vage, um sie zu planen, stellt Vibr Ihnen eine Frage, statt zu raten. Beantworten Sie sie im Eingabefeld, und der Durchlauf macht dort weiter.

Vibr gestaltet nur Oberflächen. Eine Anfrage, aus der sich nichts bauen lässt, etwa eine Wissensfrage oder ein Aufsatz, bekommt eine kurze Antwort mit einer Idee für eine Oberfläche, die Sie stattdessen bauen könnten, und nach Planen läuft nichts weiter. Alles, was eine Seite, App oder ein Bildschirm werden kann, wird gebaut, egal zu welchem Thema. Sobald ein Entwurf im Arbeitsbereich ist, können Sie auch Fragen dazu stellen („Warum diese Schrift?“, „Ist dieser Kontrast barrierefrei?“), und Vibr antwortet im Chat, ohne den Entwurf zu ändern.

Mit einem Bild beginnen

Sie haben eine Skizze, einen Screenshot oder ein Mockup? Fügen Sie es Ihrer Anfrage hinzu, und Vibr baut nach dem, was es zeigt. Wählen Sie + unter dem Eingabefeld und dann Datei hinzufügen, oder fügen Sie ein Bild dort ein oder legen Sie es ab. Pro Anfrage sind bis zu drei möglich, als PNG, JPEG, WebP, GIF, AVIF oder SVG.

• „Baue diese Skizze als Registrierungsseite“
• „Übernimm das Layout dieses Screenshots, mit Inhalten für einen Fahrradladen“
• Ein Bild ohne Text baut, was das Bild zeigt.

Der Entwurf verwendet die Komponenten und die Typografie Ihres Designsystems. Er folgt also Layout und Hierarchie des Bildes, statt dessen Pixel zu kopieren. Text im Bild gilt als Inhalt, nie als Anweisung.

Jedes Bild wird vor dem Senden verkleinert und neu gezeichnet, wodurch seine Metadaten entfernt werden, und es wird auf Ihrem Gerät geprüft wie jedes Bild, das Sie zur Bibliothek hinzufügen. Es geht nur mit dieser Anfrage an Ihren KI-Anbieter. Es wird weder in Ihrer Bibliothek gespeichert noch mit dem Gespräch aufbewahrt, spätere Anfragen senden es also nicht erneut.

Dokumente anhängen

Ein Briefing, Research-Notizen, eine Design-Challenge, die Zahlen des letzten Quartals: Hängen Sie das Dokument an, und Vibr entwirft auf seiner Grundlage. Wählen Sie + unter dem Eingabefeld und dann Datei hinzufügen, oder fügen Sie es dort ein oder legen Sie es ab. Pro Anfrage sind bis zu drei Dokumente möglich:

• PDF
• Word, PowerPoint und Excel (.docx, .pptx, .xlsx)
• CSV, TSV, Markdown und reiner Text

Aus Google Docs, Präsentationen oder Tabellen laden Sie die Datei zuerst in einem dieser Formate herunter (Datei, dann Herunterladen).

Vibr liest jedes Dokument in Ihrem Browser. Das Modell erhält den Text, bei Präsentationen mit den Sprechernotizen und bei Tabellen mit den Zeilen als Tabelle, dazu einige Bilder: die ersten Seiten eines PDFs oder die ersten Bilder einer Word-Datei oder Präsentation. Bis zu 30.000 Zeichen Text gehen mit einer Anfrage mit; darüber hinaus wird gekürzt, und der Chip zeigt es an. Wählen Sie den Chip eines Dokuments, um genau zu sehen, was gesendet wird, und um seine Bilder in Ihrer Bibliothek zu speichern. Um ein Dokument in späteren Anfragen wiederzuverwenden, wählen Sie in seiner Vorschau In der Bibliothek speichern und erwähnen es dann mit @doc.

Jedes Dokument wird geprüft, bevor es gelesen wird. Dateien, die Makros ausführen können (.docm, .pptm, .xlsm oder ein Dokument mit verstecktem Makroprojekt), Archive, die sich weit über ihre Größe hinaus entpacken würden, und passwortgeschützte PDFs werden abgewiesen. Nichts in einem Dokument wird ausgeführt: Skripte, Links, Formularfelder, Formeln und eingebettete Objekte werden ignoriert, und die Zellen einer Tabelle kommen mit ihren gespeicherten Werten. Der Text wird bereinigt und geprüft wie alles, was Sie eingeben, die Bilder wie Referenzbilder, und das Modell behandelt ein Dokument als Material für den Entwurf, nie als Anweisung.

Ein Dokument geht nur mit dieser Anfrage mit. Es wird weder in Ihrer Bibliothek gespeichert noch mit dem Gespräch aufbewahrt.

Vorhandenes überarbeiten

Sobald ein Entwurf existiert, steht im Eingabefeld „Beschreiben Sie Verfeinerungen oder neue Bereiche…“. Jede Anfrage überarbeitet den Entwurf im Canvas und wird zu einer neuen Version, sodass Sie jederzeit zurückgehen können. Einige Beispiele:

• „Hebe den Pro-Tarif hervor und füge FAQs hinzu“
• „Verwende auf dem Desktop ein zweispaltiges Layout“
• „Ersetze die Tabelle auf Smartphones durch Karten“

Der aktuelle Entwurf bleibt im Canvas, während die neue Version geschrieben wird, und der Canvas wechselt, sobald genug davon zum Zeichnen bereit ist.

Nur einen Teil ändern

So ändern Sie ein Element, ohne den Rest anzutasten:

1. Wählen Sie Element auswählen (das Zeigersymbol über dem Canvas).
2. Klicken Sie auf den Teil, den Sie ändern möchten. Ein Chip über dem Eingabefeld zeigt, welches Element es ist und wo es im Code steht.
3. Beschreiben Sie die Änderung. Wörter wie „dies“, „hier“ und „es“ beziehen sich auf dieses Element.

Drücken Sie Esc, um die Auswahl zu beenden, oder wählen Sie das X auf dem Chip, um sie aufzuheben.

Wenn das Element auf der Seite mehrfach vorkommt, etwa eine Karte in einer Liste oder eine Überschrift in jedem Preismodell, erscheint unter der Markierung eine Auswahl: Nur diese ändert nur die angeklickte Kopie, Alle ändert jede Kopie. Standard ist Nur diese. Die Arbeitsfläche umrandet die Kopien, die sich ändern.

Mehrere Teile zusammen ändern

Halten Sie Umschalt gedrückt und klicken Sie weitere Elemente an, um sie in einer Anfrage zu ändern, bis zu 8. Jedes bekommt im Arbeitsbereich eine Nummer, und der Chip listet sie auf. Beschreiben Sie dann, wie sie zusammenhängen, etwa „gleiche diese an“ oder „gib diesen denselben Abstand“. Ein erneuter Umschalt+Klick auf ein ausgewähltes Element nimmt es wieder heraus.

Auf einem Touchscreen wählen Sie Weitere im Chip und tippen dann auf die Elemente. Mit der Tastatur drücken Sie Umschalt+Enter auf einem fokussierten Element. Jedes hinzugefügte Element zählt nur als die angeklickte Kopie. Ein Element innerhalb eines bereits ausgewählten gehört schon dazu und wird nicht doppelt hinzugefügt.

Assets mit @ erwähnen

Geben Sie @ im Eingabefeld ein oder wählen Sie den Button @, um etwas aus Ihrer Bibliothek in eine Anfrage einzubringen. Während Sie tippen, erscheint eine Liste. Wählen Sie mit ↑ und ↓ aus und fügen Sie mit Eingabe oder Tab hinzu.

Erwähnung	Was sie einbringt
@image/name	Ein Bild, das Sie importiert oder von Unsplash gespeichert haben.
@video/name	Ein Video, das Sie importiert oder von Pixabay gespeichert haben.
@theme/name	Ein Farbtheme mit Hell- und Dunkelmodus.
@type/ramp/style	Ein Schriftstil aus einer Ihrer Typo-Skalen, etwa @type/georgia/h1.
@icon/name	Ein integriertes Lucide-Icon oder eines aus einer importierten Icon-Schrift (@icon/set/name).
@screen/name	Ein gespeicherter Prototyp, auf den verlinkt wird. Siehe Flows.
@chart/kind	Eine Diagrammart, etwa @chart/donut, gebaut mit Ihrer Diagrammbibliothek. Siehe Diagramme und Tabellen.
@table/feature	Eine Tabellenfunktion, etwa @table/sortable, gebaut mit Ihrer Tabellenbibliothek.

Erwähnungen in Ihrer Anfrage erscheinen als Chips unter dem Eingabefeld. Ein Chip wird rot, wenn der Name nicht in Ihrer Bibliothek ist, und Vibr lässt diese Erwähnung weg. Wie Sie Assets hinzufügen, erfahren Sie unter Bilder, Videos, Dokumente, Themes, Typo und Icons.

Tipps für bessere Ergebnisse

• Ein Screen pro Anfrage. Bauen Sie eine Seite und ergänzen Sie sie dann. Sehr große Anfragen können das Ausgabelimit des Modells erreichen; bitten Sie in diesem Fall um einen Bereich pro Nachricht.
• Benennen Sie die Teile. „Die Tarifkarten“ oder „der Header“ lässt sich leichter umsetzen als „das Ding oben“.
• Nutzen Sie das passende Werkzeug. Für ein einzelnes Element wählen Sie es aus. Für Notizen, die bleiben sollen, heften Sie eine Anmerkung an.