Scrivere i prompt

Descrivi la schermata

Scrivi a cosa serve la schermata e cosa contiene, come faresti in un brief per un designer. Vibr inserisce contenuti di esempio realistici, quindi non devi scrivere i testi.

• Buono: «Una dashboard di analisi con schede KPI e una tabella degli ordini recenti»
• Migliore: «Una dashboard di analisi per una torrefazione: quattro schede KPI per fatturato, ordini, valore medio dell'ordine e clienti abituali, un grafico del fatturato settimanale e una tabella degli ordini recenti con chip di stato»

Premi Invio per inviare e Maiusc+Invio per andare a capo. Sui touchscreen, il tasto A capo aggiunge una nuova riga e il pulsante Invia invia.

Se una richiesta è troppo vaga per essere pianificata, Vibr ti fa una domanda invece di tirare a indovinare. Rispondi nella casella e la generazione riprende da lì.

Vibr progetta solo interfacce. Una richiesta senza nulla da costruire, come una domanda di cultura generale o un tema, riceve una risposta di una riga con l’idea di un’interfaccia che potresti costruire al suo posto, e dopo Pianifica non viene eseguito nulla. Tutto ciò che può diventare una pagina, un’app o una schermata, su qualsiasi argomento, viene comunque costruito. Quando c’è una bozza nell’area di lavoro, puoi anche fare domande su di essa («Perché questo font?», «Questo contrasto è accessibile?») e Vibr risponde nella chat senza modificare la bozza.

Parti da un'immagine

Hai uno schizzo, uno screenshot o un mockup? Aggiungilo alla richiesta e Vibr costruisce partendo da ciò che mostra. Seleziona + sotto la casella, poi Aggiungi un file, oppure incolla o trascina un'immagine al suo interno. Puoi aggiungerne fino a tre per richiesta, in PNG, JPEG, WebP, GIF, AVIF o SVG.

• "Trasforma questo schizzo in una pagina di registrazione"
• "Segui il layout di questo screenshot, con contenuti per un negozio di bici"
• Un'immagine senza testo costruisce ciò che l'immagine mostra.

La bozza usa i componenti e la tipografia del tuo design system, quindi segue il layout e la gerarchia dell'immagine invece di copiarne i pixel. Il testo nell'immagine è trattato come contenuto, mai come istruzioni.

Ogni immagine viene ridotta e ridisegnata prima dell'invio, il che ne rimuove i metadati, e viene controllata sul tuo dispositivo come qualsiasi immagine aggiunta alla libreria. Va al tuo provider IA solo con quella richiesta. Non viene salvata nella libreria né conservata con la conversazione, quindi le richieste successive non la inviano di nuovo.

Allega documenti

Un brief, note di ricerca, una design challenge, i numeri dell'ultimo trimestre: allega il documento e Vibr progetta partendo da lì. Seleziona + sotto la casella, poi Aggiungi un file, oppure incollalo o trascinalo nella casella. Puoi allegare fino a tre documenti per richiesta:

• PDF
• Word, PowerPoint ed Excel (.docx, .pptx, .xlsx)
• CSV, TSV, Markdown e testo semplice

Da Documenti, Presentazioni o Fogli Google, scarica prima il file (File, poi Scarica) in uno di questi formati.

Vibr legge ogni documento nel tuo browser. Il modello riceve il testo, con le note del relatore di una presentazione e le righe di un foglio come tabella, più alcune immagini: le prime pagine di un PDF o le prime immagini di un file Word o di una presentazione. Con una richiesta vanno fino a 30.000 caratteri di testo; oltre, il testo viene accorciato e il chip lo indica. Seleziona il chip di un documento per vedere esattamente cosa viene inviato e per salvarne le immagini nella libreria. Per riusare un documento nelle richieste successive, seleziona Salva nella libreria nella sua anteprima, poi menzionalo con @doc.

Ogni documento viene controllato prima di essere letto. Vengono rifiutati i file che possono eseguire macro (.docm, .pptm, .xlsm o un documento con un progetto di macro nascosto), gli archivi che si decomprimerebbero ben oltre la loro dimensione e i PDF protetti da password. Niente in un documento viene eseguito: script, link, campi modulo, formule e oggetti incorporati vengono ignorati, e le celle di un foglio arrivano con i valori salvati. Il testo passa la stessa pulizia e gli stessi controlli di ciò che scrivi, le immagini gli stessi delle immagini di riferimento, e il modello tratta un documento come materiale da cui progettare, mai come istruzioni.

