Riferimento
Design system e modelli
I design system con cui Vibr costruisce, come usare qualsiasi pacchetto npm e i modelli offerti da ogni provider.
Design system integrati
| Design system | Tipo | Pacchetti |
|---|---|---|
| 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 component | @shoelace-style/shoelace@2 |
| Octuple | React | @eightfold.ai/octuple@2 |
Le bozze importano componenti reali da questi pacchetti, caricati da una CDN, e vengono visualizzate con React 19. Prima di costruire, Vibr legge quali componenti esporta davvero ogni pacchetto, così il modello non può inventarne uno che non esiste. La CDN è esm.sh. Se smette di rispondere, Vibr carica le bozze da una riserva (jsDelivr, o la copia di Fluent UI di Vibr) per il resto della visita e te lo segnala.
Cambiare design system avvia una nuova sessione. Prima salva ciò che vuoi conservare.
Usa qualsiasi pacchetto npm
Scegli Pacchetto npm personalizzato… nel selettore Design system e compila:
| Campo | Cosa inserire | Esempio |
|---|---|---|
| Pacchetto (con versione) | Il nome del pacchetto e la versione principale. | @radix-ui/themes@3 |
| Percorso o URL del CSS | Facoltativo. Il foglio di stile del pacchetto, se ne ha uno. | @radix-ui/themes@3/styles.css |
| Tipo | React o Web component. | React |
| Modulo di registrazione | Facoltativo, per i web component che hanno bisogno di un loader per registrarsi. | my-ds@1/dist/loader.js |
Vibr verifica che il pacchetto esista su npm prima di costruire. Se il nome o la versione sono sbagliati, te lo segnala.
Vibr controlla anche il pacchetto prima che qualcosa lo carichi. Un intervallo di versioni viene fissato sulla versione più recente uscita da almeno 2 settimane (@radix-ui/themes@3 diventa, per esempio, @radix-ui/themes@3.3.0 nel campo), così una versione difettosa pubblicata oggi non viene usata. Un pacchetto segnalato come malware non viene mai caricato. Sotto il campo, Vibr segnala avvisi di sicurezza noti, una versione deprecata, un pacchetto con meno di 30 giorni o con meno di 1.000 download la settimana scorsa, e un nome che differisce di una o due lettere da un pacchetto popolare. Questi controlli usano dati pubblici di deps.dev, npm e OSV, e inviano solo il nome e la versione del pacchetto.
Per scegliere anche le librerie di grafici e tabelle, vedi Grafici e tabelle.
Provider e modelli
| Provider | Modelli | Pianifica con |
|---|---|---|
| Google Gemini | gemini-3.5-flash (predefinito), gemini-3.7-flash, gemini-flash-latest, gemini-3.1-pro-preview | gemini-3.5-flash |
| OpenAI | gpt-5.5 (predefinito), gpt-5.4, gpt-5.4-mini | gpt-5.4-mini |
| Anthropic | claude-sonnet-5-5 (predefinito), claude-opus-5-5 | claude-haiku-5-5 |
| OpenRouter | anthropic/claude-sonnet-5.5 (predefinito), 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 |
OpenRouter ti dà un'unica chiave per i modelli Claude, GPT e Gemini. Invece di incollare una chiave, puoi selezionare Accedi con OpenRouter nella finestra della chiave. OpenRouter crea una chiave solo per Vibr, che puoi vedere, limitare e revocare nel tuo account OpenRouter.
Il passaggio Pianifica usa un modello più veloce dello stesso provider. Se la tua chiave non può usarlo, pianifica il modello che hai scelto. Ogni modello ha anche un modello di riserva dello stesso provider che subentra quando è occupato o ha esaurito la quota; vedi Come funziona una generazione.
Il livello gratuito di Gemini funziona con i modelli Flash. I modelli Pro richiedono la fatturazione attiva in Google AI Studio.