Erste Schritte

Bevor Sie beginnen

Sie brauchen einen API-Schlüssel von einem dieser Anbieter. Bei jedem können Sie kostenlos oder günstig einsteigen.

• Google Gemini: Holen Sie sich einen Schlüssel in Google AI Studio. Schlüssel der kostenlosen Stufe funktionieren mit den Flash-Modellen; Pro-Modelle erfordern aktivierte Abrechnung.
• OpenAI: Erstellen Sie einen geheimen Schlüssel im OpenAI-Dashboard.
• Anthropic: Erstellen Sie einen Schlüssel in der Anthropic Console.

Mit einem kostenpflichtigen Konto kostet ein Entwurf meist ein paar Cent. Der Schlüsseldialog zeigt die Spanne für das gewählte Modell.

Noch kein Schlüssel? Probieren Sie die Beispiele

Beim ersten Besuch bietet die Begrüßung Beispiel ansehen, ohne Schlüssel. Damit kommen drei fertige Prototypen in Ihre Bibliothek, und der erste öffnet sich: eine Café-Startseite, ihre Speisekarte und ein Betriebs-Dashboard. Alles, was kein Modell fragt, funktioniert damit, etwa Elemente auswählen, Versionen vergleichen, alle Größen, Messen, Notizen, Abspielen und Export. Um ein Beispiel per Anfrage zu ändern, fügen Sie einen Schlüssel hinzu. Später bietet auch der Schlüsseldialog Öffnen Sie ein Beispiel an, bis Sie einen Schlüssel speichern.

Schlüssel hinzufügen

1. Wählen Sie Ihren Anbieter in der Auswahl KI-Anbieter in der oberen Leiste.
2. Wählen Sie Schlüssel hinzufügen. Der Dialog nennt den gewählten Anbieter.
3. Fügen Sie den Schlüssel ein und wählen Sie Schlüssel speichern. Der Button ändert sich zu Schlüssel festgelegt.

Vibr prüft, was Sie einfügen, bevor es gespeichert wird. Häufige Verwechslungen wie eine Schlüssel-ID statt des Geheimnisses, ein Schlüssel eines anderen Anbieters, ein Anthropic-Admin-Schlüssel oder ein überflüssiges Leerzeichen werden erkannt, und Vibr sagt Ihnen, was zu korrigieren ist. Sie können für jeden Anbieter (Gemini, OpenAI und Anthropic) einen Schlüssel speichern und jederzeit wechseln; alle Modelle eines Anbieters verwenden dessen Schlüssel. Um einen weiteren festzulegen, wählen Sie den Anbieter und dann erneut Schlüssel hinzufügen. Diesen Schlüssel entfernen entfernt nur den Schlüssel des aktuellen Anbieters. Alle Schlüssel vergessen entfernt alle gespeicherten Schlüssel aus diesem Browser.

Designsystem und Modell wählen

• Designsystem legt die Komponentenbibliothek fest, mit der jeder Entwurf gebaut wird. Eine Änderung startet eine neue Sitzung, weil ein Entwurf nicht mittendrin die Bibliothek wechseln kann. Unter Designsysteme und Modelle finden Sie die vollständige Liste und erfahren, wie Sie Ihr eigenes npm-Paket verwenden.
• KI-Anbieter und Modell legen fest, wer den Entwurf baut. Jeder Anbieter hat eine sinnvolle Voreinstellung, und Vibr merkt sich Ihre Wahl in diesem Browser.

Vibr in Ihrer Sprache verwenden

Vibr öffnet sich in der Sprache Ihres Browsers, wenn es eine der folgenden ist: Englisch, Arabisch, Chinesisch (vereinfacht), Niederländisch, Französisch, Deutsch, Hebräisch, Italienisch, Japanisch, Koreanisch, Portugiesisch (Brasilien) und Spanisch. Andernfalls öffnet es sich auf Englisch. Um selbst eine Sprache zu wählen, verwenden Sie den Button Sprache der Oberfläche (die Weltkugel) in der oberen Leiste. Auf dem Smartphone finden Sie ihn in den Einstellungen unter dem Designsystem. Wählen Sie Automatisch, um wieder der Sprache Ihres Browsers zu folgen.

Auf Arabisch und Hebräisch liest sich Vibr von rechts nach links: Das Layout wird gespiegelt, und Pfeile zeigen in die andere Richtung. Das ändert nur Vibr selbst. Um Ihren Entwurf in einer anderen Sprache zu sehen, verwenden Sie Vorschau in einer anderen Sprache im Canvas. Die Dokumentation gibt es in denselben Sprachen: Nutzen Sie das Sprachmenü oben auf jeder Seite der Dokumentation.

Ihren ersten Screen bauen

Geben Sie im Feld unten im Chat ein, was Sie möchten, oder wählen Sie eines der Beispiele, etwa „Eine Preisseite mit drei Tarifen und einem Schalter für jährliche Abrechnung“. Drücken Sie Eingabe oder wählen Sie Senden.

Der Chat zeigt jeden Schritt, während er läuft, und der Canvas beginnt den Screen zu zeichnen, während er noch geschrieben wird. Die meisten Screens sind in weniger als einer Minute fertig.

Wie es weitergeht

• Bitten Sie in einfachen Worten um Änderungen: „Mach die Übersichtskarte fixiert“ oder „Füge ein Gutscheinfeld hinzu“.
• Wählen Sie Speichern, um den Entwurf in Ihrer Bibliothek aufzubewahren.
• Probieren Sie die Werkzeuge des Canvas aus: Smartphone- und Tabletbreite, Versionen und Vergleich.