Skip to main content
Flowstep genera schermate UI da prompt in linguaggio naturale, permettendoti di passare da un’idea a un design visivo in secondi. Che tu abbia bisogno di una singola schermata per convalidare un concetto o di un set completo di schermate che copra un intero user journey, un prompt ben scritto è tutto ciò che serve per iniziare.

​
Genera un design

1

Apri un nuovo progetto

Dal tuo dashboard Flowstep, crea un nuovo progetto o apri uno esistente dove vuoi aggiungere schermate.
2

Scrivi il tuo prompt

Digita una descrizione della schermata o delle schermate che desideri. Sii specifico sul tipo di app, l’obiettivo dell’utente e il contenuto che ti aspetti di vedere.
3

Specifica quante schermate desideri

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

Genera

Invia il tuo prompt. Flowstep produce le tue schermate e le visualizza nell’editor, pronte per la revisione o l’affinamento.

​
Una singola schermata rispetto a più schermate

Puoi generare una singola schermata o fino a 6 schermate da un singolo prompt. Entrambi gli approcci si adattano a diversi stadi del lavoro di design.
  • Una schermata — migliore per esplorare uno stato UI specifico, un componente o un concetto mirato.
  • Più schermate — migliore per mappare i flussi, confrontare le opzioni di layout o coprire un user journey completo rapidamente.
Quando desideri più schermate, sii esplicito nel tuo prompt. Flowstep usa la formulazione del tuo prompt per decidere quante schermate produrre, quindi i prompt vagi tipicamente restituiscono una singola schermata. Le schermate generate sono denominate Screen 1, Screen 2 e così via — usa questi nomi per fare riferimento a una schermata specifica nei prompt di follow-up.

​
Altri modi per fare un prompt

Il testo non è l’unico input. Puoi anche:
  • Allega file — aggiungi immagini (JPG, PNG, WEBP) o documenti (PDF, MD, TXT) fino a 3 MB ciascuno al prompt, tramite drag-and-drop, il file picker o incollando. Fai riferimento a un’immagine allegata nel tuo prompt e Flowstep l’incorpora nelle schermate generate. Vedi Usa riferimenti di design.
  • Dittare il tuo prompt — fai clic sul pulsante del microfono nella barra del prompt (o premi Cmd+Shift+V su Mac, Ctrl+Shift+V su Windows) e parla per un massimo di 60 secondi. La trascrizione viene aggiunta a qualsiasi cosa tu abbia già digitato.
  • Lascia che Flowstep ricerchi il web — quando il tuo prompt lo richiede (ad esempio, “clona la pagina dei prezzi di Stripe”), Flowstep può cercare il web e leggere il branding di una pagina — colori, font, logo, componenti UI — e usarlo nelle schermate generate. Flowstep decide autonomamente se ricercare, quindi non attiverà necessariamente ogni prompt; nota che i siti web ricreati utilizzano immagini e navigazione diverse dall’originale.
  • Imposta 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 fitness tracking con campi di email e password, un pulsante di accesso e un collegamento per la password dimenticata.”
Esempio di prompt multi-schermata: “Genera più schermate per un flusso di onboarding di un’app di consegna cibo — copri la selezione delle preferenze di cucina, l’inserimento di un indirizzo di consegna e la conferma del primo ordine.”
Esempio di prompt per il percorso completo: “Copri il percorso utente completo in un’app di segnalazione spese, dall’invio di una ricevuta all’approvazione del manager.”
Tieni a mente questi principi quando scrivi i prompt:
  • Nomina la piattaforma (mobile, desktop, tablet) così Flowstep dimensiona le schermate correttamente.
  • Descrivi l’obiettivo dell’utente, non solo gli elementi UI — Flowstep deduce il layout dall’intento.
  • Includi contenuti chiave come etichette, azioni o dati se sono importanti per il design.
  • Usa frasi come “genera più schermate” o “copri il percorso utente completo” per attivare l’output multi-schermata.