Skip to main content
Flowstep genera pantalles d’interfície d’usuari a partir de prompts en llenguatge natural, permetent-te passar d’una idea al disseny visual en segons. Ja sigui que necessitis una única pantalla per validar un concepte o un conjunt complet de pantalles que cobreixin un viatge d’usuari complet, un prompt ben escrit és tot el que necessites per començar.

​
Generar un disseny

1

Obrir un projecte nou

Des del teu panell de Flowstep, crea un projecte nou o obrir-ne un de ja existent on vulguis afegir pantalles.
2

Escriu el teu prompt

Escriu una descripció de la pantalla o les pantalles que vols. Sigues específic sobre el tipus d’aplicació, l’objectiu de l’usuari i el contingut que esperes veure.
3

Especifica quantes pantalles vols

Per defecte, Flowstep genera una única pantalla. Si vols múltiples pantalles, digues-ho explícitament al teu prompt — Flowstep pot generar fins a 6 pantalles a partir d’un únic prompt.
4

Generar

Envia el teu prompt. Flowstep produeix les teves pantalles i les mostra a l’editor, listes per revisar o refinar.

​
Pantalla única vs. múltiples pantalles

Pots generar una única pantalla o fins a 6 pantalles a partir d’un únic prompt. Ambdós enfocaments s’adequen a diferents etapes del treball de disseny.
  • Pantalla única — millor per explorar un estat específic de la interfície d’usuari, un component o un concepte centrat.
  • Múltiples pantalles — millor per a cartografiar fluixos, comparar opcions de disseny o cobrir un viatge d’usuari complet ràpidament.
Quan vols múltiples pantalles, sigues explícit al teu prompt. Flowstep utilitza la redacció del teu prompt per decidir quantes pantalles produir, així que els prompts vagues típicament retornen una única pantalla. Les pantalles generades es nombren Screen 1, Screen 2, i així successivament — utilitza aquests noms per referir-te a una pantalla específica en prompts de seguiment.

​
Més maneres de promptar

El text no és l’única entrada. Pots també:
  • Adjuntar fitxers — afegir imatges (JPG, PNG, WEBP) o documents (PDF, MD, TXT) de fins a 3 MB cadascun al prompt, mitjançant arrossega-i-deixa, el selector de fitxers o pegant. Referencia una imatge adjunta en el teu prompt i Flowstep l’incorpora a les pantalles generades. Veure referencias de disseny.
  • Dictar el teu prompt — fes clic al botó de micròfon a la barra de prompts (o prem Cmd+Shift+V a Mac, Ctrl+Shift+V a Windows) i parla fins a 60 segons. La transcripció s’afegeix al que ja has escrit.
  • Deixar que Flowstep investiga la web — quan el teu prompt ho demani (per exemple, “clonar la pàgina de preus de Stripe”), Flowstep pot cercar la web i llegir la marca d’una pàgina — colors, fonts, logo, components de la interfície d’usuari — i utilitzar-la en les pantalles generades. Flowstep decideix per si mateix si ha d’investigar, així que no necessàriament es dispararà en cada prompt; ten en compte que els llocs web recreats utilitzen imatges i navegació diferents de l’original.
  • Establir directrius de disseny — definir regles d’estil permanents que s’apliquin a cada generació en el fitxer. Veure Directrius de disseny.

​
Escrivir prompts efectius

Exemple de prompt de pantalla única: “Dissenya una pantalla de connexió mòbil per a una aplicació de seguiment de fitness amb camps de correu electrònic i contrasenya, un botó de connexió i un enllaç de contrasenya oblidada.”
Exemple de prompt multi-pantalla: “Genera múltiples pantalles per a un flux d’incorporació d’una aplicació de lliurament de menjar — cobreix la selecció de preferències de cuina, l’entrada d’una adreça de lliurament i la confirmació de la primera comanda.”
Exemple de prompt de viatge complet: “Cobreix el viatge complet de l’usuari en una aplicació de presentació de despeses, des de la presentació d’un rebut fins a l’aprovació del gestor.”
Tingues en compte aquests principis quan escriguis prompts:
  • Nomena la plataforma (mòbil, escriptori, tauleta) perquè Flowstep ajusti la mida de les pantalles correctament.
  • Descriu l’objectiu de l’usuari, no només els elements de la interfície d’usuari — Flowstep infereix el disseny a partir de la intenció.
  • Inclou contingut clau com etiquetes, accions o dades si importen en el disseny.
  • Utilitza frases com “generar múltiples pantalles” o “cobrir el viatge complet de l’usuari” per activar la sortida multi-pantalla.