Primi passi

Prima di iniziare

Ti serve una chiave API di uno di questi provider. Ognuno offre un modo gratuito o economico per provarlo.

• Google Gemini: ottieni una chiave da Google AI Studio. Le chiavi del livello gratuito funzionano con i modelli Flash; i modelli Pro richiedono la fatturazione attiva.
• OpenAI: crea una chiave segreta nella dashboard di OpenAI.
• Anthropic: crea una chiave nella Console di Anthropic.

Con un account a pagamento, una bozza costa di solito pochi centesimi. La finestra della chiave mostra l'intervallo per il modello scelto.

Non hai ancora una chiave? Prova gli esempi

Alla prima visita, il benvenuto offre Prova un esempio, senza chiave. Aggiunge tre prototipi finiti alla tua libreria e apre il primo: la homepage di una caffetteria, la sua schermata del menu e una dashboard operativa. Tutto ciò che non interpella un modello funziona, tra cui selezionare elementi, confrontare versioni, tutte le dimensioni, misurare, le note, Riproduci e l'esportazione. Per modificare un esempio con una richiesta, aggiungi una chiave. In seguito anche la finestra della chiave offre Apri un esempio, finché non salvi una chiave.

Aggiungi la tua chiave

1. Scegli il provider nel selettore Provider IA della barra superiore.
2. Seleziona Aggiungi chiave. La finestra di dialogo indica il provider che hai scelto.
3. Incolla la chiave e seleziona Salva chiave. Il pulsante diventa Chiave impostata.

Vibr controlla ciò che incolli prima di salvarlo. Riconosce gli errori più comuni, come un ID chiave al posto del segreto, una chiave di un altro provider, una chiave Admin di Anthropic o uno spazio di troppo, e ti dice cosa correggere. Puoi salvare una chiave per ogni provider (Gemini, OpenAI e Anthropic) e passare dall'uno all'altro in qualsiasi momento; tutti i modelli di un provider usano la sua chiave. Per impostarne un'altra, scegli quel provider e seleziona di nuovo Aggiungi chiave. Rimuovi questa chiave rimuove solo la chiave del provider attuale. Dimentica tutte le chiavi rimuove tutte le chiavi salvate da questo browser.

Scegli un design system e un modello

• Design system imposta la libreria di componenti con cui viene costruita ogni bozza. Cambiarlo avvia una nuova sessione, perché una bozza non può cambiare libreria a metà strada. Vedi Design system e modelli per l'elenco completo e per usare un tuo pacchetto npm.
• Provider IA e Modello stabiliscono chi costruisce la bozza. Ogni provider ha un'impostazione predefinita sensata e Vibr ricorda la tua scelta in questo browser.

Usa Vibr nella tua lingua

Vibr si apre nella lingua del browser se è una di queste: inglese, arabo, cinese (semplificato), coreano, ebraico, francese, giapponese, italiano, olandese, portoghese (Brasile), spagnolo e tedesco. Altrimenti si apre in inglese. Per scegliere tu la lingua, usa il pulsante Lingua dell'interfaccia (il globo) nella barra superiore. Su smartphone si trova nelle impostazioni, sotto il design system. Scegli Automatica per tornare a seguire il browser.

In arabo ed ebraico, Vibr si legge da destra a sinistra: il layout si rispecchia e le frecce puntano nell'altra direzione. Questo cambia solo Vibr. Per vedere la tua bozza in un'altra lingua, usa l'anteprima in un'altra lingua nel canvas. La documentazione è disponibile nelle stesse lingue: usa il menu della lingua in cima a ogni pagina della documentazione.

Costruisci la tua prima schermata

Scrivi ciò che vuoi nella casella in fondo alla chat, oppure seleziona uno degli esempi, come «Una pagina prezzi con tre piani e un selettore per la fatturazione annuale». Premi Invio o seleziona Invia.

La chat mostra ogni passaggio mentre avviene e il canvas inizia a disegnare la schermata mentre viene ancora scritta. La maggior parte delle schermate è pronta in meno di un minuto.

Cosa fare dopo

• Chiedi modifiche a parole: «Rendi fissa la scheda di riepilogo» o «Aggiungi un campo per il codice sconto».
• Seleziona Salva per conservarla nella tua libreria.
• Prova gli strumenti del canvas: larghezze smartphone e tablet, versioni e confronto.