Un documento va solo con quella richiesta. Non viene salvato nella libreria né conservato con la conversazione.

Modifica ciò che hai

Quando esiste una bozza, la casella indica «Descrivi modifiche o nuove sezioni…». Ogni richiesta modifica la bozza nel canvas e diventa una nuova versione, così puoi sempre tornare indietro. Alcuni esempi:

• «Metti in evidenza il piano Pro e aggiungi delle FAQ»
• «Usa un layout a due colonne su desktop»
• «Sostituisci la tabella con delle schede su smartphone»

La bozza attuale resta nel canvas mentre viene scritta la nuova versione e il canvas passa a quella nuova appena una parte sufficiente è pronta da disegnare.

Modifica solo una parte

Per modificare un elemento senza toccare il resto:

1. Seleziona Seleziona un elemento (l'icona del puntatore sopra il canvas).
2. Fai clic sulla parte da modificare. Un chip sopra la casella mostra di quale elemento si tratta e dove si trova nel codice.
3. Descrivi la modifica. Parole come «questo», «qui» e «lo» si riferiscono a quell'elemento.

Premi Esc per interrompere la selezione oppure seleziona la X sul chip per cancellarla.

Se l'elemento si ripete nella pagina, come una scheda in un elenco o un titolo in ogni piano tariffario, sotto l'etichetta compare una scelta: Solo questa modifica solo la copia su cui hai fatto clic, Tutte e N le modifica tutte. Solo questa è l'impostazione predefinita. La tela evidenzia le copie che cambieranno.

Modificare più parti insieme

Tieni premuto Maiusc e fai clic su altri elementi per modificarli con una sola richiesta, fino a 8. Ognuno riceve un numero nell’area di lavoro e il chip li elenca. Poi descrivi come sono collegati, ad esempio «rendili uguali» o «dai loro la stessa spaziatura». Un nuovo Maiusc+clic su un elemento selezionato lo toglie.

Su uno schermo touch, seleziona Aggiungi nel chip e tocca gli elementi. Da tastiera, premi Maiusc+Invio su un elemento con il focus. Ogni elemento aggiunto conta solo come la copia scelta. Un elemento dentro uno già selezionato ne fa già parte, quindi non viene aggiunto due volte.

Menziona le risorse con @

Digita @ nella casella, oppure seleziona il pulsante @, per inserire in una richiesta qualcosa dalla tua libreria. Mentre scrivi compare un elenco. Usa ↑ e ↓ per scegliere e Invio o Tab per aggiungere.

Menzione	Cosa inserisce
@image/name	Un'immagine che hai importato o salvato da Unsplash.
@video/name	Un video che hai importato o salvato da Pixabay.
@theme/name	Un tema colori, con le sue modalità chiara e scura.
@type/ramp/style	Uno stile di testo da una delle tue scale tipografiche, come @type/georgia/h1.
@icon/name	Un'icona Lucide integrata o una di un font di icone che hai importato (@icon/set/name).
@screen/name	Un prototipo salvato a cui collegarsi. Vedi Flussi.
@chart/kind	Un tipo di grafico, come @chart/donut, costruito con la tua libreria di grafici. Vedi Grafici e tabelle.
@table/feature	Una funzione delle tabelle, come @table/sortable, costruita con la tua libreria di tabelle.

Le menzioni nella richiesta compaiono come chip sotto la casella. Un chip diventa rosso se il nome non è nella tua libreria e Vibr ignora quella menzione. Scopri come aggiungere risorse in Immagini, video, documenti, temi, tipografia e icone.

Consigli per risultati migliori

• Una schermata per richiesta. Costruisci una pagina, poi aggiungi altro. Le richieste molto grandi possono raggiungere il limite di output del modello; in quel caso, chiedi una sezione per messaggio.
• Dai un nome alle parti. «Le schede dei piani» o «l'intestazione» sono più facili da gestire di «la parte in alto».
• Usa lo strumento giusto. Per un singolo elemento, selezionalo. Per note da conservare, fissa un'annotazione.