Überblick

Vibr ist ein Prototyping-Tool für Designer. Sie beschreiben einen Screen in einfachen Worten, und ein Agent plant ihn, baut ihn mit dem Designsystem Ihrer Wahl, prüft, ob er gerendert wird, untersucht ihn auf Probleme bei Barrierefreiheit und Layout und repariert, was er findet. Das Ergebnis ist echter React-Code, den Sie durchklicken, überarbeiten, mit Anmerkungen versehen, zu Flows verknüpfen und exportieren können.

So funktioniert es

1. Schlüssel mitbringen. Vibr ruft Google Gemini, OpenAI, Anthropic oder OpenRouter mit Ihrem eigenen API-Schlüssel auf. Der Schlüssel bleibt in Ihrem Browser.
2. Designsystem wählen. Material UI, Ant Design, Fluent UI, Mantine, Shoelace, Octuple oder ein beliebiges Paket auf npm.
3. Screen beschreiben. Vibr zeigt jeden Schritt, während es arbeitet, und der Canvas zeichnet den Screen, während er geschrieben wird.
4. Weitermachen. Bitten Sie um Änderungen, zeigen Sie auf ein Element, um nur diesen Teil zu ändern, vergleichen Sie Versionen, heften Sie Feedback an und speichern Sie in Ihrer Bibliothek.

Was Vibr anders macht

• Echte Komponenten statt Nachbauten. Entwürfe importieren aus dem tatsächlichen Paket des Designsystems. Was Sie sehen, ist also das, was ein Entwickler ausliefern würde.
• Vibr prüft seine eigene Arbeit. Jeder Entwurf wird gerendert und dann in Desktop-, Tablet- und Smartphonebreite mit automatischen Barrierefreiheitsprüfungen untersucht, bevor Sie ihn sehen.
• Ihre Bibliothek ist immer dabei. Bilder, Videos, Farbthemes, Typo-Skalen und Icons, die Sie hinzufügen, lassen sich mit einer @-Erwähnung in jede Anfrage einbringen.
• Kein Konto, kein Server. Alles läuft in Ihrem Browser. Siehe Schlüssel, Datenschutz und Speicher.

Wie es weitergeht

• Neu hier? Beginnen Sie mit Erste Schritte.
• Sie möchten bessere Ergebnisse? Lesen Sie Prompts schreiben.
• Sie fragen sich, was die Schritte bedeuten? Siehe Ablauf eines Durchlaufs.
• Etwas ist schiefgelaufen? Sehen Sie unter Fehlerbehebung nach.