Vai al contenuto principale
Flowstep genera schermate dell’interfaccia utente da prompt in linguaggio naturale, permettendoti di passare da un’idea a un design visivo in pochi secondi. Che tu abbia bisogno di una singola schermata per validare un concetto o di una serie completa di schermate che coprano un intero percorso utente, un prompt ben scritto è tutto ciò che serve per iniziare.

​
Genera un design

1

Apri un nuovo progetto

Dalla dashboard di Flowstep, crea un nuovo progetto o apri quello esistente in cui vuoi aggiungere schermate.
2

Scrivi il tuo prompt

Descrivi la schermata o le schermate che vuoi. Sii specifico sul tipo di app, sull’obiettivo dell’utente e sui contenuti che ti aspetti di vedere.
3

Specifica quante schermate vuoi

Per impostazione predefinita, Flowstep genera una singola schermata. Se vuoi più schermate, indicalo esplicitamente nel prompt: Flowstep può generare fino a 6 schermate da un singolo prompt.
4

Genera

Invia il prompt. Flowstep produce le schermate e le mostra nell’editor, pronte per essere riviste o perfezionate.
Quando crei un nuovo file e invii il suo primo prompt, Flowstep gli assegna un nome in base a quel prompt, così da poterlo ritrovare facilmente. Un file che ha già un nome — o prompt precedenti — mantiene il proprio nome, e puoi rinominare qualsiasi file in qualsiasi momento.

​
Interrompi una generazione

Mentre Flowstep sta rispondendo, il pulsante di invio si trasforma in un pulsante di arresto (Stop Flowstep response). Fai clic per interrompere la generazione. In una richiesta multi-schermata, le schermate già completate restano sul canvas, mentre quelle non terminate vengono rimosse. Interrompere la generazione dopo che Flowstep ha iniziato a creare le schermate consuma comunque il messaggio — vedi messaggi e limiti.

​
Schermata singola vs. più schermate

Puoi generare una schermata oppure fino a 6 schermate da un singolo prompt. Entrambi gli approcci sono adatti a fasi diverse del lavoro di design.
  • Una schermata — ideale per esplorare uno stato specifico dell’interfaccia, un componente o un concetto mirato.
  • Più schermate — ideale per mappare flussi, confrontare opzioni di layout o coprire rapidamente un intero percorso utente.
Quando vuoi più schermate, sii esplicito nel prompt. Flowstep usa la formulazione del prompt per decidere quante schermate produrre, quindi i prompt vaghi restituiscono di solito una sola schermata. Le schermate generate hanno nomi come Screen 1, Screen 2 e così via: usa questi nomi per riferirti a una schermata specifica nei prompt successivi.

​
Altri modi per inviare prompt

Il testo non è l’unico input. Puoi anche:
  • Allegare file — aggiungi al prompt immagini (JPG, PNG, WEBP) o documenti (PDF, MD, TXT) fino a 3 MB ciascuno, tramite trascinamento, il selettore di file o incollandoli. Fai riferimento a un’immagine allegata nel prompt e Flowstep la incorpora nelle schermate generate. Vedi Usa riferimenti.
  • Dettare il prompt — fai clic sul pulsante del microfono nella barra dei prompt (oppure premi Cmd+Shift+V su Mac o Ctrl+Shift+V su Windows) e parla per un massimo di 60 secondi. La trascrizione viene aggiunta a quanto hai già scritto.
  • Lasciare che Flowstep cerchi sul web — quando il prompt lo richiede (ad esempio, “clona la pagina dei prezzi di Stripe”), Flowstep può cercare sul web e leggere il branding di una pagina — colori, font, logo, componenti dell’interfaccia — e usarlo nelle schermate generate. Flowstep decide autonomamente se fare una ricerca, quindi non si attiva necessariamente con ogni prompt; tieni presente che i siti ricreati usano immagini e navigazione diverse dall’originale.
  • Impostare le linee guida di design — definisci regole di stile permanenti che si applicano a ogni generazione nel file. Vedi linee guida di design.

​
Scrivere prompt efficaci

Esempio di prompt per una singola schermata: “Progetta una schermata di accesso mobile per un’app di monitoraggio della forma fisica, con campi per email e password, un pulsante di accesso e un link per la password dimenticata.”
Esempio di prompt per più schermate: “Genera più schermate per il flusso di onboarding di un’app di consegna di cibo: copri la selezione delle preferenze di cucina, l’inserimento dell’indirizzo di consegna e la conferma del primo ordine.”
Esempio di prompt per un intero percorso: “Copri l’intero percorso utente in un’app per le note spese, dall’invio di una ricevuta all’approvazione del manager.”
Tieni a mente questi principi quando scrivi i prompt:
  • Indica la piattaforma (mobile, desktop, tablet) in modo che Flowstep dimensioni correttamente le schermate.
  • Descrivi l’obiettivo dell’utente, non solo gli elementi dell’interfaccia: Flowstep deduce il layout dall’intento.
  • Includi i contenuti chiave, come etichette, azioni o dati, se sono importanti per il design.
  • Usa frasi come “genera più schermate” o “copri l’intero percorso utente” per ottenere un output multi-schermata.