Referenz
Designsysteme und Modelle
Die Designsysteme, mit denen Vibr baut, wie Sie ein beliebiges Paket von npm verwenden und welche Modelle jeder Anbieter bietet.
Integrierte Designsysteme
| Designsystem | Art | Pakete |
|---|---|---|
| Material UI (MUI) | React | @mui/material@6, @mui/icons-material@6, Emotion |
| Ant Design | React | antd@5 |
| Fluent UI React | React | @fluentui/react-components@9 |
| Mantine | React | @mantine/core@7, @mantine/hooks@7 |
| Shoelace | Web Components | @shoelace-style/shoelace@2 |
| Octuple | React | @eightfold.ai/octuple@2 |
Entwürfe importieren echte Komponenten aus diesen Paketen, die von einem CDN geladen werden, und rendern mit React 19. Vor dem Bauen liest Vibr aus, welche Komponenten jedes Paket tatsächlich exportiert, sodass das Modell keine erfinden kann, die es nicht gibt. Das CDN ist esm.sh. Antwortet es nicht mehr, lädt Vibr Entwürfe für den Rest Ihres Besuchs stattdessen aus einer Reserve (jsDelivr oder Vibrs eigener Kopie von Fluent UI) und weist Sie darauf hin.
Ein Wechsel des Designsystems startet eine neue Sitzung. Speichern Sie vorher alles, was Sie behalten möchten.
Ein beliebiges Paket von npm verwenden
Wählen Sie Eigenes npm-Paket… in der Auswahl Designsystem und füllen Sie Folgendes aus:
| Feld | Was Sie eingeben | Beispiel |
|---|---|---|
| Paket (mit Version) | Den Paketnamen und die Hauptversion. | @radix-ui/themes@3 |
| CSS-Pfad oder URL | Optional. Das Stylesheet des Pakets, falls vorhanden. | @radix-ui/themes@3/styles.css |
| Art | React oder Web Components. | React |
| Registrierungsmodul | Optional, für Web Components, die einen Loader zur Registrierung brauchen. | my-ds@1/dist/loader.js |
Vibr prüft vor dem Bauen, ob das Paket auf npm existiert. Sind Name oder Version falsch, sagt es Ihnen das.
Vibr prüft das Paket außerdem, bevor irgendetwas es lädt. Ein Versionsbereich wird auf die neueste Version festgelegt, die mindestens 2 Wochen alt ist (aus @radix-ui/themes@3 wird im Feld etwa @radix-ui/themes@3.3.0), damit eine fehlerhafte Version von heute nicht übernommen wird. Ein als Schadsoftware gelistetes Paket wird nie geladen. Unter dem Feld weist Vibr auf bekannte Sicherheitswarnungen hin, auf eine veraltete Version, auf ein Paket, das jünger als 30 Tage ist oder letzte Woche weniger als 1.000 Downloads hatte, und auf einen Namen, der ein oder zwei Buchstaben von einem beliebten Paket abweicht. Diese Prüfungen nutzen öffentliche Daten von deps.dev, npm und OSV und senden nur Name und Version des Pakets.
Wie Sie zusätzlich Diagramm- und Tabellenbibliotheken wählen, lesen Sie unter Diagramme und Tabellen.
Anbieter und Modelle
| Anbieter | Modelle | Plant mit |
|---|---|---|
| Google Gemini | gemini-3.5-flash (Standard), gemini-3.7-flash, gemini-flash-latest, gemini-3.1-pro-preview | gemini-3.5-flash |
| OpenAI | gpt-5.5 (Standard), gpt-5.4, gpt-5.4-mini | gpt-5.4-mini |
| Anthropic | claude-sonnet-5-5 (Standard), claude-opus-5-5 | claude-haiku-5-5 |
| OpenRouter | anthropic/claude-sonnet-5.5 (Standard), anthropic/claude-opus-5.5, openai/gpt-5.5, google/gemini-3.5-flash, google/gemini-3.1-pro-preview | anthropic/claude-haiku-5.5 · openai/gpt-5.4-mini · google/gemini-3.5-flash |
Mit OpenRouter haben Sie einen Schlüssel für Claude-, GPT- und Gemini-Modelle. Statt einen Schlüssel einzufügen, können Sie im Schlüsseldialog Mit OpenRouter anmelden wählen. OpenRouter erstellt dann einen Schlüssel nur für Vibr, den Sie in Ihrem OpenRouter-Konto einsehen, begrenzen und widerrufen können.
Der Schritt Planen verwendet ein schnelleres Modell desselben Anbieters. Kann Ihr Schlüssel es nicht nutzen, plant stattdessen das gewählte Modell. Jedes Modell hat außerdem ein Ersatzmodell desselben Anbieters, das einspringt, wenn es ausgelastet ist oder sein Kontingent erschöpft ist; siehe Ablauf eines Durchlaufs.
Die kostenlose Stufe von Gemini funktioniert mit den Flash-Modellen. Pro-Modelle erfordern aktivierte Abrechnung in Google AI Studio.